Fix broken image on design mode page and other minor docs formatting issues (#223)

* Fix broken image URL on Design Mode page

* Fix URL in embedded Simulate Mode machine

* Add embedded machine to delayed transitions docs

* Improve subheadings inside admonition boxes

* Fix broken formatting on system page

Author: laurakalbag

docs/delayed-transitions.mdx

@@ -45,16 +45,10 @@ Watch our [“Delayed (after) transitions” video on YouTube](https://www.youtu
   link="#delays"
 />
 
-<p>
-  <ThemedImage
-    alt="Video player state machine containing closed and opened states. On the Play event, the Closed state transitions to the Opened state. The Opened state invokes a startVideo actor and has a description of “The video player should be in full-screen mode.” The Opened state contains Playing and Paused states, which are transitioned between using the Pause and Play events. There’s a Stop event from the Opened state that transitions to the final state of Stopped. There’s a delayed transition from the Stopped state back to the Closed state after 5 seconds."
-    sources={{
-      light:
-        '/assets/transitions-and-events/delayed-transitions/delayed-transitions.png',
-      dark: '/assets/transitions-and-events/delayed-transitions/delayed-transitions-dm.png',
-    }}
-  />
-</p>
+<EmbedMachine
+  name="Delayed (after) transitions"
+  embedURL="https://stately.ai/registry/editor/embed/1c962847-2829-45e2-b6fc-5f42fa3f8b6b?machineId=5671366b-05cf-43f5-a09a-b88373ea27c1"
+/>
 
 [View this machine in Stately Studio](https://stately.ai/registry/editor/e13bef2b-bb13-4465-96ac-0bc25340688e?machineId=5671366b-05cf-43f5-a09a-b88373ea27c1).
 

docs/design-mode.mdx

@@ -11,8 +11,8 @@ You can add new [states](states.mdx) by double-clicking anywhere on the canvas,
   <ThemedImage
     alt="Numbered screenshot of Stately editor’s Design mode features. Described by list below."
     sources={{
-      light: '/design-mode/design-mode-signed-in.png',
-      dark: '/design-mode/design-mode-signed-in-dm.png',
+      light: '/design-mode-signed-in.png',
+      dark: '/design-mode-signed-in-dm.png',
     }}
   />
 </p>

docs/simulate-mode.mdx

@@ -5,7 +5,10 @@ description: 'Tour the features in Stately editor’s Simulate mode, including a
 
 You can simulate your machine as if it were live in Simulate Mode. Your machine will start in the initial state, and any possible events that can be triggered are highlighted in blue.
 
-<EmbedMachine name="Simulate mode" embedURL="https://stately.ai/registry/editor/embed/9e7f6b1e-416a-491f-a4a0-bba386a02d8d?machineId=e5fbd908-42af-440f-8d11-91ca16a4fbda&mode=Simulate"/>
+<EmbedMachine
+  name="Simulate mode"
+  embedURL="https://stately.ai/registry/editor/embed/c447d996-cef1-421d-a422-8be695668764?machineId=e5fbd908-42af-440f-8d11-91ca16a4fbda&mode=Simulate"
+/>
 
 ## Simulate events
 
@@ -19,7 +22,7 @@ Simulate mode is disabled if your machine contains errors. States and events wit
 
 ### Eventless (always) events
 
-Eventless (always) events will be triggered instantly upon entering their source state unless they’re guarded with a condition. 
+Eventless (always) events will be triggered instantly upon entering their source state unless they’re guarded with a condition.
 
 ### Delayed (after) events
 
@@ -35,4 +38,4 @@ Use <RefreshCcw size={12}/> **Reset** to return to the initial state and clear t
 
 [Live simulation mode](live-simulation.mdx) ([pro feature](studio-pro-plan.mdx)) helps you share your simulated machine with your team without screen sharing or screenshots.
 
-:::
+:::

docs/system.mdx

@@ -35,7 +35,11 @@ actor.start();
 
 This is useful for actors in the system to be able send events to the root actor.
 
-:::studio Coming soon… systems in Stately Studio’s editor 🤫 :::
+:::studio
+
+Coming soon… systems in Stately Studio’s editor 🤫
+
+:::
 
 ## Actor registration
 

src/css/custom.css

@@ -1432,6 +1432,14 @@ details summary::before {
   margin-bottom: calc(var(--ifm-alert-padding-vertical) * 0.5);
 }
 
+.alert:not(details) * + h2,
+.alert:not(details) * + h3,
+.alert:not(details) * + h4,
+.alert:not(details) * + h5,
+.alert:not(details) * + h6 {
+  margin-top: calc(var(--ifm-alert-padding-vertical) * 1.5);
+}
+
 .alert:not(details) a {
   color: inherit;
 }