From 3e3a0468a878b6868e232af9cca6022d60d719f5 Mon Sep 17 00:00:00 2001
From: Armando Fernandez <codefilez@gmail.com>
Date: Mon, 20 Jul 2026 13:05:31 -0700
Subject: [PATCH] Add E-Ink and CRT display themes; simplify Appearance page

Ships two new reading-focused themes and reorganizes the theme
settings page for easier navigation.

- E-Ink Paper: warm paper + black ink, grayscale, no motion; dithers
  the chat background and desaturates emoji for a Kindle-like read.
- Cathode Ray (CRT): deep-black picture tube with glowing phosphors
  and static scanlines. Named for the technology (no brand names) to
  avoid trademark exposure.
- Both effects are performance-safe (static rendering only, no
  animation) and leave the existing 13 themes untouched.
- Appearance page redesigned into a two-pane layout: themes always
  visible on the left; chat background and window opacity always open
  on the right.
---
 src/MandoCode.Desktop/MainWindow.xaml         | 197 ++++++++++--------
 .../Services/ThemeManager.cs                  |  49 +++++
 .../Services/TranscriptHtmlBuilder.cs         |  90 +++++++-
 3 files changed, 243 insertions(+), 93 deletions(-)

diff --git a/src/MandoCode.Desktop/MainWindow.xaml b/src/MandoCode.Desktop/MainWindow.xaml
index 1c99468..5e15690 100644
--- a/src/MandoCode.Desktop/MainWindow.xaml
+++ b/src/MandoCode.Desktop/MainWindow.xaml
@@ -452,24 +452,35 @@
                                    Opacity="0.6" FontSize="12" TextWrapping="Wrap"/>
                     </StackPanel>
 
-                    <ScrollViewer Grid.Row="1">
-                        <StackPanel Spacing="8" MaxWidth="680" HorizontalAlignment="Left" Padding="0,8,0,8">
-                            <!-- Win11-Settings style: one collapsible card per setting, with the
-                                 current value on the header so the collapsed page reads at a glance. -->
-                            <Expander MinWidth="640"
-                                      HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
-                                <Expander.Header>
-                                    <StackPanel Orientation="Horizontal" Spacing="10" Padding="0,14">
-                                        <FontIcon Glyph="&#xE790;" FontSize="16"/>
-                                        <TextBlock Text="Theme" FontWeight="SemiBold"/>
-                                        <TextBlock x:Name="ThemeHeaderValue" Opacity="0.6" FontSize="13"
-                                                   VerticalAlignment="Center"/>
-                                    </StackPanel>
-                                </Expander.Header>
-                                <StackPanel Spacing="4">
-                                <TextBlock Text="Themes restyle everything, transcripts included."
+                    <!-- Two-pane layout: themes always visible on the left; chat background and
+                         window opacity always open on the right. No collapsing cards — the whole
+                         page is on screen at once, which is quicker to navigate. -->
+                    <Grid Grid.Row="1" ColumnSpacing="16">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" MinWidth="360"/>
+                            <ColumnDefinition Width="*" MinWidth="360"/>
+                        </Grid.ColumnDefinitions>
+
+                        <!-- LEFT: theme picker, always open. The ListView scrolls internally. -->
+                        <Border Grid.Column="0" Background="{StaticResource MandoPanelBrush}"
+                                BorderBrush="{StaticResource MandoBorderBrush}" BorderThickness="1"
+                                CornerRadius="8" Padding="16">
+                            <Grid RowSpacing="6">
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="Auto"/>
+                                    <RowDefinition Height="Auto"/>
+                                    <RowDefinition Height="*"/>
+                                </Grid.RowDefinitions>
+                                <StackPanel Orientation="Horizontal" Spacing="10">
+                                    <FontIcon Glyph="&#xE790;" FontSize="16"/>
+                                    <TextBlock Text="Theme" FontWeight="SemiBold" VerticalAlignment="Center"/>
+                                    <TextBlock x:Name="ThemeHeaderValue" Opacity="0.6" FontSize="13"
+                                               VerticalAlignment="Center"/>
+                                </StackPanel>
+                                <TextBlock Grid.Row="1" Text="Themes restyle everything, transcripts included."
                                            Opacity="0.6" FontSize="12" TextWrapping="Wrap"/>
