Repository: Textualize/textual
Pull request: Avoid docks when scrolling
Fixes https://github.com/Textualize/textual/issues/2525

When a widget had both scrolling content and docked widgets, two issues could occur.

1. You couldn't scroll to the end
2. scroll_to_region would scroll something to behind a dock

This fixed both.

Problem statement:
Docking and scrolling interaction bug?
Run the sample app below and tab through the checkboxes repeatedly until you get to the bottom. The focused checkbox will be hidden behind the footer.

In fact, viewing the final checkbox at all appears to be impossible. It's obscured by the docked footer and cannot be scrolled into view.

My understanding is that the space docked widgets consume should be reserved, such that the content behind it can be scrolled into view.

```python
from textual.app import App, ComposeResult
from textual.widgets import Checkbox, Footer


class ScrollOffByOne(App):
    def compose(self) -> ComposeResult:
        for number in range(1, 100):
            yield Checkbox(str(number))
        yield Footer()


app = ScrollOffByOne()
if __name__ == '__main__':
    app.run()

```

Hints from issue discussion:
On reflection this is the desired behaviour.

The very nature of `dock` is that it floats over things. Ultimately it is the parent which defines the scrollable area. If the Footer and checkboxes share the same parent then the footer will float over the docked area. 

Look what happens if I style the footer to have a larger height and a margin:

```python
from textual.app import App, ComposeResult
from textual.widgets import Checkbox, Footer


class ScrollOffByOne(App):
    CSS = """
    Footer {
        margin: 2 4;
        height: 4;
    }

    """

    def compose(self) -> ComposeResult:
        for number in range(1, 100):
            yield Checkbox(str(number))
        yield Footer()


app = ScrollOffByOne()
if __name__ == "__main__":
    app.run()

```

If floats above the checkboxes and you can see the last checkbox.

<img width="1282" alt="Screenshot 2023-05-09 at 17 27 16" src="https://github.com/Textualize/textual/assets/554369/af58df52-b019-4f24-8151-921e5a7522ac">

It does look like a bug, and is a bit of a gotcha, but the solution is to put the Checkboxes in their own scrollable container.

@darrenburns What do you think?
The explanation makes sense, but in our layout docs (in the guide) do we not have an example (the one with the blue sidebar) showing that docking "pushes" sibling content away?
It still does that. Here's the footer docked at the top:

<img width="1282" alt="Screenshot 2023-05-09 at 18 32 14" src="https://github.com/Textualize/textual/assets/554369/babf2b96-1538-4938-a1a0-6353e0a51e18">

But with a vertical layout, things will always be added to the bottom, which may force them under a docked widget.
On reflection. It doesn't have to work this way.

Commit message: ofx docstring

Patch to review:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5991f818d6..a0d644982b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,10 +21,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Fixed `TreeNode.toggle` and `TreeNode.toggle_all` not posting a `Tree.NodeExpanded` or `Tree.NodeCollapsed` message https://github.com/Textualize/textual/issues/2535
 - `footer--description` component class was being ignored https://github.com/Textualize/textual/issues/2544
 - Pasting empty selection in `Input` would raise an exception https://github.com/Textualize/textual/issues/2563
+- Fix issue with scrolling and docks https://github.com/Textualize/textual/issues/2525
 
 ### Added
 
 - Class variable `AUTO_FOCUS` to screens https://github.com/Textualize/textual/issues/2457
+- Added NULL_SPACING and NULL_REGION to geometry.py
 
 ## [0.24.1] - 2023-05-08
 
diff --git a/src/textual/_compositor.py b/src/textual/_compositor.py
index 61e4f3de87..300b52029f 100644
--- a/src/textual/_compositor.py
+++ b/src/textual/_compositor.py
@@ -33,7 +33,7 @@
 from ._cells import cell_len
 from ._context import visible_screen_stack
 from ._loop import loop_last
-from .geometry import NULL_OFFSET, Offset, Region, Size
+from .geometry import NULL_OFFSET, NULL_SPACING, Offset, Region, Size, Spacing
 from .strip import Strip, StripRenderable
 
 if TYPE_CHECKING:
@@ -71,6 +71,8 @@ class MapGeometry(NamedTuple):
     """The container [size][textual.geometry.Size] (area not occupied by scrollbars)."""
     virtual_region: Region
     """The [region][textual.geometry.Region] relative to the container (but not necessarily visible)."""
+    dock_gutter: Spacing
+    """Space from the container reserved by docked widgets."""
 
     @property
     def visible_region(self) -> Region:
@@ -484,7 +486,7 @@ def visible_widgets(self) -> dict[Widget, tuple[Region, Region]]:
             # Widgets and regions in render order
             visible_widgets = [
                 (order, widget, region, clip)
-                for widget, (region, order, clip, _, _, _) in map.items()
+                for widget, (region, order, clip, _, _, _, _) in map.items()
                 if in_screen(region) and overlaps(clip, region)
             ]
             visible_widgets.sort(key=itemgetter(0), reverse=True)
@@ -522,6 +524,7 @@ def add_widget(
             layer_order: int,
             clip: Region,
             visible: bool,
+            dock_gutter: Spacing,
             _MapGeometry: type[MapGeometry] = MapGeometry,
         ) -> None:
             """Called recursively to place a widget and its children in the map.
@@ -591,10 +594,8 @@ def add_widget(
 
                     get_layer_index = layers_to_index.get
 
-                    scroll_spacing = arrange_result.scroll_spacing
-
                     # Add all the widgets
-                    for sub_region, margin, sub_widget, z, fixed, overlay in reversed(
+                    for sub_region, _, sub_widget, z, fixed, overlay in reversed(
                         placements
                     ):
                         layer_index = get_layer_index(sub_widget.layer, 0)
@@ -602,11 +603,6 @@ def add_widget(
                         if fixed:
                             widget_region = sub_region + placement_offset
                         else:
-                            total_region = total_region.union(
-                                sub_region.grow(
-                                    margin if layer_index else margin + scroll_spacing
-                                )
-                            )
                             widget_region = sub_region + placement_scroll_offset
 
                         widget_order = order + ((layer_index, z, layer_order),)
@@ -629,6 +625,7 @@ def add_widget(
                             layer_order,
                             no_clip if overlay else sub_clip,
                             visible,
+                            arrange_result.scroll_spacing,
                         )
 
                         layer_order -= 1
@@ -646,6 +643,7 @@ def add_widget(
                                 container_size,
                                 container_size,
                                 chrome_region,
+                                dock_gutter,
                             )
 
                     map[widget] = _MapGeometry(
@@ -655,6 +653,7 @@ def add_widget(
                         total_region.size,
                         container_size,
                         virtual_region,
+                        dock_gutter,
                     )
 
             elif visible:
@@ -666,6 +665,7 @@ def add_widget(
                     region.size,
                     container_size,
                     virtual_region,
+                    dock_gutter,
                 )
 
         # Add top level (root) widget
@@ -677,6 +677,7 @@ def add_widget(
             layer_order,
             size.region,
             True,
+            NULL_SPACING,
         )
         return map, widgets
 
diff --git a/src/textual/_layout.py b/src/textual/_layout.py
index 338b721927..575dc547fb 100644
--- a/src/textual/_layout.py
+++ b/src/textual/_layout.py
@@ -51,7 +51,8 @@ def total_region(self) -> Region:
         Returns:
             A Region.
         """
