typos

src/content/docs/basics/api.mdx

@@ -34,7 +34,7 @@ While I add more pages, I'm also happy that I can offer some links to previous w
 ### W3C Drafts
 * Level 1: The W3C Candidate Recommendation Snapshot: *CSS View Transitions Module Level 1* [https://drafts.csswg.org/css-view-transitions-1/](https://drafts.csswg.org/css-view-transitions-1/)
 
-* Level 2: The Editor’s Draft: *CSS View Transitions Module Level 2* [https://drafts.csswg.org/css-view-transitions-2/](https://drafts.csswg.org/css-view-transitions-2/)
+* Level 2: The Editor's Draft: *CSS View Transitions Module Level 2* [https://drafts.csswg.org/css-view-transitions-2/](https://drafts.csswg.org/css-view-transitions-2/)
 
 ### MDN
 * The Documentation of the View Transition API on MDN [https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)

src/content/docs/basics/default-animations.mdx

@@ -1,6 +1,6 @@
 ---
 title: Default View Transition Animations
-description: Mastering the fundamentals is key to creating seamless animations with the View Transition API. Here’s a quick guide to get you started.
+description: Mastering the fundamentals is key to creating seamless animations with the View Transition API. Here's a quick guide to get you started.
 head:
   - tag: meta
     attrs:
@@ -19,7 +19,7 @@ You caught me! The explanations above have been slightly simplified for the sake
 
 Additional technical details:
 
-* The browser’s default exit and entry animations do more than just transition opacity. They also set the `mix-blend-mode` to `plus-lighter`, but only when both an old and new image are present in the image pair. Combined with the `isolation: isolate` setting of the image-pair, this ensures that during a cross-fade, the pixels of two identical images will sum to the original color and opacity. Without this, the images might exhibit an [overexposure-like effect](/tips/over-exposure/) during animations.
+* The browser's default exit and entry animations do more than just transition opacity. They also set the `mix-blend-mode` to `plus-lighter`, but only when both an old and new image are present in the image pair. Combined with the `isolation: isolate` setting of the image-pair, this ensures that during a cross-fade, the pixels of two identical images will sum to the original color and opacity. Without this, the images might exhibit an [overexposure-like effect](/tips/over-exposure/) during animations.
 
 * In the description of morph animations above, *position* was used for simplicity. In reality, the group animation accounts for both the element's position and any applied CSS transformations, such as those defined by `matrix3d` or specialized forms like `rotate`. When you read *position* in the following text, it always means *…and the applied transformations*.
 
@@ -41,7 +41,7 @@ In our example, the group's outline gradually gets wider  and shortens in height
 <style>{`td {vertical-align: top; text-align: right;}`}</style>
 <div style="margin-left:calc(50% - 14em); width: fit-content"><table><tbody class="not-content"><tr><td>&nbsp;</td><td>0%</td><td>50%</td><td>100%</td></tr><tr><td>group</td><td><svg width="60" height="80"><g><rect x="10" y="10" width="40" height="60" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none"/></g></svg></td><td><svg width="70" height="70"><g><rect x="10" y="10" width="50" height="50" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none" /></g></svg></td><td><svg width="80" height="60"><g><rect x="10" y="10" width="60" height="40" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none" /></g></svg></td></tr><tr><td>group & old</td><td><svg width="60" height="80"><g><rect x="10" y="10" width="40" height="60" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none"/><rect x="10" y="10" width="40" height="60" stroke="#532476" stroke-width="2" stroke-dasharray="8 6" fill="none"/></g></svg></td><td><svg width="70" height="95"><g><rect x="10" y="10" width="50" height="50" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none" /><rect x="10" y="10" width="50" height="75" stroke="#532476" stroke-width="2" stroke-dasharray="8 6" fill="none" /></g></svg></td><td><svg width="80" height="110"><g><rect x="10" y="10" width="60" height="40" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none" /><rect x="10" y="10" width="60" height="90" stroke="#532476" stroke-width="2" stroke-dasharray="8 6" fill="none" /></g></svg></td></tr><tr><td>group & new</td><td><svg width="60" height="80"><g><rect x="10" y="10" width="40" height="60" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none"/><rect x="10" y="10" width="40" height="27" stroke="#275317" stroke-width="2" stroke-dasharray="8 6" fill="none"/></g></svg></td><td><svg width="70" height="70"><g><rect x="10" y="10" width="50" height="50" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none" /><rect x="10" y="10" width="50" height="33" stroke="#275317" stroke-width="2" stroke-dasharray="8 6" fill="none" /></g></svg></td><td><svg width="80" height="60"><g><rect x="10" y="10" width="60" height="40" stroke="#B08600" stroke-width="2" stroke-dasharray="2 4" fill="none" /><rect x="10" y="10" width="60" height="40" stroke="#275317" stroke-width="2" stroke-dasharray="8 6" fill="none" /></g></svg></td></tr><tr><td>group & old & new</td><td><svg width="60" height="80"><g><rect x="10" y="10" width="40" height="60" stroke="#B0860044" stroke-width="2" stroke-dasharray="2 4" fill="none"/><rect x="10" y="10" width="40" height="60" stroke="#532476" stroke-width="2" stroke-dasharray="8 6" fill="none"/><rect x="10" y="10" width="40" height="27" stroke="#27531744" stroke-width="2" stroke-dasharray="8 6" fill="none"/></g></svg></td><td><svg width="70" height="95"><g><rect x="10" y="10" width="50" height="50" stroke="#B0860088" stroke-width="2" stroke-dasharray="2 4" fill="none" /><rect x="10" y="10" width="50" height="75" stroke="#53247688" stroke-width="2" stroke-dasharray="8 6" fill="none"/><rect x="10" y="10" width="50" height="33" stroke="#27531788" stroke-width="2" stroke-dasharray="8 6" fill="none" /></g></svg></td><td><svg width="80" height="110"><g><rect x="10" y="10" width="60" height="40" stroke="#B0860044" stroke-width="2" stroke-dasharray="2 4" fill="none" /><rect x="10" y="10" width="60" height="90" stroke="#53247644" stroke-width="2" stroke-dasharray="8 6" fill="none"/><rect x="10" y="10" width="60" height="40" stroke="#275317" stroke-width="2" stroke-dasharray="8 6" fill="none" /></g></svg></td></tr></tbody></table></div>
 
-The next row demonstrates the transition of the old image (purple) as if it didn’t fade out. By default, the View Transition API sets the old image's width to match the group shown in the first row, but it doesn’t adjust the height to the group's height, as that would distort the image. Instead, it preserves the image's aspect ratio.
+The next row demonstrates the transition of the old image (purple) as if it didn't fade out. By default, the View Transition API sets the old image's width to match the group shown in the first row, but it doesn't adjust the height to the group's height, as that would distort the image. Instead, it preserves the image's aspect ratio.
 
 The browser generated CSS that is responsible for this trick is this:
 
@@ -57,7 +57,7 @@ With a horizontal writing mode, this means that the width of the images is equal
 
 In this example, as the group expands to 150% of its original width, the old image similarly scales up to 150% of its original height and is always larger than the group.
 
-The third row of the table illustrates the transition of the new image (in green) as if it didn’t fade in. Here again, the width is matched to the group's width while maintaining the aspect ratio. As a result, the image expands along with the group, but remains proportionally smaller. In this example, it never exceeding the size of the group, and reaches its full height only at the end of the animation.
+The third row of the table illustrates the transition of the new image (in green) as if it didn't fade in. Here again, the width is matched to the group's width while maintaining the aspect ratio. As a result, the image expands along with the group, but remains proportionally smaller. In this example, it never exceeding the size of the group, and reaches its full height only at the end of the animation.
 
 Finally the last rows shows the combined effect and also hints a bit on the fade in and out of the images.
 

src/content/docs/basics/examples.mdx

@@ -187,7 +187,7 @@ When it comes to group animations, text can be much trickier to work with compar
 
 ## Improved Text Morph Examples
 
-Now that you've seen the potential pitfalls of morphing text in animations, you’re probably eager to find out how to avoid these issues. Good news: there are some effective solutions you can apply to smooth out these rough edges and achieve cleaner transitions.
+Now that you've seen the potential pitfalls of morphing text in animations, you're probably eager to find out how to avoid these issues. Good news: there are some effective solutions you can apply to smooth out these rough edges and achieve cleaner transitions.
 
 <div title="Select a link from the table below">
   <Card title="Morphing text into text">

src/content/docs/basics/hide-and-seek/index.mdx

@@ -13,12 +13,12 @@ View transitions offer a unique capability: all images participating in the tran
 Here, we'll explore techniques to regain control over such scenarios, ensuring your transitions are visually consistent.
 
 :::note
-This page is more of a rough draft than I’d usually share, but I couldn’t wait to publish the [`overflow:scroll` demo](#improved-scrollable-list). For now, you’ll have to put up with the work-in-progress state, but I promise to refine and complete it soon!
+This page is more of a rough draft than I'd usually share, but I couldn't wait to publish the [`overflow:scroll` demo](#improved-scrollable-list). For now, you'll have to put up with the work-in-progress state, but I promise to refine and complete it soon!
 :::
 
 Moving [view transition images](/basics/pseudos/#old-and-new-image-pseudos) into the [view transition layer](/basics/pseudos/#rendering-pseudo-elements:~:text=own%20stacking%20context%2C%20known%20as%20the%20view%20transition%20layer) above all other elements can lead to effects that are surprising but generally also easy to understand and resolve.
 
-This site features both subtle and striking examples. I’ll guide you through some of them to highlight the issues and their solutions.
+This site features both subtle and striking examples. I'll guide you through some of them to highlight the issues and their solutions.
 
 ## Restoring Original Paint Order
 
@@ -109,9 +109,6 @@ Another powerful technique is clipping view transition images at their image pai
   </span>
 </div>
 
-
-Here’s a polished version of the text:
-
 This overlap can be avoided by clipping the old and new images at the edges of their image pair (or at the boundary of their transition group, which has the same position and dimensions):
 ```css
 ::view-transition-image-pair(main) {

src/content/docs/basics/pseudos.mdx

@@ -166,7 +166,7 @@ All these pseudo-elements only exist briefly during the transition effect, makin
 
 To make spotting pseudo-elements in the DOM easier, you can use the animation panel of the browser's Development Tools and press the pause button before you start the navigation. When you playback the animations, you can examine the DOM including the pseudo-elements.
 
-Alternatively, in the [Inspection Chamber](/tools/inspection-chamber/)'s Full Control Mode, time also freezes, allowing for detailed examination of the pseudo-elements. During an active view transition, click on a name in the Animation Groups panel to copy a command to your clipboard. You can then paste this command into the browser’s DevTools console for closer inspection.
+Alternatively, in the [Inspection Chamber](/tools/inspection-chamber/)'s Full Control Mode, time also freezes, allowing for detailed examination of the pseudo-elements. During an active view transition, click on a name in the Animation Groups panel to copy a command to your clipboard. You can then paste this command into the browser's DevTools console for closer inspection.
 
 ```console
 inspect(top.document.querySelector("#vtbag-main-frame").contentDocument.querySelector(":root"))
@@ -257,7 +257,7 @@ For same-document view transitions, the creation of old images is the first step
 
 The process for creating new images is similar to the creation of old image pseudos.  The key difference is that a `::view-transition-group` for a specific `view-transition-name` may already exist when the `::view-transition-new` image is created. In such cases, the new image is added to the existing `::view-transition-image-pair` of that group. The image pair will then contain both the old and new images, always in that order.
 
-If no existing group is found, a `new ::view-transition-image-pair` and `::view-transition-group` pseudo-element is created for the view-transition-name and added to the end of the `::view-transition` pseudo-element’s group list. This pair will then contain only the new image.
+If no existing group is found, a `new ::view-transition-image-pair` and `::view-transition-group` pseudo-element is created for the view-transition-name and added to the end of the `::view-transition` pseudo-element's group list. This pair will then contain only the new image.
 
 <div style="width: fit-content; margin: 0 auto">
 ```d2 width=600 sketch title="Addition of new images"

src/content/docs/basics/styling.mdx

@@ -39,7 +39,7 @@ It is not important to have much imagination when choosing names. They can be th
 At the start of the view transition, the **view transition names have to be unique** in the DOM. You can exempt an element from this uniqueness check by setting its (or one of its parent's) styling to `visibility: hidden` or `display: none`. For those elements, the browser won't generate pseudos.
 
 #### Auto-Generated Names
-The opposite problem to view transition names not being unique is that elements need to have _any_ `view-transition-name` assigned in order to trigger a group or morph animation. Often, the actual value doesn’t matter. What's important is simply having a value defined. For large numbers of elements, doing this manually can be cumbersome. You can automate it with JavaScript, as with the headings on this site or in [this demo](https://events-3bg.pages.dev/image-gallery/). However, it will also be possible to do this with only CSS, no JavaScript needed. [Check if your current browser already supports it](/basics/test-page/). And don't expect matching values on cross-document navigation. For that use case you need a JavaScript solution.
+The opposite problem to view transition names not being unique is that elements need to have _any_ `view-transition-name` assigned in order to trigger a group or morph animation. Often, the actual value doesn't matter. What's important is simply having a value defined. For large numbers of elements, doing this manually can be cumbersome. You can automate it with JavaScript, as with the headings on this site or in [this demo](https://events-3bg.pages.dev/image-gallery/). However, it will also be possible to do this with only CSS, no JavaScript needed. [Check if your current browser already supports it](/basics/test-page/). And don't expect matching values on cross-document navigation. For that use case you need a JavaScript solution.
 
 ```css
 .tile {

src/content/docs/tips/css.mdx

@@ -31,7 +31,7 @@ This might come as a surprise, but it's simple to explain: Besides defining view
 
 The reason for this is that the animations are triggered by the appearance of the view transition pseudo-elements on the `:root` element of the new page. At that moment, only the styles from the new page are available.
 
-While it seems logical, it’s still somewhat counterintuitive that the CSS for an exit animation for an element that only exists on the old page needs to be defined on the new page. But keep in mind, that it is not the old element that is animated, but the _image_ of the old element that has been inserted as a pseudo-element on the new page.
+While it seems logical, it's still somewhat counterintuitive that the CSS for an exit animation for an element that only exists on the old page needs to be defined on the new page. But keep in mind, that it is not the old element that is animated, but the _image_ of the old element that has been inserted as a pseudo-element on the new page.
 
 If you're accustomed to building with components, it might not always be clear which page a component will end up on and where the corresponding CSS should be placed. Additionally, the requirement that view transition names must be unique on a page makes you reconsider whether it's wise to hardcode view transition names inside reusable components. But that is not much different from using `id` attributes.
 

src/content/docs/tips/over-exposure.mdx

@@ -71,7 +71,7 @@ This effect is most noticeable during a cross-fade involving the same image. \
   />
 </div>
 
-This happens because, during the transition, both images become partially transparent. As a result, you can see part of the background through the old and new image. When cross-fading between two opaque images, you wouldn't expect the background to be visible, but that’s exactly what happens with the default settings. A bright background will make the image appear brighter, a dark background will darken it, and in the example above, a yellow background shines through as &hellip; yellow.
+This happens because, during the transition, both images become partially transparent. As a result, you can see part of the background through the old and new image. When cross-fading between two opaque images, you wouldn't expect the background to be visible, but that's exactly what happens with the default settings. A bright background will make the image appear brighter, a dark background will darken it, and in the example above, a yellow background shines through as &hellip; yellow.
 
 ## Set the Correct `mix-blend-mode`
 

src/content/docs/tips/pointer.mdx

@@ -1,6 +1,6 @@
 ---
 title: Pointer Flickering
-description: Your cursor can be a tricky shape-shifter during view transitions. Here’s how to keep it in line.
+description: Your cursor can be a tricky shape-shifter during view transitions. Here's how to keep it in line.
 head:
   - tag: meta
     attrs:
@@ -25,7 +25,7 @@ Setting the cursor on the pseudo-elements doesn't seem to work either. However,
 
 Admittedly, this approach works much better with same-document view transitions than with cross-document ones, where there still seems to be a brief moment where the default cursor appears.
 
-One implementation might involve using an event like pageswap and the viewTransition.finished promise to get the timing right. For Level 2 compliant browsers, however, there’s a simpler solution:
+One implementation might involve using an event like pageswap and the viewTransition.finished promise to get the timing right. For Level 2 compliant browsers, however, there's a simpler solution:
 ```css
 :active-view-transition {
   cursor: pointer;