-                                <ListView x:Name="ThemeList" SelectionMode="Single" SelectionChanged="ThemeList_SelectionChanged">
+                                <ListView Grid.Row="2" x:Name="ThemeList" SelectionMode="Single"
+                                          SelectionChanged="ThemeList_SelectionChanged" Margin="0,4,0,0">
                                 <ListView.ItemTemplate>
                                     <DataTemplate x:DataType="local:ThemeVm">
                                         <Border Background="{x:Bind BgBrush}" BorderBrush="{x:Bind EdgeBrush}"
@@ -494,83 +505,87 @@
                                         </Border>
                                     </DataTemplate>
                                 </ListView.ItemTemplate>
-                            </ListView>
-                                </StackPanel>
-                            </Expander>
-
-                            <Expander MinWidth="640"
-                                      HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
-                                <Expander.Header>
-                                    <StackPanel Orientation="Horizontal" Spacing="10" Padding="0,14">
-                                        <FontIcon Glyph="&#xE8B9;" FontSize="16"/>
-                                        <TextBlock Text="Chat background" FontWeight="SemiBold"/>
-                                        <TextBlock x:Name="BgFileLabel" Text="No image set" Opacity="0.6"
-                                                   FontSize="13" VerticalAlignment="Center"/>
-                                    </StackPanel>
-                                </Expander.Header>
-                                <StackPanel Spacing="10">
-                                    <TextBlock Text="Shown behind the conversation in every agent tab. The slider fades the image only — text always stays fully readable."
-                                               Opacity="0.6" FontSize="12" TextWrapping="Wrap"/>
-
-                                    <!-- Live preview: theme background + the image at slider opacity,
-                                         with sample chat lines on top to judge readability. -->
-                                    <Border Height="120" CornerRadius="8"
-                                            BorderBrush="{StaticResource MandoBorderBrush}" BorderThickness="1"
-                                            Background="{StaticResource MandoBackgroundBrush}">
-                                        <Grid>
-                                            <Image x:Name="BgPreviewImage" Stretch="UniformToFill" Opacity="0.3"/>
-                                            <StackPanel Padding="14,0" Spacing="2" VerticalAlignment="Center">
-                                                <TextBlock Text="&gt; how does this look?"
-                                                           Foreground="{StaticResource MandoGoldBrush}"
-                                                           FontWeight="SemiBold" FontSize="13"/>
-                                                <TextBlock Text="MandoCode"
-                                                           Foreground="{StaticResource MandoGreenBrush}"
-                                                           FontWeight="Bold" FontSize="12"/>
-                                                <TextBlock Text="Like this — the image fades, the text never does."
-                                                           Foreground="{StaticResource MandoTextBrush}" FontSize="13"/>
-                                            </StackPanel>
-                                        </Grid>
-                                    </Border>
+                                </ListView>
+                            </Grid>
+                        </Border>
 