-        return self.spatial_map.total_region
+        _top, right, bottom, _left = self.scroll_spacing
+        return self.spatial_map.total_region.grow((0, right, bottom, 0))
 
     def get_visible_placements(self, region: Region) -> list[WidgetPlacement]:
         """Get the placements visible within the given region.
diff --git a/src/textual/_spatial_map.py b/src/textual/_spatial_map.py
index af38065dd8..3f778a06bb 100644
--- a/src/textual/_spatial_map.py
+++ b/src/textual/_spatial_map.py
@@ -72,11 +72,11 @@ def insert(
         _region_to_grid = self._region_to_grid_coordinates
         total_region = self.total_region
         for region, fixed, overlay, value in regions_and_values:
-            if not overlay:
-                total_region = total_region.union(region)
             if fixed:
                 append_fixed(value)
             else:
+                if not overlay:
+                    total_region = total_region.union(region)
                 for grid in _region_to_grid(region):
                     get_grid_list(grid).append(value)
         self.total_region = total_region
diff --git a/src/textual/geometry.py b/src/textual/geometry.py
index 4b337a4d97..affbd0aba2 100644
--- a/src/textual/geometry.py
+++ b/src/textual/geometry.py
@@ -907,7 +907,7 @@ def translate_inside(
 
 
 class Spacing(NamedTuple):
-    """The spacing around a renderable, such as padding and border
+    """The spacing around a renderable, such as padding and border.
 
     Spacing is defined by four integers for the space at the top, right, bottom, and left of a region.
 
@@ -940,7 +940,7 @@ class Spacing(NamedTuple):
     top: int = 0
     """Space from the top of a region."""
     right: int = 0
-    """Space from the left of a region."""
+    """Space from the right of a region."""
     bottom: int = 0
     """Space from the bottom of a region."""
     left: int = 0
@@ -1095,3 +1095,9 @@ def grow_maximum(self, other: Spacing) -> Spacing:
 
 NULL_OFFSET: Final = Offset(0, 0)
 """An [offset][textual.geometry.Offset] constant for (0, 0)."""
+
+NULL_REGION: Final = Region(0, 0, 0, 0)
+"""A [Region][textual.geometryRegion] constant for a null region (at the origin, with both width and height set to zero)."""
+
+NULL_SPACING: Final = Spacing(0, 0, 0, 0)
+"""A [Spacing][textual.geometry.Spacing] constant for no space."""
diff --git a/src/textual/screen.py b/src/textual/screen.py
index af0b006be1..9818062bbd 100644
--- a/src/textual/screen.py
+++ b/src/textual/screen.py
@@ -584,6 +584,7 @@ def _refresh_layout(
                         virtual_size,
                         container_size,
                         _,
+                        _,
                     ) in layers:
                         if widget in exposed_widgets:
                             if widget._size_updated(
@@ -614,6 +615,7 @@ def _refresh_layout(
                     virtual_size,
                     container_size,
                     _,
+                    _,
                 ) in layers:
                     widget._size_updated(region.size, virtual_size, container_size)
                     if widget in send_resize:
diff --git a/src/textual/widget.py b/src/textual/widget.py
index b116f5393b..6d14cad74b 100644
--- a/src/textual/widget.py
+++ b/src/textual/widget.py
@@ -57,7 +57,7 @@
 from .css.query import NoMatches, WrongType
 from .css.scalar import ScalarOffset
 from .dom import DOMNode, NoScreen
-from .geometry import Offset, Region, Size, Spacing, clamp
+from .geometry import NULL_REGION, NULL_SPACING, Offset, Region, Size, Spacing, clamp
 from .layouts.vertical import VerticalLayout
 from .message import Message
 from .messages import CallbackType
@@ -1375,10 +1375,20 @@ def region(self) -> Region:
         """
         try:
             return self.screen.find_widget(self).region
-        except NoScreen:
-            return Region()
-        except errors.NoWidget:
-            return Region()
+        except (NoScreen, errors.NoWidget):
+            return NULL_REGION
+
+    @property
+    def dock_gutter(self) -> Spacing:
+        """Space allocated to docks in the parent.
+
+        Returns:
+            Space to be subtracted from scrollable area.
+        """
+        try:
+            return self.screen.find_widget(self).dock_gutter
+        except (NoScreen, errors.NoWidget):
+            return NULL_SPACING
 
     @property
     def container_viewport(self) -> Region:
