diff --git a/css-mixins-1/Overview.bs b/css-mixins-1/Overview.bs
index d8a1de8e3dc..8751b5ac6bc 100644
--- a/css-mixins-1/Overview.bs
+++ b/css-mixins-1/Overview.bs
@@ -16,16 +16,41 @@ Default Highlight: css
 <pre class=link-defaults>
 spec:infra; type:dfn; text:list
 spec:infra; type:dfn; for:list; text:append
-spec:css-properties-values-api; type:dfn; text:supported syntax component name
-spec:css-properties-values-api; type:dfn; text:syntax component
-spec:css-syntax-3; type:dfn; text:declaration
-spec:css-syntax-3; type:dfn; text:descriptor;
-spec:css-values-4; type:dfn; text:keyword;
-spec:css-values-4; type:dfn; text:identifier;
+spec:css-cascade-5; type:dfn;
+	text:inherit
+	text:computed value
+	text:specified value
+spec:css-properties-values-api; type:dfn;
+	text:supported syntax component name
+	text:syntax component
+spec:css-syntax-3; type:dfn;
+	text:declaration
+	text:descriptor;
+spec:css-values-4; type:dfn;
+	text:keyword;
+	text:identifier;
 spec:css-values-5; type:dfn; text:invalid at computed-value time
 spec:cssom-1; type:dfn; text:specified order;
 </pre>
 
+<style>
+/* Put nice boxes around each algorithm. */
+[data-algorithm]:not(.heading) {
+	padding: .5em;
+	border: thin solid #ddd; border-radius: .5em;
+	margin: .5em calc(-0.5em - 1px);
+}
+[data-algorithm]:not(.heading) > :first-child {
+	margin-top: 0;
+}
+[data-algorithm]:not(.heading) > :last-child {
+	margin-bottom: 0;
+}
+[data-algorithm] [data-algorithm] {
+	margin: 1em 0;
+}
+</style>
+
 <!-- Big Text: intro
 
 ████ █    █▌ █████▌ ████▌   ███▌