-                                    <StackPanel Orientation="Horizontal" Spacing="8">
-                                        <Button x:Name="BgChooseButton" Content="Choose image…" Click="BgChoose_Click"/>
-                                        <Button x:Name="BgClearButton" Content="Remove" Click="BgClear_Click"/>
+                        <!-- RIGHT: chat background (top) + window opacity (below), both always open. -->
+                        <ScrollViewer Grid.Column="1">
+                            <StackPanel Spacing="16">
+                                <!-- Chat background -->
+                                <Border Background="{StaticResource MandoPanelBrush}"
+                                        BorderBrush="{StaticResource MandoBorderBrush}" BorderThickness="1"
+                                        CornerRadius="8" Padding="16">
+                                    <StackPanel Spacing="10">
+                                        <StackPanel Orientation="Horizontal" Spacing="10">
+                                            <FontIcon Glyph="&#xE8B9;" FontSize="16"/>
+                                            <TextBlock Text="Chat background" FontWeight="SemiBold" VerticalAlignment="Center"/>
+                                            <TextBlock x:Name="BgFileLabel" Text="No image set" Opacity="0.6"
+                                                       FontSize="13" VerticalAlignment="Center"/>
+                                        </StackPanel>
+                                        <TextBlock Text="Shown behind the conversation in every agent tab. The slider fades the image only — text always stays fully readable."
+                                                   Opacity="0.6" FontSize="12" TextWrapping="Wrap"/>
+
+                                        <!-- Live preview: theme background + the image at slider opacity,
+                                             with sample chat lines on top to judge readability. -->
+                                        <Border Height="120" CornerRadius="8"
+                                                BorderBrush="{StaticResource MandoBorderBrush}" BorderThickness="1"
+                                                Background="{StaticResource MandoBackgroundBrush}">
+                                            <Grid>
+                                                <Image x:Name="BgPreviewImage" Stretch="UniformToFill" Opacity="0.3"/>
+                                                <StackPanel Padding="14,0" Spacing="2" VerticalAlignment="Center">
+                                                    <TextBlock Text="&gt; how does this look?"
+                                                               Foreground="{StaticResource MandoGoldBrush}"
+                                                               FontWeight="SemiBold" FontSize="13"/>
+                                                    <TextBlock Text="MandoCode"
+                                                               Foreground="{StaticResource MandoGreenBrush}"
+                                                               FontWeight="Bold" FontSize="12"/>
+                                                    <TextBlock Text="Like this — the image fades, the text never does."
+                                                               Foreground="{StaticResource MandoTextBrush}" FontSize="13"/>
+                                                </StackPanel>
+                                            </Grid>
+                                        </Border>
+
+                                        <StackPanel Orientation="Horizontal" Spacing="8">
+                                            <Button x:Name="BgChooseButton" Content="Choose image…" Click="BgChoose_Click"/>
+                                            <Button x:Name="BgClearButton" Content="Remove" Click="BgClear_Click"/>
+                                        </StackPanel>
+                                        <Grid ColumnSpacing="12">
+                                            <Grid.ColumnDefinitions>
+                                                <ColumnDefinition Width="*"/>
+                                                <ColumnDefinition Width="Auto"/>
+                                            </Grid.ColumnDefinitions>
+                                            <Slider x:Name="S_BgOpacity" Header="Image opacity" Minimum="5" Maximum="100"
+                                                    Value="30" ValueChanged="BgOpacity_Changed"
+                                                    ToolTipService.ToolTip="How strongly the image shows through. Lower it if text gets hard to read — the text itself never fades."/>
+                                            <TextBlock x:Name="S_BgOpacityLabel" Grid.Column="1" Text="30%"
+                                                       VerticalAlignment="Bottom" Margin="0,0,0,8" Opacity="0.7"
+                                                       FontSize="13" MinWidth="44"/>
+                                        </Grid>
                                     </StackPanel>
-                                    <Grid ColumnSpacing="12">
-                                        <Grid.ColumnDefinitions>
-                                            <ColumnDefinition Width="Auto"/>
-                                            <ColumnDefinition Width="Auto"/>
-                                        </Grid.ColumnDefinitions>
-                                        <Slider x:Name="S_BgOpacity" Header="Image opacity" Minimum="5" Maximum="100"
-                                                Value="30" MinWidth="320" ValueChanged="BgOpacity_Changed"
-                                                ToolTipService.ToolTip="How strongly the image shows through. Lower it if text gets hard to read — the text itself never fades."/>
-                                        <TextBlock x:Name="S_BgOpacityLabel" Grid.Column="1" Text="30%"
-                                                   VerticalAlignment="Bottom" Margin="0,0,0,8" Opacity="0.7"
-                                                   FontSize="13" MinWidth="44"/>
-                                    </Grid>
-                                </StackPanel>
-                            </Expander>
-
-                            <Expander MinWidth="640"
-                                      HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
-                                <Expander.Header>
-                                    <StackPanel Orientation="Horizontal" Spacing="10" Padding="0,14">
-                                        <FontIcon Glyph="&#xE706;" FontSize="16"/>
-                                        <TextBlock Text="Window opacity" FontWeight="SemiBold"/>
-                                        <TextBlock x:Name="S_WindowOpacityLabel" Text="100%" Opacity="0.6"
-                                                   FontSize="13" VerticalAlignment="Center"/>
+                                </Border>
+
+                                <!-- Window opacity -->
+                                <Border Background="{StaticResource MandoPanelBrush}"
+                                        BorderBrush="{StaticResource MandoBorderBrush}" BorderThickness="1"
+                                        CornerRadius="8" Padding="16">
+                                    <StackPanel Spacing="8">
+                                        <StackPanel Orientation="Horizontal" Spacing="10">
+                                            <FontIcon Glyph="&#xE706;" FontSize="16"/>
+                                            <TextBlock Text="Window opacity" FontWeight="SemiBold" VerticalAlignment="Center"/>
+                                            <TextBlock x:Name="S_WindowOpacityLabel" Text="100%" Opacity="0.6"
+                                                       FontSize="13" VerticalAlignment="Center"/>
+                                        </StackPanel>
+                                        <TextBlock Text="Makes the whole window translucent so you can see what's behind it. 100% = solid (default). Purely visual — never affects the model."
+                                                   Opacity="0.6" FontSize="12" TextWrapping="Wrap"/>
+                                        <Slider x:Name="S_WindowOpacity" Minimum="30" Maximum="100" Value="100"
+                                                HorizontalAlignment="Stretch"
+                                                ValueChanged="WindowOpacity_Changed"/>
                                     </StackPanel>