@@ -2263,7 +2273,7 @@ def scroll_to_widget(
             else:
                 scroll_offset = container.scroll_to_region(
                     region,
-                    spacing=widget.parent.gutter,
+                    spacing=widget.parent.gutter + widget.dock_gutter,
                     animate=animate,
                     speed=speed,
                     duration=duration,
diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
index 8b03449d9e..fd3bdacb08 100644
--- a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
+++ b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
@@ -14242,6 +14242,333 @@
   
   '''
 # ---
+# name: test_dock_scroll2
+  '''
+  <svg class="rich-terminal" viewBox="0 0 994 660.0" xmlns="http://www.w3.org/2000/svg">
+      <!-- Generated with Rich https://www.textualize.io -->
+      <style>
+  
+      @font-face {
+          font-family: "Fira Code";
+          src: local("FiraCode-Regular"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+          font-style: normal;
+          font-weight: 400;
+      }
+      @font-face {
+          font-family: "Fira Code";
+          src: local("FiraCode-Bold"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+          font-style: bold;
+          font-weight: 700;
+      }
+  
+      .terminal-3622557512-matrix {
+          font-family: Fira Code, monospace;
+          font-size: 20px;
+          line-height: 24.4px;
+          font-variant-east-asian: full-width;
+      }
+  
+      .terminal-3622557512-title {
+          font-size: 18px;
+          font-weight: bold;
+          font-family: arial;
+      }
+  
+      .terminal-3622557512-r1 { fill: #c5c8c6 }
+  .terminal-3622557512-r2 { fill: #1e1e1e }
+  .terminal-3622557512-r3 { fill: #1f1f1f }
+  .terminal-3622557512-r4 { fill: #ff0000 }
+  .terminal-3622557512-r5 { fill: #c7cdd2 }
+  .terminal-3622557512-r6 { fill: #dde8f3;font-weight: bold }
+  .terminal-3622557512-r7 { fill: #ddedf9 }
+      </style>
+  
+      <defs>
+      <clipPath id="terminal-3622557512-clip-terminal">
+        <rect x="0" y="0" width="975.0" height="609.0" />
+      </clipPath>
+      <clipPath id="terminal-3622557512-line-0">
+      <rect x="0" y="1.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-1">
+      <rect x="0" y="25.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-2">
+      <rect x="0" y="50.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-3">
+      <rect x="0" y="74.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-4">
+      <rect x="0" y="99.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-5">
+      <rect x="0" y="123.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-6">
+      <rect x="0" y="147.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-7">
+      <rect x="0" y="172.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-8">
+      <rect x="0" y="196.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-9">
+      <rect x="0" y="221.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-10">
+      <rect x="0" y="245.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-11">
+      <rect x="0" y="269.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-12">
+      <rect x="0" y="294.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-13">
+      <rect x="0" y="318.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-14">
+      <rect x="0" y="343.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-15">
+      <rect x="0" y="367.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-16">
+      <rect x="0" y="391.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-17">
+      <rect x="0" y="416.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-18">
+      <rect x="0" y="440.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-19">
+      <rect x="0" y="465.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-20">
+      <rect x="0" y="489.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-21">
+      <rect x="0" y="513.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-22">
+      <rect x="0" y="538.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3622557512-line-23">
+      <rect x="0" y="562.7" width="976" height="24.65"/>
+              </clipPath>
+      </defs>
+  
+      <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="658" rx="8"/><text class="terminal-3622557512-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">TestApp</text>
+              <g transform="translate(26,22)">
+              <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+              <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+              <circle cx="44" cy="0" r="7" fill="#28c840"/>
+              </g>
+          
+      <g transform="translate(9, 41)" clip-path="url(#terminal-3622557512-clip-terminal)">
+      <rect fill="#e9e9e9" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="12.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="24.4" y="1.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="85.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="97.6" y="1.5" width="317.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="414.8" y="1.5" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="500.2" y="1.5" width="329.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="829.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="841.8" y="1.5" width="0" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="841.8" y="1.5" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#e9e9e9" x="939.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="25.9" width="109.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="25.9" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="50.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="61" y="50.3" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="50.3" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="36.6" y="74.7" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="74.7" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="24.4" y="99.1" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="99.1" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="123.5" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="85.4" y="123.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="123.5" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="147.9" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="109.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="147.9" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="147.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="172.3" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="48.8" y="172.3" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="172.3" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="172.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="196.7" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="61" y="196.7" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="196.7" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="196.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="221.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="48.8" y="221.1" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="221.1" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="221.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="245.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="61" y="245.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="245.5" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="269.9" width="109.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="269.9" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="36.6" y="294.3" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="294.3" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="24.4" y="318.7" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="318.7" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="343.1" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="85.4" y="343.1" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="343.1" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="367.5" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="109.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="367.5" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="391.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="48.8" y="391.9" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="391.9" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="416.3" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="61" y="416.3" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="416.3" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="440.7" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="48.8" y="440.7" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="440.7" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="465.1" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="61" y="465.1" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="465.1" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="0" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="12.2" y="489.5" width="61" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="73.2" y="489.5" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="122" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#f5f5f5" x="134.2" y="489.5" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0053aa" x="0" y="513.9" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="97.6" y="513.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="134.2" y="513.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="170.8" y="513.9" width="780.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="538.3" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="134.2" y="538.3" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="562.7" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="134.2" y="562.7" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="587.1" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="134.2" y="587.1" width="817.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#c7cdd2" x="951.6" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/>
+      <g class="terminal-3622557512-matrix">
+      <text class="terminal-3622557512-r2" x="12.2" y="20" textLength="12.2" clip-path="url(#terminal-3622557512-line-0)">⭘</text><text class="terminal-3622557512-r2" x="414.8" y="20" textLength="85.4" clip-path="url(#terminal-3622557512-line-0)">TestApp</text><text class="terminal-3622557512-r1" x="976" y="20" textLength="12.2" clip-path="url(#terminal-3622557512-line-0)">
+  </text><text class="terminal-3622557512-r4" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-3622557512-line-1)">┌</text><text class="terminal-3622557512-r4" x="12.2" y="44.4" textLength="109.8" clip-path="url(#terminal-3622557512-line-1)">─────────</text><text class="terminal-3622557512-r4" x="122" y="44.4" textLength="12.2" clip-path="url(#terminal-3622557512-line-1)">┐</text><text class="terminal-3622557512-r1" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-3622557512-line-1)">
+  </text><text class="terminal-3622557512-r4" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-3622557512-line-2)">│</text><text class="terminal-3622557512-r3" x="12.2" y="68.8" textLength="48.8" clip-path="url(#terminal-3622557512-line-2)">this</text><text class="terminal-3622557512-r4" x="122" y="68.8" textLength="12.2" clip-path="url(#terminal-3622557512-line-2)">│</text><text class="terminal-3622557512-r1" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-3622557512-line-2)">
+  </text><text class="terminal-3622557512-r4" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-3622557512-line-3)">│</text><text class="terminal-3622557512-r3" x="12.2" y="93.2" textLength="24.4" clip-path="url(#terminal-3622557512-line-3)">is</text><text class="terminal-3622557512-r4" x="122" y="93.2" textLength="12.2" clip-path="url(#terminal-3622557512-line-3)">│</text><text class="terminal-3622557512-r1" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-3622557512-line-3)">
+  </text><text class="terminal-3622557512-r4" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-3622557512-line-4)">│</text><text class="terminal-3622557512-r3" x="12.2" y="117.6" textLength="12.2" clip-path="url(#terminal-3622557512-line-4)">a</text><text class="terminal-3622557512-r4" x="122" y="117.6" textLength="12.2" clip-path="url(#terminal-3622557512-line-4)">│</text><text class="terminal-3622557512-r1" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-3622557512-line-4)">
+  </text><text class="terminal-3622557512-r4" x="0" y="142" textLength="12.2" clip-path="url(#terminal-3622557512-line-5)">│</text><text class="terminal-3622557512-r3" x="12.2" y="142" textLength="73.2" clip-path="url(#terminal-3622557512-line-5)">sample</text><text class="terminal-3622557512-r4" x="122" y="142" textLength="12.2" clip-path="url(#terminal-3622557512-line-5)">│</text><text class="terminal-3622557512-r1" x="976" y="142" textLength="12.2" clip-path="url(#terminal-3622557512-line-5)">
+  </text><text class="terminal-3622557512-r4" x="0" y="166.4" textLength="12.2" clip-path="url(#terminal-3622557512-line-6)">│</text><text class="terminal-3622557512-r3" x="12.2" y="166.4" textLength="97.6" clip-path="url(#terminal-3622557512-line-6)">sentence</text><text class="terminal-3622557512-r4" x="122" y="166.4" textLength="12.2" clip-path="url(#terminal-3622557512-line-6)">│</text><text class="terminal-3622557512-r1" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-3622557512-line-6)">
+  </text><text class="terminal-3622557512-r4" x="0" y="190.8" textLength="12.2" clip-path="url(#terminal-3622557512-line-7)">│</text><text class="terminal-3622557512-r3" x="12.2" y="190.8" textLength="36.6" clip-path="url(#terminal-3622557512-line-7)">and</text><text class="terminal-3622557512-r4" x="122" y="190.8" textLength="12.2" clip-path="url(#terminal-3622557512-line-7)">│</text><text class="terminal-3622557512-r1" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-3622557512-line-7)">
+  </text><text class="terminal-3622557512-r4" x="0" y="215.2" textLength="12.2" clip-path="url(#terminal-3622557512-line-8)">│</text><text class="terminal-3622557512-r3" x="12.2" y="215.2" textLength="48.8" clip-path="url(#terminal-3622557512-line-8)">here</text><text class="terminal-3622557512-r4" x="122" y="215.2" textLength="12.2" clip-path="url(#terminal-3622557512-line-8)">│</text><text class="terminal-3622557512-r1" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-3622557512-line-8)">
+  </text><text class="terminal-3622557512-r4" x="0" y="239.6" textLength="12.2" clip-path="url(#terminal-3622557512-line-9)">│</text><text class="terminal-3622557512-r3" x="12.2" y="239.6" textLength="36.6" clip-path="url(#terminal-3622557512-line-9)">are</text><text class="terminal-3622557512-r4" x="122" y="239.6" textLength="12.2" clip-path="url(#terminal-3622557512-line-9)">│</text><text class="terminal-3622557512-r1" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-3622557512-line-9)">
+  </text><text class="terminal-3622557512-r4" x="0" y="264" textLength="12.2" clip-path="url(#terminal-3622557512-line-10)">│</text><text class="terminal-3622557512-r3" x="12.2" y="264" textLength="48.8" clip-path="url(#terminal-3622557512-line-10)">some</text><text class="terminal-3622557512-r4" x="122" y="264" textLength="12.2" clip-path="url(#terminal-3622557512-line-10)">│</text><text class="terminal-3622557512-r1" x="976" y="264" textLength="12.2" clip-path="url(#terminal-3622557512-line-10)">
+  </text><text class="terminal-3622557512-r4" x="0" y="288.4" textLength="12.2" clip-path="url(#terminal-3622557512-line-11)">│</text><text class="terminal-3622557512-r3" x="12.2" y="288.4" textLength="109.8" clip-path="url(#terminal-3622557512-line-11)">wordsthis</text><text class="terminal-3622557512-r4" x="122" y="288.4" textLength="12.2" clip-path="url(#terminal-3622557512-line-11)">│</text><text class="terminal-3622557512-r1" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-3622557512-line-11)">
+  </text><text class="terminal-3622557512-r4" x="0" y="312.8" textLength="12.2" clip-path="url(#terminal-3622557512-line-12)">│</text><text class="terminal-3622557512-r3" x="12.2" y="312.8" textLength="24.4" clip-path="url(#terminal-3622557512-line-12)">is</text><text class="terminal-3622557512-r4" x="122" y="312.8" textLength="12.2" clip-path="url(#terminal-3622557512-line-12)">│</text><text class="terminal-3622557512-r1" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-3622557512-line-12)">
+  </text><text class="terminal-3622557512-r4" x="0" y="337.2" textLength="12.2" clip-path="url(#terminal-3622557512-line-13)">│</text><text class="terminal-3622557512-r3" x="12.2" y="337.2" textLength="12.2" clip-path="url(#terminal-3622557512-line-13)">a</text><text class="terminal-3622557512-r4" x="122" y="337.2" textLength="12.2" clip-path="url(#terminal-3622557512-line-13)">│</text><text class="terminal-3622557512-r5" x="951.6" y="337.2" textLength="24.4" clip-path="url(#terminal-3622557512-line-13)">▅▅</text><text class="terminal-3622557512-r1" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-3622557512-line-13)">
+  </text><text class="terminal-3622557512-r4" x="0" y="361.6" textLength="12.2" clip-path="url(#terminal-3622557512-line-14)">│</text><text class="terminal-3622557512-r3" x="12.2" y="361.6" textLength="73.2" clip-path="url(#terminal-3622557512-line-14)">sample</text><text class="terminal-3622557512-r4" x="122" y="361.6" textLength="12.2" clip-path="url(#terminal-3622557512-line-14)">│</text><text class="terminal-3622557512-r1" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-3622557512-line-14)">
+  </text><text class="terminal-3622557512-r4" x="0" y="386" textLength="12.2" clip-path="url(#terminal-3622557512-line-15)">│</text><text class="terminal-3622557512-r3" x="12.2" y="386" textLength="97.6" clip-path="url(#terminal-3622557512-line-15)">sentence</text><text class="terminal-3622557512-r4" x="122" y="386" textLength="12.2" clip-path="url(#terminal-3622557512-line-15)">│</text><text class="terminal-3622557512-r1" x="976" y="386" textLength="12.2" clip-path="url(#terminal-3622557512-line-15)">
+  </text><text class="terminal-3622557512-r4" x="0" y="410.4" textLength="12.2" clip-path="url(#terminal-3622557512-line-16)">│</text><text class="terminal-3622557512-r3" x="12.2" y="410.4" textLength="36.6" clip-path="url(#terminal-3622557512-line-16)">and</text><text class="terminal-3622557512-r4" x="122" y="410.4" textLength="12.2" clip-path="url(#terminal-3622557512-line-16)">│</text><text class="terminal-3622557512-r1" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-3622557512-line-16)">
+  </text><text class="terminal-3622557512-r4" x="0" y="434.8" textLength="12.2" clip-path="url(#terminal-3622557512-line-17)">│</text><text class="terminal-3622557512-r3" x="12.2" y="434.8" textLength="48.8" clip-path="url(#terminal-3622557512-line-17)">here</text><text class="terminal-3622557512-r4" x="122" y="434.8" textLength="12.2" clip-path="url(#terminal-3622557512-line-17)">│</text><text class="terminal-3622557512-r1" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-3622557512-line-17)">
+  </text><text class="terminal-3622557512-r4" x="0" y="459.2" textLength="12.2" clip-path="url(#terminal-3622557512-line-18)">│</text><text class="terminal-3622557512-r3" x="12.2" y="459.2" textLength="36.6" clip-path="url(#terminal-3622557512-line-18)">are</text><text class="terminal-3622557512-r4" x="122" y="459.2" textLength="12.2" clip-path="url(#terminal-3622557512-line-18)">│</text><text class="terminal-3622557512-r1" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-3622557512-line-18)">
+  </text><text class="terminal-3622557512-r4" x="0" y="483.6" textLength="12.2" clip-path="url(#terminal-3622557512-line-19)">│</text><text class="terminal-3622557512-r3" x="12.2" y="483.6" textLength="48.8" clip-path="url(#terminal-3622557512-line-19)">some</text><text class="terminal-3622557512-r4" x="122" y="483.6" textLength="12.2" clip-path="url(#terminal-3622557512-line-19)">│</text><text class="terminal-3622557512-r1" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-3622557512-line-19)">
+  </text><text class="terminal-3622557512-r4" x="0" y="508" textLength="12.2" clip-path="url(#terminal-3622557512-line-20)">│</text><text class="terminal-3622557512-r3" x="12.2" y="508" textLength="61" clip-path="url(#terminal-3622557512-line-20)">words</text><text class="terminal-3622557512-r4" x="122" y="508" textLength="12.2" clip-path="url(#terminal-3622557512-line-20)">│</text><text class="terminal-3622557512-r1" x="976" y="508" textLength="12.2" clip-path="url(#terminal-3622557512-line-20)">
+  </text><text class="terminal-3622557512-r6" x="0" y="532.4" textLength="97.6" clip-path="url(#terminal-3622557512-line-21)">&#160;CTRL+Q&#160;</text><text class="terminal-3622557512-r7" x="97.6" y="532.4" textLength="36.6" clip-path="url(#terminal-3622557512-line-21)">&#160;Qu</text><text class="terminal-3622557512-r7" x="134.2" y="532.4" textLength="36.6" clip-path="url(#terminal-3622557512-line-21)">it&#160;</text><text class="terminal-3622557512-r1" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-3622557512-line-21)">
+  </text><text class="terminal-3622557512-r1" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-3622557512-line-22)">
+  </text><text class="terminal-3622557512-r1" x="976" y="581.2" textLength="12.2" clip-path="url(#terminal-3622557512-line-23)">
+  </text>
+      </g>
+      </g>
+  </svg>
+  
+  '''
+# ---
+# name: test_dock_scroll_off_by_one
+  '''
+  <svg class="rich-terminal" viewBox="0 0 994 660.0" xmlns="http://www.w3.org/2000/svg">
+      <!-- Generated with Rich https://www.textualize.io -->
+      <style>
+  
+      @font-face {
+          font-family: "Fira Code";
+          src: local("FiraCode-Regular"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+          font-style: normal;
+          font-weight: 400;
+      }
+      @font-face {
+          font-family: "Fira Code";
+          src: local("FiraCode-Bold"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+          font-style: bold;
+          font-weight: 700;
+      }
+  
+      .terminal-3194367487-matrix {
+          font-family: Fira Code, monospace;
+          font-size: 20px;
+          line-height: 24.4px;
+          font-variant-east-asian: full-width;
+      }
+  
+      .terminal-3194367487-title {
+          font-size: 18px;
+          font-weight: bold;
+          font-family: arial;
+      }
+  
+      .terminal-3194367487-r1 { fill: #3d3d3d }
+  .terminal-3194367487-r2 { fill: #1e1e1e;font-weight: bold }
+  .terminal-3194367487-r3 { fill: #e1e1e1 }
+  .terminal-3194367487-r4 { fill: #c5c8c6 }
+  .terminal-3194367487-r5 { fill: #23568b }
+  .terminal-3194367487-r6 { fill: #ddedf9 }
+      </style>
+  
+      <defs>
+      <clipPath id="terminal-3194367487-clip-terminal">
+        <rect x="0" y="0" width="975.0" height="609.0" />
+      </clipPath>
+      <clipPath id="terminal-3194367487-line-0">
+      <rect x="0" y="1.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-1">
+      <rect x="0" y="25.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-2">
+      <rect x="0" y="50.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-3">
+      <rect x="0" y="74.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-4">
+      <rect x="0" y="99.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-5">
+      <rect x="0" y="123.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-6">
+      <rect x="0" y="147.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-7">
+      <rect x="0" y="172.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-8">
+      <rect x="0" y="196.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-9">
+      <rect x="0" y="221.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-10">
+      <rect x="0" y="245.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-11">
+      <rect x="0" y="269.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-12">
+      <rect x="0" y="294.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-13">
+      <rect x="0" y="318.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-14">
+      <rect x="0" y="343.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-15">
+      <rect x="0" y="367.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-16">
+      <rect x="0" y="391.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-17">
+      <rect x="0" y="416.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-18">
+      <rect x="0" y="440.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-19">
+      <rect x="0" y="465.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-20">
+      <rect x="0" y="489.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-21">
+      <rect x="0" y="513.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-22">
+      <rect x="0" y="538.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-3194367487-line-23">
+      <rect x="0" y="562.7" width="976" height="24.65"/>
+              </clipPath>
+      </defs>
+  
+      <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="658" rx="8"/><text class="terminal-3194367487-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">ScrollOffByOne</text>
+              <g transform="translate(26,22)">
+              <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+              <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+              <circle cx="44" cy="0" r="7" fill="#28c840"/>
+              </g>
+          
+      <g transform="translate(9, 41)" clip-path="url(#terminal-3194367487-clip-terminal)">
+      <rect fill="#1e1e1e" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="1.5" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="25.9" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="50.3" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="74.7" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="99.1" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="123.5" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="147.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="147.9" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="147.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="172.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="172.3" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="172.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="196.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="196.7" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="196.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="221.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="221.1" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="221.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="245.5" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="269.9" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="294.3" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="318.7" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="343.1" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="367.5" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="391.9" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="416.3" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="440.7" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="465.1" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="489.5" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="513.9" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="538.3" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="562.7" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="587.1" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/>
+      <g class="terminal-3194367487-matrix">
+      <text class="terminal-3194367487-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-3194367487-line-0)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="20" textLength="12.2" clip-path="url(#terminal-3194367487-line-0)">X</text><text class="terminal-3194367487-r1" x="24.4" y="20" textLength="12.2" clip-path="url(#terminal-3194367487-line-0)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="20" textLength="24.4" clip-path="url(#terminal-3194367487-line-0)">76</text><text class="terminal-3194367487-r4" x="976" y="20" textLength="12.2" clip-path="url(#terminal-3194367487-line-0)">
+  </text><text class="terminal-3194367487-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-1)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="44.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-1)">X</text><text class="terminal-3194367487-r1" x="24.4" y="44.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-1)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="44.4" textLength="24.4" clip-path="url(#terminal-3194367487-line-1)">77</text><text class="terminal-3194367487-r4" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-1)">
+  </text><text class="terminal-3194367487-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-2)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="68.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-2)">X</text><text class="terminal-3194367487-r1" x="24.4" y="68.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-2)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="68.8" textLength="24.4" clip-path="url(#terminal-3194367487-line-2)">78</text><text class="terminal-3194367487-r4" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-2)">
+  </text><text class="terminal-3194367487-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-3)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="93.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-3)">X</text><text class="terminal-3194367487-r1" x="24.4" y="93.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-3)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="93.2" textLength="24.4" clip-path="url(#terminal-3194367487-line-3)">79</text><text class="terminal-3194367487-r4" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-3)">
+  </text><text class="terminal-3194367487-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-4)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="117.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-4)">X</text><text class="terminal-3194367487-r1" x="24.4" y="117.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-4)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="117.6" textLength="24.4" clip-path="url(#terminal-3194367487-line-4)">80</text><text class="terminal-3194367487-r4" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-4)">
+  </text><text class="terminal-3194367487-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-3194367487-line-5)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="142" textLength="12.2" clip-path="url(#terminal-3194367487-line-5)">X</text><text class="terminal-3194367487-r1" x="24.4" y="142" textLength="12.2" clip-path="url(#terminal-3194367487-line-5)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="142" textLength="24.4" clip-path="url(#terminal-3194367487-line-5)">81</text><text class="terminal-3194367487-r4" x="976" y="142" textLength="12.2" clip-path="url(#terminal-3194367487-line-5)">
+  </text><text class="terminal-3194367487-r1" x="0" y="166.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-6)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="166.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-6)">X</text><text class="terminal-3194367487-r1" x="24.4" y="166.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-6)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="166.4" textLength="24.4" clip-path="url(#terminal-3194367487-line-6)">82</text><text class="terminal-3194367487-r4" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-6)">
+  </text><text class="terminal-3194367487-r1" x="0" y="190.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-7)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="190.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-7)">X</text><text class="terminal-3194367487-r1" x="24.4" y="190.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-7)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="190.8" textLength="24.4" clip-path="url(#terminal-3194367487-line-7)">83</text><text class="terminal-3194367487-r4" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-7)">
+  </text><text class="terminal-3194367487-r1" x="0" y="215.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-8)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="215.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-8)">X</text><text class="terminal-3194367487-r1" x="24.4" y="215.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-8)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="215.2" textLength="24.4" clip-path="url(#terminal-3194367487-line-8)">84</text><text class="terminal-3194367487-r4" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-8)">
+  </text><text class="terminal-3194367487-r1" x="0" y="239.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-9)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="239.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-9)">X</text><text class="terminal-3194367487-r1" x="24.4" y="239.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-9)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="239.6" textLength="24.4" clip-path="url(#terminal-3194367487-line-9)">85</text><text class="terminal-3194367487-r4" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-9)">
+  </text><text class="terminal-3194367487-r1" x="0" y="264" textLength="12.2" clip-path="url(#terminal-3194367487-line-10)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="264" textLength="12.2" clip-path="url(#terminal-3194367487-line-10)">X</text><text class="terminal-3194367487-r1" x="24.4" y="264" textLength="12.2" clip-path="url(#terminal-3194367487-line-10)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="264" textLength="24.4" clip-path="url(#terminal-3194367487-line-10)">86</text><text class="terminal-3194367487-r4" x="976" y="264" textLength="12.2" clip-path="url(#terminal-3194367487-line-10)">
+  </text><text class="terminal-3194367487-r1" x="0" y="288.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-11)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="288.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-11)">X</text><text class="terminal-3194367487-r1" x="24.4" y="288.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-11)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="288.4" textLength="24.4" clip-path="url(#terminal-3194367487-line-11)">87</text><text class="terminal-3194367487-r4" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-11)">
+  </text><text class="terminal-3194367487-r1" x="0" y="312.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-12)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="312.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-12)">X</text><text class="terminal-3194367487-r1" x="24.4" y="312.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-12)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="312.8" textLength="24.4" clip-path="url(#terminal-3194367487-line-12)">88</text><text class="terminal-3194367487-r4" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-12)">
+  </text><text class="terminal-3194367487-r1" x="0" y="337.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-13)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="337.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-13)">X</text><text class="terminal-3194367487-r1" x="24.4" y="337.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-13)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="337.2" textLength="24.4" clip-path="url(#terminal-3194367487-line-13)">89</text><text class="terminal-3194367487-r4" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-13)">
+  </text><text class="terminal-3194367487-r1" x="0" y="361.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-14)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="361.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-14)">X</text><text class="terminal-3194367487-r1" x="24.4" y="361.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-14)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="361.6" textLength="24.4" clip-path="url(#terminal-3194367487-line-14)">90</text><text class="terminal-3194367487-r4" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-14)">
+  </text><text class="terminal-3194367487-r1" x="0" y="386" textLength="12.2" clip-path="url(#terminal-3194367487-line-15)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="386" textLength="12.2" clip-path="url(#terminal-3194367487-line-15)">X</text><text class="terminal-3194367487-r1" x="24.4" y="386" textLength="12.2" clip-path="url(#terminal-3194367487-line-15)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="386" textLength="24.4" clip-path="url(#terminal-3194367487-line-15)">91</text><text class="terminal-3194367487-r4" x="976" y="386" textLength="12.2" clip-path="url(#terminal-3194367487-line-15)">
+  </text><text class="terminal-3194367487-r1" x="0" y="410.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-16)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="410.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-16)">X</text><text class="terminal-3194367487-r1" x="24.4" y="410.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-16)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="410.4" textLength="24.4" clip-path="url(#terminal-3194367487-line-16)">92</text><text class="terminal-3194367487-r4" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-16)">
+  </text><text class="terminal-3194367487-r1" x="0" y="434.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-17)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="434.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-17)">X</text><text class="terminal-3194367487-r1" x="24.4" y="434.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-17)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="434.8" textLength="24.4" clip-path="url(#terminal-3194367487-line-17)">93</text><text class="terminal-3194367487-r4" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-17)">
+  </text><text class="terminal-3194367487-r1" x="0" y="459.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-18)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="459.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-18)">X</text><text class="terminal-3194367487-r1" x="24.4" y="459.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-18)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="459.2" textLength="24.4" clip-path="url(#terminal-3194367487-line-18)">94</text><text class="terminal-3194367487-r5" x="951.6" y="459.2" textLength="24.4" clip-path="url(#terminal-3194367487-line-18)">▂▂</text><text class="terminal-3194367487-r4" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-18)">
+  </text><text class="terminal-3194367487-r1" x="0" y="483.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-19)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="483.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-19)">X</text><text class="terminal-3194367487-r1" x="24.4" y="483.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-19)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="483.6" textLength="24.4" clip-path="url(#terminal-3194367487-line-19)">95</text><text class="terminal-3194367487-r4" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-3194367487-line-19)">
+  </text><text class="terminal-3194367487-r1" x="0" y="508" textLength="12.2" clip-path="url(#terminal-3194367487-line-20)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="508" textLength="12.2" clip-path="url(#terminal-3194367487-line-20)">X</text><text class="terminal-3194367487-r1" x="24.4" y="508" textLength="12.2" clip-path="url(#terminal-3194367487-line-20)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="508" textLength="24.4" clip-path="url(#terminal-3194367487-line-20)">96</text><text class="terminal-3194367487-r4" x="976" y="508" textLength="12.2" clip-path="url(#terminal-3194367487-line-20)">
+  </text><text class="terminal-3194367487-r1" x="0" y="532.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-21)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="532.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-21)">X</text><text class="terminal-3194367487-r1" x="24.4" y="532.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-21)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="532.4" textLength="24.4" clip-path="url(#terminal-3194367487-line-21)">97</text><text class="terminal-3194367487-r4" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-3194367487-line-21)">
+  </text><text class="terminal-3194367487-r1" x="0" y="556.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-22)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="556.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-22)">X</text><text class="terminal-3194367487-r1" x="24.4" y="556.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-22)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="556.8" textLength="24.4" clip-path="url(#terminal-3194367487-line-22)">98</text><text class="terminal-3194367487-r4" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-3194367487-line-22)">
+  </text><text class="terminal-3194367487-r1" x="0" y="581.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-23)">▐</text><text class="terminal-3194367487-r2" x="12.2" y="581.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-23)">X</text><text class="terminal-3194367487-r1" x="24.4" y="581.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-23)">▌</text><text class="terminal-3194367487-r3" x="48.8" y="581.2" textLength="24.4" clip-path="url(#terminal-3194367487-line-23)">99</text><text class="terminal-3194367487-r4" x="976" y="581.2" textLength="12.2" clip-path="url(#terminal-3194367487-line-23)">
+  </text>
+      </g>
+      </g>
+  </svg>
+  
+  '''
+# ---
 # name: test_easing_preview
   '''
   <svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