@@ -75,7 +100,7 @@ Introduction {#intro}
 	a ''--shadow()'' [=custom function=] could be defined instead,
 	like:
 
-	<pre highlight=css>
+	<xmp highlight=css>
 	@function --shadow(--color <color> : var(--shadow-color)) {
 		result: 2px 2px var(--color, black);
 	}
@@ -86,7 +111,7 @@ Introduction {#intro}
 		/* or just */
 		box-shadow: --shadow(blue);
 	}
-	</pre>
+	</xmp>
 
 <!-- Big Text: @function
 
@@ -105,83 +130,97 @@ Defining Custom Functions {#defining-custom-functions}
 	A [=custom function=] can be thought of as an advanced [=custom property=],
 	which instead of being substituted by a single fixed value
 	provides its substitution value based on [=function parameters=]
-	and [=local variables=].
-
-	Whenever a declaration's value contains a reference to a [=custom function=]
-	(a <<dashed-function>>),
-	the value behaves as if it contained a ''var()'',
-	with the actual check against the property's grammar delayed until computed-value time.
+	and the value of [=custom properties=] at the point it's invoked.
+	Rather than the ''var()'' syntax that [=custom properties=] use for substitution,
+	[=custom functions=] are invoked by <<dashed-function>> syntax,
+	allowing additional values to be passed as arguments.
 
 	<div class='example'>
 		A simple [=custom function=] to negate a value can be defined as follows:
+
 		<pre class='lang-css'>
 		@function --negative(--value) {
 		  result: calc(-1 * var(--value));
 		}
 		</pre>
-		Then, that function can be referenced with <code>--negative()</code>
-		in some declaration (assuming <code>--gap</code> is defined elsewhere):
+
+		Then, that function can be referenced with ''--negative()''
+		in some declaration:
+
 		<pre class='lang-css'>
-		html { padding: --negative(var(--gap)); }
+		html {
+			--gap: 1em;
+			padding: --negative(var(--gap));
+			/* or by passing the value explicitly, like: */
+			padding: --negative(1em);
+		}
 		</pre>
 	</div>
 
-	A <dfn>custom function</dfn> consists of a name (<<function-name>>),
-	a list of [=function parameter|parameters=],
-	a function body,
-	and optionally a <dfn>return type</dfn> described by a [=syntax definition=].
+	<<dashed-function>>s are [=arbitrary substitution functions=],
+	like ''var()''.
+	Their presence in a property's value
+	causes it to be assumed valid at parse time,
+	and only evaluated and parsed at computed-value time,
+	after [=arbitrary substitution=] has occurred.
+
 
-	A <dfn>function parameter</dfn> consists of a name (<<custom-property-name>>);
-	optionally a <dfn>parameter type</dfn>, described by a [=syntax definition=];
-	and optionally a <dfn>default value</dfn>.
 
 The <dfn>@function</dfn> Rule {#function-rule}
 ----------------------------------------------
 
-The ''@function'' rule defines a [=custom function=],
-and its syntax is:
+The ''@function'' rule defines a <dfn>custom function</dfn>,
+and consists of a name (<<function-name>>),
+a list of [=function parameter|parameters=],
+a <dfn for="custom function">function body</dfn>,
+and optionally a <dfn for="custom function">return type</dfn> described by a [=syntax definition=].
 
-<pre class="prod def" nohighlight>
-&lt;@function> = @function <<function-name>> <<function-parameter-list>>? )
+A <dfn>function parameter</dfn> consists of a name (<<custom-property-name>>);
+optionally a <dfn>parameter type</dfn>, described by a [=syntax definition=];
+and optionally a <dfn>default value</dfn>.
+
+<pre class="prod" nohighlight>
+&lt;@function> = @function <<function-token>> <<function-parameter>>#? )
 	[ returns <<css-type>> ]?
 {
 	<<declaration-rule-list>>
 }
 
-<dfn><<function-parameter-list>></dfn> = <<function-parameter>>#
 <dfn><<function-parameter>></dfn> = <<custom-property-name>> <<css-type>>? [ : <<declaration-value>> ]?
 <dfn><<css-type>></dfn> = <<syntax-component>> | <<type()>>
 <dfn function lt="type()" for="@function">&lt;type()></dfn> = type( <<syntax>> )
 </pre>
 
-The <dfn><<function-name>></dfn> production
-is a <<function-token>>,
-with the additional restriction that it must start with two dashes
-(U+002D HYPHEN-MINUS).
+The <<function-token>> production
+must start with two dashes (U+002D HYPHEN-MINUS),
+similar to <<dashed-ident>>,
+or else the definition is invalid.
 
-The name of the resulting [=custom function=] is given by the <<function-name>>,
-the [=function parameters=] are optionally given by <<function-parameter-list>>,
-and the [=return type=] is optionally given by the <<css-type>> following the "returns" keyword.
+The name of the resulting [=custom function=] is given by the name of the <<function-token>>,
+the optional [=function parameters=]
+are given by the <<function-parameter>> values
+(defaulting to an empty set),
+and the optional [=custom function/return type=] is given by the <<css-type>> following the <css>returns</css> keyword
+(defaulting to ''*'').
 
 <div class='example'>
-	If the <<css-type>> of a [=function parameter=]
-	or [=custom function=] return value
+	If the <<css-type>> of a [=function parameter=] or [=custom function/return type=]
 	can be described by a single <<syntax-component>>,
-	then the ''type()'' function may be omitted:
+	then the ''type()'' function can be omitted:
 
-	<pre class='lang-css'>
-	@function --foo(--a &lt;length&gt;) { /* ... */ }
-	@function --foo(--a &lt;color&gt;) { /* ... */ }
-	@function --foo(--a &lt;length&gt;+) { /* ... */ }
-	</pre>
+	<xmp class='lang-css'>
+	@function --foo(--a <length>) { /* ... */ }
+	@function --foo(--a <color>) { /* ... */ }
+	@function --foo(--a <length>+) { /* ... */ }
+	</xmp>
 
 	However,
 	any <<syntax>> that requires a <<syntax-combinator>>
 	needs to be wrapped in the ''type()'' function:
 
-	<pre class='lang-css'>
-	@function --foo(--a type(&lt;number&gt; | &lt;percentage&gt;)) { /* ... */ }
-	</pre>
+	<xmp class='lang-css'>
+	@function --foo(--a type(<number> | <percentage>)) { /* ... */ }
+	</xmp>
 </div>
 
 
@@ -189,7 +228,7 @@ If more than one ''@function'' exists for a given name,
 then the rule in the stronger cascade layer wins,
 and rules defined later win within the same layer.
 
-The <<function-name>> of a ''@function'' rule is a [=tree-scoped name=].
+The name of a ''@function'' rule is a [=tree-scoped name=].
 
 If the <<function-parameter-list>>
 contains the same <<custom-property-name>> more than once,
@@ -202,7 +241,7 @@ Additionally, it accepts the following descriptors:
 	* The '@function/result' descriptor,
 		which determines the result of [=evaluating a custom function|evaluating the function=].
 	* [=Custom properties=],
-		acting like [=local variable=] descriptors.
+		providing [=local variables=].
 
 Unknown descriptors are invalid and ignored,
 but do not make the ''@function'' rule itself invalid.
@@ -220,7 +259,7 @@ Initial: n/a (see prose)
 The '@function/result' descriptor
 determines the result of [=evaluate a custom function|evaluating=]
 the [=custom function=] that is defined by a ''@function'' rule.
-Using [=locally substitute a var()|locally substituted=] ''var()'' functions,
+Using ''var()'' functions,
 it can reference [=function parameters=], [=local variables=],
 as well as other [=custom functions=] via <<dashed-function>>s.
 
@@ -228,6 +267,7 @@ The '@function/result' descriptor itself does not have a type,
 but its [=resolved local value|resolved=] value is type checked
 during the [=substitute a dashed function|substitution=] of a <<dashed-function>>.
 
+
 <!-- Big Text: using
 
 █▌  █▌  ███▌  ████ █    █▌  ███▌
@@ -245,6 +285,7 @@ Using Custom Functions {#using-custom-functions}
 Similar to how the value of a [=custom property=] can be substituted
 into the value of another property with ''var()'',
 the result of a [=custom function=] evaluation can be substituted
+into the value of a property
 with a <<dashed-function>>.
 
 A <dfn><<dashed-function>></dfn> is a [=functional notation=]
@@ -252,7 +293,7 @@ whose function name starts with two dashes (U+002D HYPHEN-MINUS).
 Its syntax is:
 
 <pre class="prod informative" nohighlight>
-	--*( <<declaration-value>># )
+	&lt;dashed-function> = --*( <<declaration-value>># )
 </pre>
 
 A <<dashed-function>> can only be used where ''var()'' is allowed.
@@ -263,11 +304,25 @@ At computed-value time,
 every <<dashed-function>> must be [=substitute a dashed function|substituted=]
 before finally being checked against the property's grammar.
 
-A ''var()'' function within a [=local variable=],
-or within the ''@function/result'' descriptor,
-invokes [=locally substitute a var()|local substitution=],
-rather than the computed-value based substitution
-described in [[!css-variables]].
+Note: Within the body of a [=custom function=],
+''var()'' functions might resolve differently
+than on the element the <<dashed-function>> is used on.
+See [[#evaluating-custom-functions]].
+
+A <<dashed-function>> is evaluated in some context:
+either in a property value on an element
+(or in a descriptor that is eventually treated like a property on an element,
+such as in ''@keyframes''),
+or in a descriptor in the [=function body=] of another [=custom function=]
+that is being applied to a "hypothetical" element.
+Either way, this provides a <dfn>calling context</dfn>,
+which contains the property or descriptor name containing the <<dashed-function>>,
+and the element (or "hypothetical" element) that property/descriptor is being applied to.
+
+As [=calling contexts=] are nested by <<dashed-function>> evaluations
+<em>inside of</em> [=custom functions=],
+a [=calling context's=] <dfn for="calling context">root element</dfn>
+is the real element at the root of the [=calling context=] stack.
 
 <div algorithm>
 	To <dfn>substitute a dashed function</dfn> in a value,
@@ -276,27 +331,25 @@ described in [[!css-variables]].
 		1. Let |function| be the result of dereferencing
 			the |dashed function|'s name as a [=tree-scoped reference=].
 			If no such name exists, return failure.
-		2. Let |dependencies| be an initially empty [=list=].
-		3. For every possible argument to ''var()'' (with no fallback)
-			that would lead to a valid [=locally substitute a var()|local substitution=]
-			in place of |dashed function|:
-			[=append=] a [=declaration=] to |dependencies|
-			with that argument as the name,
-			and the substitution value as the value.
-
-			Note: This exposes any [=custom properties=], [=local variables=],
-				and [=function parameters=] that are visible
-				in any given context
-				to [=custom functions=] invoked by that context.
-
-		4. [=substitute arbitrary substitution functions|Substitute=]
+		2. [=substitute arbitrary substitution functions|Substitute=]
 			any [=arbitrary substitution functions=]
-			within |dashed function|'s arguments.
+			within |dashed function|'s arguments,
+			then parse it as ''<<declaration-value>>#''
+			and let |arguments| be the result
+			(a comma-separated list of CSS values).
+		3. If |dashed function| is being substituted into a property on an element,
+			let |calling context| be a [=calling context=]
+			with that element and that property
+
+			Otherwise, it's being substituted into a descriptor
+			on a "hypothetical element",
+			while evaluating another [=custom function=].
+			Let |calling context| be a [=calling context=]
+			with that "hypothetical element" and that descriptor.
+
 		5. [=Evaluate a custom function=],
-			using |function|, |dashed function| and |dependencies|.
-		6. If failure was returned, return failure.
-		7. Otherwise,
-			replace the <<dashed-function>> with the [=equivalent token sequence=]
+			using |function|, |arguments|, and |calling context|,
+			and replace the <<dashed-function>> with the [=equivalent token sequence=]
 			of the value resulting from the evaluation.
 </div>
 
@@ -308,61 +361,119 @@ then the declaration containing the <<dashed-function>> becomes
 Evaluating Custom Functions {#evaluating-custom-functions}
 ----------------------------------------------------------
 
+[=Custom functions=] are evaluated by, essentially,
+pretending their function body is a [=style rule=]
+being applied to a hypothetical element,
+resolving styles as normal,
+and then returning the value of the '@function/result' descriptor on that hypothetical element.
+The hypothetical element "inherits" the values of all custom properties
+as if it were a child of its [=calling context=],
+with its [=function parameters=] overriding "inherited" custom properties of the same name.
+
 <div algorithm>
-	To <dfn>evaluate a custom function</dfn>,
-	with |function| being a [=custom function=],
-	|dashed function| being the <<dashed-function>> invoking that |function|,
-	and |dependencies| being a [=list=] of [=declarations=].
-
-	1. If the number of values in |dashed function|'s argument list
-		is greater than the number of values in |function|'s [=function parameter|parameters=],
-		return failure.
-	2. For each value |parameter| in |function|'s [=function parameter|parameters=],
-		let |argument| be the corresponding value in |dashed function|'s argument list
-		at the same index:
-		* If |argument| does not exist,
-			set |argument| to the [=guaranteed-invalid value=].
-		* Replace the value in |dashed function|'s argument list
-			with the result of [=resolving an argument=],
-			using |argument| as value,
-			and |parameter| as parameter.
-	3. Let |result| be the [=resolved local value=]
-		of the '@function/result' descriptor,
-		using |function|, |dashed function|, and |dependencies|.
-	4. If |function| has a [=return type=],
-		set |result| to the result of [=resolve a typed value|resolving a typed value=],
-		using |result| as the value,
-		and the [=syntax definition=] associated with the [=return type=] as the syntax.
-	5. If |result| is the [=guaranteed-invalid value=],
-		return failure.
-	6. Otherwise,
-		return |result|.
+	To <dfn>evaluate a custom function</dfn> |custom function|,
+	given a [=calling context=] |calling context|
+	and an [=argument list=] |arguments|,
+	returning a CSS value:
+
+	1. If the number of values in |arguments|
+		is greater than the number of [=function parameters=] in |custom function|,
+		return the [=guaranteed-invalid value=].
+	2. Let |registrations| be an initially empty set of [=custom property registrations=].
+	3. For each [=function parameter=] of |custom function|,
+		create a [=custom property registration=]
+		with the parameter's name,
+		a syntax of the [=parameter type=],
+		an inherit flag of "true",
+		and no initial value.
+		Add the registration to |registrations|.
+	4. If |custom function| has a [=custom function/return type=],
+		create a [=custom property registration=]
+		with the name "return"
+		(violating the usual rules for what a registration's name can be),
+		a syntax of the [=custom function/return type=],
+		an inherit flag of "false",
+		and no initial value.
+		Add the registration to |registrations|.
+	5. Let |argument rule| be an initially empty [=style rule=].
+	6. For each [=function parameter=] of |custom function|:
+		1. Let |arg value| be the value of the corresponding argument in |arguments|,
+			or the [=guaranteed-invalid value=] if there is no corresponding argument.
+		2. Let |default value| be the parameter's [=default value=].
+		3. Add a [=custom property=] to |argument rule|
+			with a name of the parameter's name,
+			and a value of ''first-valid(|arg value|, |default value|)''.
+	7. [=Resolve function styles=] using |argument styles|, |registrations|, and |calling context|.
+		Let |argument styles| be the result.
+	8. Let |body rule| be the [=function body=] of |custom function|,
+		as a [=style rule=].
+	9. For each [=custom property registration=] of |registrations|,
+		set its initial value
+		to the corresponding value in |argument styles|,
+		and prepend a [=custom property=] to |body rule|
+		with the property name and value in |argument styles|.
+	10. [=Resolve function styles=] using |body rule|, |registrations|, and |calling context|.
+		Let |body styles| be the result.
+	11. Return the value of the '@function/result' property in |body styles|.
 </div>
 
 <div algorithm>
-	To <dfn>resolve an argument</dfn>,
-	with value |value|,
-	and [=function parameter|parameter=] |parameter|:
-
-	1. If |value| is not the [=guaranteed-invalid value=],
-		and |parameter| has a [=parameter type|type=],
-		set |value| to the result of [=resolve a typed value|resolving a typed value=]
-		using |value| as the value,
-		and the [=syntax definition=] associated with |parameter|'s type as the syntax.
-		<span class=note>This step may cause |value| to become [=guaranteed-invalid value|guaranteed-invalid=].</span>
-	2. If |value| is the [=guaranteed-invalid value=],
-		and |parameter| has a [=default value=],
-		set |value| to one of the following:
-		<dl class="switch">
-			:   If |parameter| has a [=parameter type|type=]
-			::  The result of [=resolve a typed value|resolving a typed value=]
-				using the |parameter|'s [=default value=] as the value,
-				and the [=syntax definition=] associated with |parameter|'s type as the syntax.
-
-			:   Otherwise
-			::  The |parameter|'s [=default value=].
-		</dl>
-	3. Return |value|.
+	To <dfn>resolve function styles</dfn>,
+	given a style rule |rule|,
+	a set of [=custom property registrations=] |registrations|,
+	and a [=calling context=] |calling context|,
+	returning a set of [=computed value|computed=] styles:
+
+	1. Create a "hypothetical element" |el|
+		that acts as a child of |calling context|'s element.
+		|el| is [=featureless=],
+		and only [=custom properties=]
+		and the '@function/result' descriptor apply to it.
+	2. Apply |rule| to |el| to the [=specified style=] stage,
+		with the following changes:
+
+		* Only the [=custom property registrations=] in |registrations| are visible;
+			all other [=custom properties=] are treated as unregistered.
+
+		* The [=inherited value=] of |calling context|'s property
+			is the [=guaranteed-invalid value=].
+
+		* On custom properties,
+			the [=CSS-wide keywords=] ''initial'' and ''inherit'' have their usual effect;
+			all other [=CSS-wide keywords=] resolve to the [=guaranteed-invalid value=].
+
+			Note: ''initial'' references the [=custom property registration=]
+			created from the [=function parameters=],
+			letting you "reset" a property to the passed value.
+			''inherit'' inherits from the [=calling context=]'s element.\
+
+			On '@function/result',
+			all [=CSS-wide keywords=] are left unresolved.
+
+			Note: ''result: inherit'', for example,
+			will cause the <<dashed-function>> to <em>evaluate to</em> the ''inherit'' keyword,
+			similar to ''var(--unknown, inherit)''.
+
+	3. Determine the [=computed value=] of all [=custom properties=]
+		and the '@function/result' "property" on |el|,
+		as defined in [[css-properties-values-api#calculation-of-computed-values]],
+		with changes from the previous step,
+		and the following:
+
+		* Aside from references to [=custom properties=]
+			(which use the values on |el| as normal)
+			and numbers/percentages
+			(which are left unresolved in custom properties, as normal),
+			all values which would normally refer to the element being styled
+			instead refer to |calling context|'s [=calling context/root element=].
+
+			Note: For example, ''attr()'' in a property,
+			or ''@container'' queries in the rule.
+
+	4. Return |el|'s styles.
+
+		Note: Only [=custom properties=] and the '@function/result' descriptor
+		will be used from these styles.
 </div>
 
 <div class='example'>
@@ -380,84 +491,6 @@ Evaluating Custom Functions {#evaluating-custom-functions}
 	</pre>
 </div>
 
-<div algorithm>
-	To <dfn>resolve a typed value</dfn>,
-	with value |value|,
-	and [=syntax definition=] |syntax|:
-
-	1. If |value| is the [=guaranteed-invalid value=],
-		return |value|.
-	2. <a href="https://drafts.css-houdini.org/css-properties-values-api-1/#calculation-of-computed-values">Compute</a>
-		|value| as if it were the value associated with a [=registered custom property=]
-		whose [=syntax definition=] is |syntax|.
-	3. If this would lead to a declaration being [=invalid at computed-value time=],
-		return the [=guaranteed-invalid value=].
-	4. Otherwise, return that value.
-</div>
-
-Parameters and Locals {#parameters}
------------------------------------
-
-	The [=function parameters=] of a [=custom function=]
-	are available for [=locally substitute a var()|local substitution=]
-	as if they were declared as [=local variables=]
-	at the start of the ''@function'' rule body.
-
-	Note: A [=local variable=] with the same name
-		as a [=function parameter=] is allowed,
-		but will make the parameter unreachable
-		for [=locally substitute a var()|substitution=]
-
-	A <dfn>local variable</dfn>
-	is a custom property defined with the body of a [=custom function=].
-	It is visible within the function where it is defined,
-	and within other [=custom functions=] invoked by that function.
-
-<div algorithm>
-	To <dfn>locally substitute a var()</dfn> within a value,
-	with |function| being a [=custom function=],
-	|dashed function| being the <<dashed-function>> invoking that |function|,
-	and |dependencies| being a [=list=] of [=declarations=]:
-
-	1. Let |substitution value| be one of the following options,
-		depending on the [=custom property=] named in the first argument of the ''var()'' function:
-		<dl class="switch">
-
-			:   If the [=custom property=] name matches a [=local variable=] within |function|
-			::  The [=resolved local value=] of that [=local variable=].
-
-			:   Otherwise, if the [=custom property=] name matches a [=function parameter|parameter=] within |function|
-			::  The corresponding argument value within the |dashed function|.
-
-			:   Otherwise, if the [=custom property=] name matches the name
-				of a [=declaration=] within |dependencies|
-			::  The corresponding value of that [=declaration=].
-
-			:   Otherwise
-			::  The [=guaranteed-invalid value=].
-		</dl>
-
-	2. If |substitution value| is not the [=guaranteed-invalid value=],
-		replace the ''var()'' function by that value.
-
-	3. Otherwise, if the ''var()'' function has a fallback value as its second argument,
-		replace the ''var()'' function by the [=resolved local value|locally resolved=] fallback value.
-
-	4. Otherwise, return failure.
-</div>
-
-A <dfn>resolved local value</dfn> is the value of a [=local variable=] or [=descriptor=], except:
-
-* Any ''var()'' functions are replaced by [=locally substitute a var()|local substitution=].
-* Any <<dashed-function>>s are replaced by [=substitute a dashed function|dashed function substitution=].
-* Any [=arbitrary substitution functions=]
-	other than ''var()'' and <<dashed-function>>s
-	are substituted normally.
-
-If any substitution algorithm returns failure,
-then the [=resolved local value=] of a [=local variable=]
-is the [=guaranteed-invalid value=].
-
 <div class='example'>
 	A [=custom function=] can access [=local variables=]
 	and [=function parameters=]
@@ -494,7 +527,7 @@ is the [=guaranteed-invalid value=].
 Cycles {#cycles}
 ----------------
 
-The ''result'' descriptor and [=local variables=]
+The ''@function/result'' descriptor and [=local variables=]
 within a [=custom function=]
 may reference other [=custom functions=] or [=custom properties=],
 and may therefore create [[css-variables-1#cycles|cycles]].
@@ -640,10 +673,10 @@ or acting as if nothing exists at that location otherwise.
 		}
 	}
 	</pre>
+
 	The value of the '@function/result' descriptor
 	is <code>20px</code> if the media query's condition is true,
 	and <code>16px</code> otherwise.
-	</pre>
 </div>
 
 <div class='example'>
@@ -657,9 +690,9 @@ or acting as if nothing exists at that location otherwise.
 		result: 16px;
 	}
 	</pre>
+
 	The value of the '@function/result' descriptor
 	is always <code>16px</code> in the above example.
-	</pre>
 </div>
 
 <div class='example'>