-                                </Expander.Header>
-                                <StackPanel Spacing="4">
-                                    <TextBlock Text="Makes the whole window translucent so you can see what's behind it. 100% = solid (default). Purely visual — never affects the model."
-                                               Opacity="0.6" FontSize="12" TextWrapping="Wrap"/>
-                                    <Slider x:Name="S_WindowOpacity" Minimum="30" Maximum="100" Value="100"
-                                            MinWidth="320" HorizontalAlignment="Left"
-                                            ValueChanged="WindowOpacity_Changed"/>
-                                </StackPanel>
-                            </Expander>
-                        </StackPanel>
-                    </ScrollViewer>
+                                </Border>
+                            </StackPanel>
+                        </ScrollViewer>
+                    </Grid>
                 </Grid>
 
                 <!-- ============ MCP PAGE ============ -->
diff --git a/src/MandoCode.Desktop/Services/ThemeManager.cs b/src/MandoCode.Desktop/Services/ThemeManager.cs
index aaba31b..1590321 100644
--- a/src/MandoCode.Desktop/Services/ThemeManager.cs
+++ b/src/MandoCode.Desktop/Services/ThemeManager.cs
@@ -27,6 +27,16 @@ public sealed record UiTheme
     public required string Red { get; init; }
     public required string DiffAdd { get; init; }
 
+    /// <summary>When true, the transcript suppresses all motion — no fade-in on new
+    /// blocks, no hover transitions, no smooth scroll — for the still, instant repaint
+    /// of an e-reader page. Gated in the WebView via an html[data-flat] attribute.</summary>
+    public bool FlatMotion { get; init; }
+
+    /// <summary>When true, the transcript wears a CRT-tube overlay (scanlines, aperture
+    /// grille, Trinitron damper wires, vignette, phosphor bloom) — all STATIC gradients,
+    /// no animation. Gated in the WebView via an html[data-crt] attribute.</summary>
+    public bool Crt { get; init; }
+
     public static readonly IReadOnlyList<UiTheme> All = new[]
     {
         // First entry is the default for fresh installs (ThemeManager falls back to All[0]).
@@ -112,6 +122,39 @@ public sealed record UiTheme
             Green = "#9ECE6A", Red = "#F7768E", DiffAdd = "#9ECE6A",
         },
         new UiTheme