@@ -21751,6 +22078,170 @@
   
   '''
 # ---
+# name: test_scroll_to
+  '''
+  <svg class="rich-terminal" viewBox="0 0 994 660.0" xmlns="http://www.w3.org/2000/svg">
+      <!-- Generated with Rich https://www.textualize.io -->
+      <style>
+  
+      @font-face {
+          font-family: "Fira Code";
+          src: local("FiraCode-Regular"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+          font-style: normal;
+          font-weight: 400;
+      }
+      @font-face {
+          font-family: "Fira Code";
+          src: local("FiraCode-Bold"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+          font-style: bold;
+          font-weight: 700;
+      }
+  
+      .terminal-141393426-matrix {
+          font-family: Fira Code, monospace;
+          font-size: 20px;
+          line-height: 24.4px;
+          font-variant-east-asian: full-width;
+      }
+  
+      .terminal-141393426-title {
+          font-size: 18px;
+          font-weight: bold;
+          font-family: arial;
+      }
+  
+      .terminal-141393426-r1 { fill: #3d3d3d }
+  .terminal-141393426-r2 { fill: #1e1e1e;font-weight: bold }
+  .terminal-141393426-r3 { fill: #e1e1e1 }
+  .terminal-141393426-r4 { fill: #c5c8c6 }
+  .terminal-141393426-r5 { fill: #23568b }
+  .terminal-141393426-r6 { fill: #14191f }
+  .terminal-141393426-r7 { fill: #ddedf9 }
+      </style>
+  
+      <defs>
+      <clipPath id="terminal-141393426-clip-terminal">
+        <rect x="0" y="0" width="975.0" height="609.0" />
+      </clipPath>
+      <clipPath id="terminal-141393426-line-0">
+      <rect x="0" y="1.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-1">
+      <rect x="0" y="25.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-2">
+      <rect x="0" y="50.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-3">
+      <rect x="0" y="74.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-4">
+      <rect x="0" y="99.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-5">
+      <rect x="0" y="123.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-6">
+      <rect x="0" y="147.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-7">
+      <rect x="0" y="172.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-8">
+      <rect x="0" y="196.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-9">
+      <rect x="0" y="221.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-10">
+      <rect x="0" y="245.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-11">
+      <rect x="0" y="269.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-12">
+      <rect x="0" y="294.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-13">
+      <rect x="0" y="318.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-14">
+      <rect x="0" y="343.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-15">
+      <rect x="0" y="367.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-16">
+      <rect x="0" y="391.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-17">
+      <rect x="0" y="416.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-18">
+      <rect x="0" y="440.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-19">
+      <rect x="0" y="465.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-20">
+      <rect x="0" y="489.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-21">
+      <rect x="0" y="513.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-22">
+      <rect x="0" y="538.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-141393426-line-23">
+      <rect x="0" y="562.7" width="976" height="24.65"/>
+              </clipPath>
+      </defs>
+  
+      <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="658" rx="8"/><text class="terminal-141393426-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">ScrollOffByOne</text>
+              <g transform="translate(26,22)">
+              <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+              <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+              <circle cx="44" cy="0" r="7" fill="#28c840"/>
+              </g>
+          
+      <g transform="translate(9, 41)" clip-path="url(#terminal-141393426-clip-terminal)">
+      <rect fill="#1e1e1e" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="1.5" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="25.9" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="50.3" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="74.7" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="99.1" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="123.5" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="147.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="147.9" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="147.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="172.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="172.3" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="172.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="196.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="196.7" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="196.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="221.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="221.1" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="221.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="245.5" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="269.9" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="294.3" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="951.6" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="318.7" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="343.1" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="367.5" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="391.9" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="416.3" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="440.7" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="465.1" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="489.5" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="513.9" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="538.3" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#3d3d3d" x="12.2" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="24.4" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="73.2" y="562.7" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="562.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="587.1" width="73.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="73.2" y="587.1" width="878.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="951.6" y="587.1" width="24.4" height="24.65" shape-rendering="crispEdges"/>
+      <g class="terminal-141393426-matrix">
+      <text class="terminal-141393426-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-141393426-line-0)">▐</text><text class="terminal-141393426-r2" x="12.2" y="20" textLength="12.2" clip-path="url(#terminal-141393426-line-0)">X</text><text class="terminal-141393426-r1" x="24.4" y="20" textLength="12.2" clip-path="url(#terminal-141393426-line-0)">▌</text><text class="terminal-141393426-r3" x="48.8" y="20" textLength="24.4" clip-path="url(#terminal-141393426-line-0)">27</text><text class="terminal-141393426-r4" x="976" y="20" textLength="12.2" clip-path="url(#terminal-141393426-line-0)">
+  </text><text class="terminal-141393426-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-141393426-line-1)">▐</text><text class="terminal-141393426-r2" x="12.2" y="44.4" textLength="12.2" clip-path="url(#terminal-141393426-line-1)">X</text><text class="terminal-141393426-r1" x="24.4" y="44.4" textLength="12.2" clip-path="url(#terminal-141393426-line-1)">▌</text><text class="terminal-141393426-r3" x="48.8" y="44.4" textLength="24.4" clip-path="url(#terminal-141393426-line-1)">28</text><text class="terminal-141393426-r4" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-141393426-line-1)">
+  </text><text class="terminal-141393426-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-141393426-line-2)">▐</text><text class="terminal-141393426-r2" x="12.2" y="68.8" textLength="12.2" clip-path="url(#terminal-141393426-line-2)">X</text><text class="terminal-141393426-r1" x="24.4" y="68.8" textLength="12.2" clip-path="url(#terminal-141393426-line-2)">▌</text><text class="terminal-141393426-r3" x="48.8" y="68.8" textLength="24.4" clip-path="url(#terminal-141393426-line-2)">29</text><text class="terminal-141393426-r4" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-141393426-line-2)">
+  </text><text class="terminal-141393426-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-141393426-line-3)">▐</text><text class="terminal-141393426-r2" x="12.2" y="93.2" textLength="12.2" clip-path="url(#terminal-141393426-line-3)">X</text><text class="terminal-141393426-r1" x="24.4" y="93.2" textLength="12.2" clip-path="url(#terminal-141393426-line-3)">▌</text><text class="terminal-141393426-r3" x="48.8" y="93.2" textLength="24.4" clip-path="url(#terminal-141393426-line-3)">30</text><text class="terminal-141393426-r4" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-141393426-line-3)">
+  </text><text class="terminal-141393426-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-141393426-line-4)">▐</text><text class="terminal-141393426-r2" x="12.2" y="117.6" textLength="12.2" clip-path="url(#terminal-141393426-line-4)">X</text><text class="terminal-141393426-r1" x="24.4" y="117.6" textLength="12.2" clip-path="url(#terminal-141393426-line-4)">▌</text><text class="terminal-141393426-r3" x="48.8" y="117.6" textLength="24.4" clip-path="url(#terminal-141393426-line-4)">31</text><text class="terminal-141393426-r4" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-141393426-line-4)">
+  </text><text class="terminal-141393426-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-141393426-line-5)">▐</text><text class="terminal-141393426-r2" x="12.2" y="142" textLength="12.2" clip-path="url(#terminal-141393426-line-5)">X</text><text class="terminal-141393426-r1" x="24.4" y="142" textLength="12.2" clip-path="url(#terminal-141393426-line-5)">▌</text><text class="terminal-141393426-r3" x="48.8" y="142" textLength="24.4" clip-path="url(#terminal-141393426-line-5)">32</text><text class="terminal-141393426-r4" x="976" y="142" textLength="12.2" clip-path="url(#terminal-141393426-line-5)">
+  </text><text class="terminal-141393426-r1" x="0" y="166.4" textLength="12.2" clip-path="url(#terminal-141393426-line-6)">▐</text><text class="terminal-141393426-r2" x="12.2" y="166.4" textLength="12.2" clip-path="url(#terminal-141393426-line-6)">X</text><text class="terminal-141393426-r1" x="24.4" y="166.4" textLength="12.2" clip-path="url(#terminal-141393426-line-6)">▌</text><text class="terminal-141393426-r3" x="48.8" y="166.4" textLength="24.4" clip-path="url(#terminal-141393426-line-6)">33</text><text class="terminal-141393426-r5" x="951.6" y="166.4" textLength="24.4" clip-path="url(#terminal-141393426-line-6)">▄▄</text><text class="terminal-141393426-r4" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-141393426-line-6)">
+  </text><text class="terminal-141393426-r1" x="0" y="190.8" textLength="12.2" clip-path="url(#terminal-141393426-line-7)">▐</text><text class="terminal-141393426-r2" x="12.2" y="190.8" textLength="12.2" clip-path="url(#terminal-141393426-line-7)">X</text><text class="terminal-141393426-r1" x="24.4" y="190.8" textLength="12.2" clip-path="url(#terminal-141393426-line-7)">▌</text><text class="terminal-141393426-r3" x="48.8" y="190.8" textLength="24.4" clip-path="url(#terminal-141393426-line-7)">34</text><text class="terminal-141393426-r4" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-141393426-line-7)">
+  </text><text class="terminal-141393426-r1" x="0" y="215.2" textLength="12.2" clip-path="url(#terminal-141393426-line-8)">▐</text><text class="terminal-141393426-r2" x="12.2" y="215.2" textLength="12.2" clip-path="url(#terminal-141393426-line-8)">X</text><text class="terminal-141393426-r1" x="24.4" y="215.2" textLength="12.2" clip-path="url(#terminal-141393426-line-8)">▌</text><text class="terminal-141393426-r3" x="48.8" y="215.2" textLength="24.4" clip-path="url(#terminal-141393426-line-8)">35</text><text class="terminal-141393426-r4" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-141393426-line-8)">
+  </text><text class="terminal-141393426-r1" x="0" y="239.6" textLength="12.2" clip-path="url(#terminal-141393426-line-9)">▐</text><text class="terminal-141393426-r2" x="12.2" y="239.6" textLength="12.2" clip-path="url(#terminal-141393426-line-9)">X</text><text class="terminal-141393426-r1" x="24.4" y="239.6" textLength="12.2" clip-path="url(#terminal-141393426-line-9)">▌</text><text class="terminal-141393426-r3" x="48.8" y="239.6" textLength="24.4" clip-path="url(#terminal-141393426-line-9)">36</text><text class="terminal-141393426-r4" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-141393426-line-9)">
+  </text><text class="terminal-141393426-r1" x="0" y="264" textLength="12.2" clip-path="url(#terminal-141393426-line-10)">▐</text><text class="terminal-141393426-r2" x="12.2" y="264" textLength="12.2" clip-path="url(#terminal-141393426-line-10)">X</text><text class="terminal-141393426-r1" x="24.4" y="264" textLength="12.2" clip-path="url(#terminal-141393426-line-10)">▌</text><text class="terminal-141393426-r3" x="48.8" y="264" textLength="24.4" clip-path="url(#terminal-141393426-line-10)">37</text><text class="terminal-141393426-r4" x="976" y="264" textLength="12.2" clip-path="url(#terminal-141393426-line-10)">
+  </text><text class="terminal-141393426-r1" x="0" y="288.4" textLength="12.2" clip-path="url(#terminal-141393426-line-11)">▐</text><text class="terminal-141393426-r2" x="12.2" y="288.4" textLength="12.2" clip-path="url(#terminal-141393426-line-11)">X</text><text class="terminal-141393426-r1" x="24.4" y="288.4" textLength="12.2" clip-path="url(#terminal-141393426-line-11)">▌</text><text class="terminal-141393426-r3" x="48.8" y="288.4" textLength="24.4" clip-path="url(#terminal-141393426-line-11)">38</text><text class="terminal-141393426-r4" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-141393426-line-11)">
+  </text><text class="terminal-141393426-r1" x="0" y="312.8" textLength="12.2" clip-path="url(#terminal-141393426-line-12)">▐</text><text class="terminal-141393426-r2" x="12.2" y="312.8" textLength="12.2" clip-path="url(#terminal-141393426-line-12)">X</text><text class="terminal-141393426-r1" x="24.4" y="312.8" textLength="12.2" clip-path="url(#terminal-141393426-line-12)">▌</text><text class="terminal-141393426-r3" x="48.8" y="312.8" textLength="24.4" clip-path="url(#terminal-141393426-line-12)">39</text><text class="terminal-141393426-r6" x="951.6" y="312.8" textLength="24.4" clip-path="url(#terminal-141393426-line-12)">▂▂</text><text class="terminal-141393426-r4" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-141393426-line-12)">
+  </text><text class="terminal-141393426-r1" x="0" y="337.2" textLength="12.2" clip-path="url(#terminal-141393426-line-13)">▐</text><text class="terminal-141393426-r2" x="12.2" y="337.2" textLength="12.2" clip-path="url(#terminal-141393426-line-13)">X</text><text class="terminal-141393426-r1" x="24.4" y="337.2" textLength="12.2" clip-path="url(#terminal-141393426-line-13)">▌</text><text class="terminal-141393426-r3" x="48.8" y="337.2" textLength="24.4" clip-path="url(#terminal-141393426-line-13)">40</text><text class="terminal-141393426-r4" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-141393426-line-13)">
+  </text><text class="terminal-141393426-r1" x="0" y="361.6" textLength="12.2" clip-path="url(#terminal-141393426-line-14)">▐</text><text class="terminal-141393426-r2" x="12.2" y="361.6" textLength="12.2" clip-path="url(#terminal-141393426-line-14)">X</text><text class="terminal-141393426-r1" x="24.4" y="361.6" textLength="12.2" clip-path="url(#terminal-141393426-line-14)">▌</text><text class="terminal-141393426-r3" x="48.8" y="361.6" textLength="24.4" clip-path="url(#terminal-141393426-line-14)">41</text><text class="terminal-141393426-r4" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-141393426-line-14)">
+  </text><text class="terminal-141393426-r1" x="0" y="386" textLength="12.2" clip-path="url(#terminal-141393426-line-15)">▐</text><text class="terminal-141393426-r2" x="12.2" y="386" textLength="12.2" clip-path="url(#terminal-141393426-line-15)">X</text><text class="terminal-141393426-r1" x="24.4" y="386" textLength="12.2" clip-path="url(#terminal-141393426-line-15)">▌</text><text class="terminal-141393426-r3" x="48.8" y="386" textLength="24.4" clip-path="url(#terminal-141393426-line-15)">42</text><text class="terminal-141393426-r4" x="976" y="386" textLength="12.2" clip-path="url(#terminal-141393426-line-15)">
+  </text><text class="terminal-141393426-r1" x="0" y="410.4" textLength="12.2" clip-path="url(#terminal-141393426-line-16)">▐</text><text class="terminal-141393426-r2" x="12.2" y="410.4" textLength="12.2" clip-path="url(#terminal-141393426-line-16)">X</text><text class="terminal-141393426-r1" x="24.4" y="410.4" textLength="12.2" clip-path="url(#terminal-141393426-line-16)">▌</text><text class="terminal-141393426-r3" x="48.8" y="410.4" textLength="24.4" clip-path="url(#terminal-141393426-line-16)">43</text><text class="terminal-141393426-r4" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-141393426-line-16)">
+  </text><text class="terminal-141393426-r1" x="0" y="434.8" textLength="12.2" clip-path="url(#terminal-141393426-line-17)">▐</text><text class="terminal-141393426-r2" x="12.2" y="434.8" textLength="12.2" clip-path="url(#terminal-141393426-line-17)">X</text><text class="terminal-141393426-r1" x="24.4" y="434.8" textLength="12.2" clip-path="url(#terminal-141393426-line-17)">▌</text><text class="terminal-141393426-r3" x="48.8" y="434.8" textLength="24.4" clip-path="url(#terminal-141393426-line-17)">44</text><text class="terminal-141393426-r4" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-141393426-line-17)">
+  </text><text class="terminal-141393426-r1" x="0" y="459.2" textLength="12.2" clip-path="url(#terminal-141393426-line-18)">▐</text><text class="terminal-141393426-r2" x="12.2" y="459.2" textLength="12.2" clip-path="url(#terminal-141393426-line-18)">X</text><text class="terminal-141393426-r1" x="24.4" y="459.2" textLength="12.2" clip-path="url(#terminal-141393426-line-18)">▌</text><text class="terminal-141393426-r3" x="48.8" y="459.2" textLength="24.4" clip-path="url(#terminal-141393426-line-18)">45</text><text class="terminal-141393426-r4" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-141393426-line-18)">
+  </text><text class="terminal-141393426-r1" x="0" y="483.6" textLength="12.2" clip-path="url(#terminal-141393426-line-19)">▐</text><text class="terminal-141393426-r2" x="12.2" y="483.6" textLength="12.2" clip-path="url(#terminal-141393426-line-19)">X</text><text class="terminal-141393426-r1" x="24.4" y="483.6" textLength="12.2" clip-path="url(#terminal-141393426-line-19)">▌</text><text class="terminal-141393426-r3" x="48.8" y="483.6" textLength="24.4" clip-path="url(#terminal-141393426-line-19)">46</text><text class="terminal-141393426-r4" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-141393426-line-19)">
+  </text><text class="terminal-141393426-r1" x="0" y="508" textLength="12.2" clip-path="url(#terminal-141393426-line-20)">▐</text><text class="terminal-141393426-r2" x="12.2" y="508" textLength="12.2" clip-path="url(#terminal-141393426-line-20)">X</text><text class="terminal-141393426-r1" x="24.4" y="508" textLength="12.2" clip-path="url(#terminal-141393426-line-20)">▌</text><text class="terminal-141393426-r3" x="48.8" y="508" textLength="24.4" clip-path="url(#terminal-141393426-line-20)">47</text><text class="terminal-141393426-r4" x="976" y="508" textLength="12.2" clip-path="url(#terminal-141393426-line-20)">
+  </text><text class="terminal-141393426-r1" x="0" y="532.4" textLength="12.2" clip-path="url(#terminal-141393426-line-21)">▐</text><text class="terminal-141393426-r2" x="12.2" y="532.4" textLength="12.2" clip-path="url(#terminal-141393426-line-21)">X</text><text class="terminal-141393426-r1" x="24.4" y="532.4" textLength="12.2" clip-path="url(#terminal-141393426-line-21)">▌</text><text class="terminal-141393426-r3" x="48.8" y="532.4" textLength="24.4" clip-path="url(#terminal-141393426-line-21)">48</text><text class="terminal-141393426-r4" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-141393426-line-21)">
+  </text><text class="terminal-141393426-r1" x="0" y="556.8" textLength="12.2" clip-path="url(#terminal-141393426-line-22)">▐</text><text class="terminal-141393426-r2" x="12.2" y="556.8" textLength="12.2" clip-path="url(#terminal-141393426-line-22)">X</text><text class="terminal-141393426-r1" x="24.4" y="556.8" textLength="12.2" clip-path="url(#terminal-141393426-line-22)">▌</text><text class="terminal-141393426-r3" x="48.8" y="556.8" textLength="24.4" clip-path="url(#terminal-141393426-line-22)">49</text><text class="terminal-141393426-r4" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-141393426-line-22)">
+  </text><text class="terminal-141393426-r1" x="0" y="581.2" textLength="12.2" clip-path="url(#terminal-141393426-line-23)">▐</text><text class="terminal-141393426-r2" x="12.2" y="581.2" textLength="12.2" clip-path="url(#terminal-141393426-line-23)">X</text><text class="terminal-141393426-r1" x="24.4" y="581.2" textLength="12.2" clip-path="url(#terminal-141393426-line-23)">▌</text><text class="terminal-141393426-r3" x="48.8" y="581.2" textLength="24.4" clip-path="url(#terminal-141393426-line-23)">50</text><text class="terminal-141393426-r4" x="976" y="581.2" textLength="12.2" clip-path="url(#terminal-141393426-line-23)">
+  </text>
+      </g>
+      </g>
+  </svg>
+  
+  '''
+# ---
 # name: test_scroll_to_center
   '''
   <svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
