Update explainer with feedback from readers (#128)

* Feedback from group

* Update css-spatial/explainer.md

Co-authored-by: fantasai <fantasai.bugs@inkedblade.net>

* Update css-spatial/explainer.md

Co-authored-by: fantasai <fantasai.bugs@inkedblade.net>

* Ellipsis and whitespace

---------

Co-authored-by: fantasai <fantasai.bugs@inkedblade.net>

Author: AdaRoseCannon

css-spatial/explainer.md

@@ -120,9 +120,11 @@ There are two types of spatial containers:
   </figure>
 
 - **`portal`**: Creates a *front spatial context* just like `spatial: page`,
-   but also creates a *back spatial context* creating space behind the element,
+  but also creates a *back spatial context* creating space behind the element,
   connected through a “portal” that coincides with the element's border rectangle.
   The portal acts like a window into this infinite, independent 3D world behind the page.
+  The opaque backdrop of this world is taken from the 'background-color' property,
+  and it is lit as specified by a new 'environment-map' feature.
   Good for product viewers, 3D scenes, and immersive content.
 
   <figure style="max-width: 200px;">
@@ -157,9 +159,7 @@ content is otherwise laid out as normal.
 ```
 
 The `.viewer` element cuts a window into its own 3D space.
-The `<figure>` element is taken out of flow and positioned within that world.
-The `<h2>` renders over the portal it is level with the web page,
-with the 3D content visible behind it.
+The `<h2>` is pushed 1cm into the portal.
 
 ### Raising Content Off the Page: Spatial Relative Positioning
 
@@ -205,10 +205,14 @@ without clipping content that would exceed it.
 }
 ```
 ```html
-<div class="card">
-    <img class="thumbnail" src="photo.jpg" alt="Photo">
-    <p>A raised card effect</p>
+…
+<div class="tab active">
+    <div class="card">
+        <img class="thumbnail" src="photo.jpg" alt="Photo">
+        <p>A raised card effect</p>
+    </div>
 </div>
+…
 ```
 
 When the user hovers over the card,