diff --git a/src/components/NHead.astro b/src/components/NHead.astro
index b5a473b..a6140aa 100644
--- a/src/components/NHead.astro
+++ b/src/components/NHead.astro
@@ -132,7 +132,7 @@ import "./vtbag-bar.css";
       filter: blur(10px);
     }
   }
-  ::view-transition-image-pair(main) {
+  ::view-transition-group(main) {
     overflow: hidden;
   }
 
diff --git a/src/components/SidePicture.astro b/src/components/SidePicture.astro
new file mode 100644
index 0000000..9906ae0
--- /dev/null
+++ b/src/components/SidePicture.astro
@@ -0,0 +1,5 @@
+---
+---
+<div>
+  <span style="float:left"><slot name="pic"/></span><slot />
+</div>
\ No newline at end of file
diff --git a/src/pages/crossing/over-the-top/_Description.astro b/src/pages/crossing/over-the-top/_Description.astro
index ff9f563..65321cf 100644
--- a/src/pages/crossing/over-the-top/_Description.astro
+++ b/src/pages/crossing/over-the-top/_Description.astro
@@ -1,24 +1,35 @@
 ---
 import AnimatedSvg from "@/components/AnimatedSvg.astro";
-
-
 ---
-<p>This is a demonstration of the <b>over-the-top flavor</b> of the element crossing. This flavor is experimental technology and it is not certain whether it will ever be mature enough for production.</p>
+
+<p>
+  This is a demonstration of the <b>over-the-top flavor</b> of the element
+  crossing. This flavor is experimental technology and it is not certain whether
+  it will ever be mature enough for production.
+</p>
 <p>
   Enter data in the form fields, resize the text area, change the checkmarks,
   switch the color-scheme, collapse a group in the navigation sidebar on the
   left and reposition its scrollbar.
 </p>
 <p>
-  Then select the other page from the navigation sidebar to see whether your changes got preserved. Also check the playback time of the video and the animated SVG as well as the animation in the footer.
+  Then select the other page from the navigation sidebar to see whether your
+  changes got preserved. Also check the playback time of the video and the
+  animated SVG as well as the animation in the footer.
 </p>
 
-
 <div class="animations">
-  <video controls width="200" loop autoplay
-  data-vtbag-x="#video @currentTime">
-    <source src="/video.mp4" type="video/mp4" />Your browser does not support the
-    video tag.</video
+  <video
+    width="200"
+    height="112.5"
+    controls
+    loop
+    autoplay
+    playsinline
+    data-vtbag-x="#video @currentTime"
+  >
+    <source src="/video.mp4" type="video/mp4" />Your browser does not support
+    the video tag.</video
   >
   <AnimatedSvg expression="#svg ~/svg" />
 </div>
@@ -55,21 +66,11 @@ import AnimatedSvg from "@/components/AnimatedSvg.astro";
       <label for="interest1">Coding</label>
     </div>
     <div>
-      <input
-        type="checkbox"
-        id="interest2"
-        name="interests"
-        value="music"
-      />
+      <input type="checkbox" id="interest2" name="interests" value="music" />
       <label for="interest2">Music</label>
     </div>
     <div>
-      <input
-        type="checkbox"
-        id="interest3"
-        name="interests"
-        value="sports"
-      />
+      <input type="checkbox" id="interest3" name="interests" value="sports" />
       <label for="interest3">Sports</label>
     </div>
   </div>
@@ -86,21 +87,14 @@ import AnimatedSvg from "@/components/AnimatedSvg.astro";
       <label for="subscribeYes">Yes</label>
     </div>
     <div>
-      <input
-        type="radio"
-        id="subscribeNo"
-        name="subscribe"
-        value="no"
-      />
+      <input type="radio" id="subscribeNo" name="subscribe" value="no" />
       <label for="subscribeNo">No</label>
     </div>
   </div>
   <div class="form-group">
     <label for="comments">Comments:</label>
-    <textarea
-      id="comments"
-      name="comments"
-      placeholder="Enter your comments">This is a sample comment.</textarea
+    <textarea id="comments" name="comments" placeholder="Enter your comments"
+      >This is a sample comment.</textarea
     >
   </div>
 </form>
diff --git a/src/pages/crossing/over-the-top/_OverTheTopLayout.astro b/src/pages/crossing/over-the-top/_OverTheTopLayout.astro
index 0afda74..d21de41 100644
--- a/src/pages/crossing/over-the-top/_OverTheTopLayout.astro
+++ b/src/pages/crossing/over-the-top/_OverTheTopLayout.astro
@@ -86,7 +86,7 @@ const { title } = Astro.props;
             <a href="/crossing/over-the-top/2/">Page 2</a>
           </details>
         </nav>
-        <main>
+        <main data-vtbag-x="#main @scrollTop">
           <slot />
         </main>
       </div>
diff --git a/src/pages/crossing/plain/_Description.astro b/src/pages/crossing/plain/_Description.astro
index 612025f..1865944 100644
--- a/src/pages/crossing/plain/_Description.astro
+++ b/src/pages/crossing/plain/_Description.astro
@@ -1,7 +1,5 @@
 ---
 import AnimatedSvg from "@/components/AnimatedSvg.astro";
-
-
 ---
 
 <p>
@@ -10,11 +8,10 @@ import AnimatedSvg from "@/components/AnimatedSvg.astro";
   single-page applications to your multi-page app.
 </p>
 
-
 <div class="animations">
-  <video controls width="200" loop autoplay>
-    <source src="/video.mp4" type="video/mp4" />Your browser does not support the
-    video tag.</video
+  <video width="200" height="112.5" controls loop autoplay playsinline>
+    <source src="/video.mp4" type="video/mp4" />Your browser does not support
+    the video tag.</video
   >
   <AnimatedSvg />
 </div>
@@ -40,7 +37,10 @@ import AnimatedSvg from "@/components/AnimatedSvg.astro";
     <li>
       The current playback time of media elements, including audio and video.
     </li>
-    <li>The current playback time of CSS animations, transitions and animated SVGs.</li>
+    <li>
+      The current playback time of CSS animations, transitions and animated
+      SVGs.
+    </li>
     <li>The state and content of input fields.</li>
     <li>The content of iframes.</li>
   </ul>
diff --git a/src/pages/crossing/vanilla/_Description.astro b/src/pages/crossing/vanilla/_Description.astro
index 6ab758e..a0457ec 100644
--- a/src/pages/crossing/vanilla/_Description.astro
+++ b/src/pages/crossing/vanilla/_Description.astro
@@ -18,7 +18,7 @@ import AnimatedSvg from "@/components/AnimatedSvg.astro"
 </p>
 
 <div class="animations">
-  <video controls width="200" loop autoplay data-vtbag-x="#video @currentTime">
+  <video  width="200" height="112.5" controls loop autoplay playsinline data-vtbag-x="#video @currentTime">
     <source src="/video.mp4" type="video/mp4" />Your browser does not support the
     video tag.</video
   >
diff --git a/src/pages/crossing/vanilla/_VanillaLayout.astro b/src/pages/crossing/vanilla/_VanillaLayout.astro
index 6e40435..4fb3399 100644
--- a/src/pages/crossing/vanilla/_VanillaLayout.astro
+++ b/src/pages/crossing/vanilla/_VanillaLayout.astro
@@ -85,7 +85,7 @@ const { title } = Astro.props;
             <a href="/crossing/vanilla/2/">Page 2</a>
           </details>
         </nav>
-        <main>
+        <main data-vtbag-x="#main @scrollTop">
           <slot />
         </main>
       </div>
diff --git a/src/pages/tips/hide-and-seek/problem.astro b/src/pages/tips/hide-and-seek/problem.astro
index 4f5a80f..33326bd 100644
--- a/src/pages/tips/hide-and-seek/problem.astro
+++ b/src/pages/tips/hide-and-seek/problem.astro
@@ -101,7 +101,7 @@ import Bsky from "../../../components/Bsky.astro";
   <body id="body">
     <div id="other">
       <div id="d1">
-        <h1>CYBER<span class="glitch-effect">TECH</span> INVENTORY</h1>
+        <h1>INVENTORY</h1>
         <ul class="cyber-list"></ul>
         <button class="-glitch-effect">RANDOMIZE</button>
         <p style="max-width:640px">