diff --git a/tests/snapshot_tests/snapshot_apps/dock_scroll2.py b/tests/snapshot_tests/snapshot_apps/dock_scroll2.py
new file mode 100644
index 0000000000..fe2a1b234a
--- /dev/null
+++ b/tests/snapshot_tests/snapshot_apps/dock_scroll2.py
@@ -0,0 +1,33 @@
+from textual.app import App
+from textual.widgets import Header, Label, Footer
+
+
+# Same as dock_scroll.py but with 2 labels
+class TestApp(App):
+    BINDINGS = [("ctrl+q", "app.quit", "Quit")]
+    CSS = """
+    
+    Label {
+        border: solid red;
+    }
+    Footer {
+        height: 4;
+    }
+    """
+
+    def compose(self):
+        text = (
+            "this is a sample sentence and here are some words".replace(" ", "\n") * 2
+        )
+        yield Header()
+        yield Label(text)
+        yield Label(text)
+        yield Footer()
+
+    def on_mount(self):
+        self.dark = False
+
+
+if __name__ == "__main__":
+    app = TestApp()
+    app.run()
diff --git a/tests/snapshot_tests/snapshot_apps/dock_scroll_off_by_one.py b/tests/snapshot_tests/snapshot_apps/dock_scroll_off_by_one.py
new file mode 100644
index 0000000000..f9a5a00fd0
--- /dev/null
+++ b/tests/snapshot_tests/snapshot_apps/dock_scroll_off_by_one.py
@@ -0,0 +1,17 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Checkbox, Footer
+
+
+class ScrollOffByOne(App):
+    def compose(self) -> ComposeResult:
+        for number in range(1, 100):
+            yield Checkbox(str(number))
+        yield Footer()
+
+    def on_mount(self) -> None:
+        self.query_one("Screen").scroll_end()
+
+
+app = ScrollOffByOne()
+if __name__ == "__main__":
+    app.run()
diff --git a/tests/snapshot_tests/snapshot_apps/horizontal_auto_width.css b/tests/snapshot_tests/snapshot_apps/horizontal_auto_width.css
index 50ea9edff1..f135a09c55 100644
--- a/tests/snapshot_tests/snapshot_apps/horizontal_auto_width.css
+++ b/tests/snapshot_tests/snapshot_apps/horizontal_auto_width.css
@@ -19,6 +19,6 @@
 
 #horizontal {
     width: auto;
