[css-values-5] Change example in explainer to use preferred interpolate-size syntax.

Author: dbaron

css-values-5/calc-size-explainer.md

@@ -130,12 +130,32 @@ this would be a normal intermediate value at 70% of the way through an animation
 
 This is specified [in css-values-5](https://drafts.csswg.org/css-values-5/#calc-size).
 
+## `interpolate-size`
+
+The CSS `interpolate-size` property is an inherited property that takes two values:
+`numeric-only` (the initial value) and `allow-keywords`.
+It exists because there is enough web content that depends on
+intrinsic sizing keywords *not* animating
+that we need a way for pages to opt in to allowing these animations.
+
+Since it is an opt-in for compatibility,
+it is designed to make it easy to opt in the entire page.
+Therefore, it is an inherited property so that it can just be specified once on the root.
+It is also not part of any shorthands because being part of a shorthand
+would cause use of the shorthand to reset the opt-in.
+
+This is specified [in css-values-5](https://drafts.csswg.org/css-values-5/#interpolate-size).
+
 The following slightly more involved example shows
 (while using the separately proposed `::details-content` pseudo-element)
 the CSS needed to make a `<details>` element
 animate its `height` when it opens and closes:
 
 ```css
+:root {
+  interpolate-size: allow-keywords;
+}
+
 details::details-content {
   --open-close-duration: 500ms;
   height: 0;
@@ -144,26 +164,10 @@ details::details-content {
               content-visibility var(--open-close-duration) allow-discrete;
 }
 details[open]::details-content {
-  height: calc-size(max-content, size);
+  height: max-content;
 }
 ```
 
-This is specified [in css-values-5](https://drafts.csswg.org/css-values-5/#calc-size).
-
-## `interpolate-size`
-
-The CSS `interpolate-size` property is an inherited property that takes two values:
-`numeric-only` (the initial value) and `allow-keywords`.
-It exists because there is enough web content that depends on
-intrinsic sizing keywords *not* animating
-that we need a way for pages to opt in to allowing these animations.
-
-Since it is an opt-in for compatibility,
-it is designed to make it easy to opt in the entire page.
-Therefore, it is an inherited property so that it can just be specified once on the root.
-It is also not part of any shorthands because being part of a shorthand
-would cause use of the shorthand to reset the opt-in.
-
 ## Detailed design discussion
 
 Much of the design discussion happened in w3c/csswg-drafts#626