Assets for styles bar remove/reset feature

docs/02-Live Preview/03-styles-bar.md

@@ -199,10 +199,16 @@ Right-click any control inside a popover, like a number field, a color swatch, o
 
 **Learn more…** opens this documentation page in your browser, so you can read it whenever you need help.
 
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/styles-bar/remove-reset.mp4"
+/>
+
 ### Remove
 
 **Remove `<property>`** deletes the style from wherever it is actually written in your code. The line under it tells you where that is, either the CSS rule and its file, like `.card (style.css)`, or **this element's inline style**.
 
+![Remove in the right-click menu](../images/pro/styles-bar-remove-menu.png "Remove Font size, showing the CSS rule the value comes from")
+
 > For number fields, you can also just empty the field to remove the style, without opening the menu.
 
 For a CSS rule, it also shows how many elements that rule affects, so you know what else on the page changes when you delete it.
@@ -216,6 +222,8 @@ This action is disabled in two cases:
 
 **Reset to browser default** puts the property back to what the browser uses when no CSS sets it. The line under it shows exactly what gets added, for example `font-size: revert`.
 
+![Reset to browser default in the right-click menu](../images/pro/styles-bar-reset-default.png "Reset to browser default, showing the declaration it adds to the element")
+
 This action is always available. It writes on the element itself, so only that one element changes even when the value comes from a shared rule. It also works for values coming from a rule you cannot edit, like one in a library stylesheet.
 
 > This is not the same as the **Reset** button in the popover header. That one only undoes the changes you made since opening the popover. See [Reset and Undo](#reset-and-undo).
@@ -229,12 +237,16 @@ Phoenix Code shows a notice telling you where the value really lives, for exampl
 - **Remove**: deletes the style at that place, the same as the menu action above. This button only shows up when the style can be deleted on its own.
 - **Reset**: adds `revert` on this element only.
 
+![Notice shown when a field will not clear](../images/pro/styles-bar-field-not-clearing.png "The notice below the Styles Bar, with Remove and Reset buttons")
+
 ## When a Change Is Overridden
 
 Sometimes a more specific CSS rule wins over the rule you are editing, so your change has no visible effect. In that case, Phoenix Code automatically adds `!important` to your change to make it take effect.
 
 If the change is still overridden even after the `!important` property, Phoenix Code shows a notification with an **Apply anyway** button, which applies the style directly on the element so it always takes effect.
 
+![Notice shown when a change is overridden](../images/pro/styles-bar-overridden.png "The overridden notice below the Styles Bar, with the Apply anyway button")
+
 Read more about [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity) on MDN.
 
 ## Reset and Undo