-    height: auto;
+    height: 4;
     background: darkslateblue;
-}
\ No newline at end of file
+}
diff --git a/tests/snapshot_tests/snapshot_apps/scroll_to.py b/tests/snapshot_tests/snapshot_apps/scroll_to.py
new file mode 100644
index 0000000000..9dd21a3fc4
--- /dev/null
+++ b/tests/snapshot_tests/snapshot_apps/scroll_to.py
@@ -0,0 +1,19 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Checkbox, Footer
+
+
+class ScrollOffByOne(App):
+    """Scroll to item 50."""
+
+    def compose(self) -> ComposeResult:
+        for number in range(1, 100):
+            yield Checkbox(str(number), id=f"number-{number}")
+        yield Footer()
+
+    def on_ready(self) -> None:
+        self.query_one("#number-50").scroll_visible()
+
+
+app = ScrollOffByOne()
+if __name__ == "__main__":
+    app.run()
diff --git a/tests/snapshot_tests/test_snapshots.py b/tests/snapshot_tests/test_snapshots.py
index ea5e321538..74c1bc0e25 100644
--- a/tests/snapshot_tests/test_snapshots.py
+++ b/tests/snapshot_tests/test_snapshots.py
@@ -203,9 +203,11 @@ def test_option_list(snap_compare):
     assert snap_compare(WIDGET_EXAMPLES_DIR / "option_list_options.py")
     assert snap_compare(WIDGET_EXAMPLES_DIR / "option_list_tables.py")
 