+        {
+            // Cathode Ray — a Trinitron-style aperture-grille CRT: a deep, near-black picture
+            // tube with vivid, saturated phosphors that glow. Crt=true drapes the transcript in
+            // the tube overlay (scanlines + aperture grille + the two damper wires + vignette +
+            // bloom), all static gradients. The palette is punchy on purpose — CRT phosphors are
+            // high-saturation and the scanlines darken everything, so colors need headroom.
+            // Positioned as the last of the dark themes.
+            Name = "Cathode Ray (CRT)",
+            Description = "Deep-black picture tube with glowing phosphors and cathode-ray scanlines. 📺",
+            Crt = true,
+            Background = "#0B0B0D", Panel = "#131318", Border = "#2A2A33",
+            Text = "#E9EEEC", Dim = "#7C8A86",
+            Accent = "#33CCFF", Gold = "#FFC747", Sky = "#6FD3FF",
+            Green = "#43E37A", Red = "#FF5B54", DiffAdd = "#43E37A",
+        },
+        new UiTheme
+        {
+            // Warm paper + black ink, fully grayscale — reads like a Kindle page. Positioned as
+            // the first of the light themes. Every accent collapses to a shade of warm ink (the
+            // desaturation is what sells "e-ink," more than the cream background does), and
+            // FlatMotion strips the transcript's animation so pages repaint still and instant
+            // like an e-reader. Diffs read as a paper-edit metaphor: changed lines are dark ink
+            // over faded context; the +/- glyphs (not hue) carry add-vs-remove.
+            Name = "E-Ink Paper",
+            Description = "Warm paper, black ink, grayscale, no motion — reads like a Kindle. 📖",
+            IsLight = true,
+            FlatMotion = true,
+            Background = "#E9E5DB", Panel = "#DED9CC", Border = "#C6BFAE",
+            Text = "#211C16", Dim = "#726B5B",
+            Accent = "#3B342A", Gold = "#6A5E48", Sky = "#4C4636",
+            Green = "#5A5240", Red = "#2E251E", DiffAdd = "#3B342A",
+        },
+        new UiTheme
         {
             Name = "Paper Light",
             Description = "A clean light theme with royal purple accents.",
@@ -351,6 +394,12 @@ public static string BuildTranscriptScript(UiTheme t) =>
         $"s.setProperty('--diffadd','{t.DiffAdd}');" +
         $"s.setProperty('--chat-bg-image','{ChatBackgroundCssValue()}');" +
         $"s.setProperty('--chat-bg-opacity','{ChatBackgroundOpacityCss()}');" +
+        (t.FlatMotion
+            ? "document.documentElement.setAttribute('data-flat','1');"
+            : "document.documentElement.removeAttribute('data-flat');") +
+        (t.Crt
+            ? "document.documentElement.setAttribute('data-crt','1');"
+            : "document.documentElement.removeAttribute('data-crt');") +
         "})();";
 
     private static void SetBrush(ResourceDictionary res, string key, string hex) =>
diff --git a/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs b/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs
index 1443c0d..210fbfc 100644
--- a/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs
+++ b/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs
@@ -246,7 +246,7 @@ public string HelpCard(IEnumerable<(string Command, string Description)> rows)
     /// the same CSS variables when the theme changes at runtime.</summary>
     public static string BaseDocument(UiTheme theme) => $$"""
 <!DOCTYPE html>
-<html>
+<html{{(theme.FlatMotion ? " data-flat=\"1\"" : "")}}{{(theme.Crt ? " data-crt=\"1\"" : "")}}>
 <head>
 <meta charset="utf-8">
 <script src="https://mandocode.assets/highlight.min.js"></script>
@@ -284,6 +284,65 @@ @keyframes rise {
     from { opacity: 0; transform: translateY(4px); }
     to { opacity: 1; transform: none; }
   }
+  /* E-ink / flat-motion themes: no fade-in, no hover transitions, no smooth scroll — the
+     transcript repaints instantly and stays still, the way an e-reader page does. The
+     attribute is set at build time and toggled live by ThemeManager.BuildTranscriptScript. */
+  html[data-flat] #log > * { animation: none; }
+  html[data-flat] *, html[data-flat] { transition: none !important; scroll-behavior: auto !important; }
+  /* E-ink background image: treat the (static) chat-background layer like a Kindle image —
+     grayscale + contrast + 1-bit Bayer ordered dithering into black/white halftone dots.
+     Applied ONLY to #bg (never the text) and ONLY under the flat/e-ink theme. The layer is
+     fixed and repaints once, so even this heavy filter costs nothing per frame. */
+  html[data-flat] #bg { filter: url(#eink); }
+  /* Color emoji is the loudest break in the paper illusion, so desaturate every emoji-bearing
+     surface to grayscale ink: the chrome (react ghost, reaction pills, picker) AND the inline
+     emoji in message text (.md) and user echoes. Scoped to the flat/e-ink theme only. Safe and
+     static — assistant turns are appended as COMPLETE blocks (ChatController flushes each turn
+     via AssistantCard; no token-by-token DOM streaming), so each subtree is filtered once on
+     append and never re-rasterized by later appends. Under e-ink every other glyph is already
+     ink-gray, so the only visible effect is draining the color out of emoji. */
+  html[data-flat] .react-ghost,
+  html[data-flat] .rx-pill,
+  html[data-flat] #rx-pop .rx,
+  html[data-flat] .md,
+  html[data-flat] .user-echo { filter: grayscale(1); }
+
+  /* ---- CRT picture-tube overlay (aperture-grille tube) ----------------------------------
+     Scoped to html[data-crt]. Drawn on two fixed, pointer-events:none pseudo-layers OVER the
+     transcript, so the "glass" sits in front of the text. EVERYTHING here is STATIC — no moving
+     scanline, no flicker (that is the continuous-repaint trap we keep avoiding); the tube look
+     is fixed gradients only, one paint. The set's native chrome outside the WebView is untouched,
+     exactly like a real TV where only the picture tube carries scanlines. */
+  html[data-crt] body {
+    /* phosphor bloom on every glyph — a tight bright core + a wider soft halo reads more
+       like real phosphor than one big blur (and keeps text legible). Static, so no per-frame
+       cost even though it rides the streaming-text repaint. */
+    text-shadow: 0 0 2px rgba(120, 210, 255, 0.55), 0 0 9px rgba(120, 210, 255, 0.42),
+                 0 0 18px rgba(120, 210, 255, 0.22);
+  }
+  html[data-crt] body::before {
+    content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
+    background:
+      /* horizontal scanlines (4px period: 2px gap + 2px line) */
+      repeating-linear-gradient(to bottom,
+        rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px,
+        rgba(0,0,0,0.22) 2px, rgba(0,0,0,0.22) 4px),
+      /* aperture grille — faint vertical RGB stripes (the aperture-grille tell, not a dot mask) */
+      repeating-linear-gradient(to right,
+        rgba(255,0,64,0.05) 0, rgba(0,255,128,0.05) 1px,
+        rgba(64,128,255,0.05) 2px, rgba(0,0,0,0) 3px);
+  }
+  html[data-crt] body::after {
+    content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
+    background:
+      /* the two signature aperture-grille damper wires */
+      linear-gradient(to bottom,
+        transparent calc(33.3% - 1px), rgba(0,0,0,0.30) 33.3%, transparent calc(33.3% + 1px)),
+      linear-gradient(to bottom,
+        transparent calc(66.6% - 1px), rgba(0,0,0,0.30) 66.6%, transparent calc(66.6% + 1px)),
+      /* tube-edge vignette */
+      radial-gradient(ellipse 100% 100% at center, transparent 60%, rgba(0,0,0,0.55) 100%);
+  }
   .user-echo { color: var(--gold); font-weight: 600; white-space: pre-wrap; margin-top: 14px; }
   .assistant { margin-top: 4px; position: relative; }
   .assistant-label { color: var(--green); font-weight: 700; margin-bottom: 2px; }
@@ -483,6 +542,32 @@ the run is active and collapses once a non-operation block lands after it. */
 </style>
 </head>
 <body>
+<!-- The e-ink image "shader": a self-contained SVG filter (no WebGL, no deps). Grayscale →
+     contrast → subtract a tiled 8x8 Bayer threshold map → discretize to 1 bit. The result is
+     black/white ordered dithering — the classic Kindle/newsprint halftone. sRGB interpolation
+     keeps the threshold from drifting; alpha is forced opaque (the #bg element's own opacity
+     still fades the picture). Referenced only by html[data-flat] #bg, above. -->
+<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
+  <filter id="eink" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB">
+    <feColorMatrix type="matrix" result="g"
+      values="0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0  0 0 0 1 0"/>
+    <feComponentTransfer in="g" result="gc">
+      <feFuncR type="linear" slope="1.35" intercept="-0.17"/>
+      <feFuncG type="linear" slope="1.35" intercept="-0.17"/>
+      <feFuncB type="linear" slope="1.35" intercept="-0.17"/>
+    </feComponentTransfer>
+    <feImage result="btile" x="0" y="0" width="16" height="16" preserveAspectRatio="none"
+      href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAo0lEQVR42pXLEXMCABgA0C4IgiAIBkEQBINgEAyCIAiCYBAEgyAYDILugiAIgiAIgiAIgmAwGARBMBgEwWAQBIPBYHe7e//ge/4SSYYUWJJmTIk1iXB4o8onHQ7UudAlHspsyTKlwgs3zImHb554p8kvfU48EA8ZJtyyIcWIIivi4UiDKz321PjikXi455U8C+7YkWNGPPwx4EybH575oEU4/AOvd36QFSHM3wAAAABJRU5ErkJggg=="/>
+    <feTile in="btile" result="bayer"/>
+    <feComposite in="gc" in2="bayer" operator="arithmetic" k1="0" k2="1" k3="-1" k4="0.5" result="d"/>
+    <feComponentTransfer in="d">
+      <feFuncR type="discrete" tableValues="0 1"/>
+      <feFuncG type="discrete" tableValues="0 1"/>
+      <feFuncB type="discrete" tableValues="0 1"/>
+      <feFuncA type="discrete" tableValues="1 1"/>
+    </feComponentTransfer>
+  </filter>
+</defs></svg>
 <div id="bg"></div>
 <div id="log"></div>
 <script>
@@ -713,7 +798,8 @@ function addReactionGhosts() {
   pill.textContent = '↓ Latest';
   document.body.appendChild(pill);
   pill.addEventListener('click', function () {
-    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+    window.scrollTo({ top: document.body.scrollHeight,
+      behavior: document.documentElement.hasAttribute('data-flat') ? 'auto' : 'smooth' });
   });
   function updatePill() {
     const nb = (window.innerHeight + window.scrollY) >= (document.body.scrollHeight - 80);