+
 def test_option_list_build(snap_compare):
     assert snap_compare(SNAPSHOT_APPS_DIR / "option_list.py")
 
+
 def test_progress_bar_indeterminate(snap_compare):
     assert snap_compare(WIDGET_EXAMPLES_DIR / "progress_bar_isolated_.py", press=["f"])
 
@@ -457,6 +459,23 @@ def test_dock_scroll(snap_compare):
     assert snap_compare(SNAPSHOT_APPS_DIR / "dock_scroll.py", terminal_size=(80, 25))
 
 
+def test_dock_scroll2(snap_compare):
+    # https://github.com/Textualize/textual/issues/2525
+    assert snap_compare(SNAPSHOT_APPS_DIR / "dock_scroll2.py", terminal_size=(80, 25))
+
+
+def test_dock_scroll_off_by_one(snap_compare):
+    # https://github.com/Textualize/textual/issues/2525
+    assert snap_compare(
+        SNAPSHOT_APPS_DIR / "dock_scroll_off_by_one.py", terminal_size=(80, 25)
+    )
+
+
+def test_scroll_to(snap_compare):
+    # https://github.com/Textualize/textual/issues/2525
+    assert snap_compare(SNAPSHOT_APPS_DIR / "scroll_to.py", terminal_size=(80, 25))
+
+
 def test_auto_fr(snap_compare):
     # https://github.com/Textualize/textual/issues/2220
     assert snap_compare(SNAPSHOT_APPS_DIR / "auto_fr.py", terminal_size=(80, 25))


Code review comments:
diff_hunk: @@ -1095,3 +1095,9 @@ def grow_maximum(self, other: Spacing) -> Spacing:
 
 NULL_OFFSET: Final = Offset(0, 0)
 """An [offset][textual.geometry.Offset] constant for (0, 0)."""
+
+NULL_REGION: Final = Region(0, 0, 0, 0)
+"""A [Region][textual.geometryRegion] constant for a null region (at the origin, with both width and height set to zero)."""
path: src/textual/geometry.py
text: @user1:
```suggestion
"""A [Region][textual.geometry.Region] constant for a null region (at the origin, with both width and height set to zero)."""
```