From 5ea9aa07134853628df928331e3b0cdc7dacae23 Mon Sep 17 00:00:00 2001
From: Tab Atkins-Bittner <jackalmage@gmail.com>
Date: Mon, 11 Mar 2024 13:47:34 -0700
Subject: [PATCH] [css-anchor-position] Add 'anchor-scope'. #9045

---
 css-anchor-position-1/Overview.bs | 263 ++++++++++++++++++++----------
 1 file changed, 180 insertions(+), 83 deletions(-)

diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index 33604c441a0d..72c1dc1b97e1 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -103,13 +103,13 @@ Determining the Anchor {#determining}
 
 <!-- Big Text: a-name
 
- ███▌        █    █▌  ███▌  █     █ █████▌
-▐█ ▐█        █▌   █▌ ▐█ ▐█  ██   ██ █▌
-█▌  █▌       ██▌  █▌ █▌  █▌ █▌█ █▐█ █▌
+ ███▌		█	█▌  ███▌  █	 █ █████▌
+▐█ ▐█		█▌   █▌ ▐█ ▐█  ██   ██ █▌
+█▌  █▌	   ██▌  █▌ █▌  █▌ █▌█ █▐█ █▌
 █▌  █▌ ████▌ █▌▐█ █▌ █▌  █▌ █▌ █ ▐█ ████
-█████▌       █▌  ██▌ █████▌ █▌   ▐█ █▌
-█▌  █▌       █▌   █▌ █▌  █▌ █▌   ▐█ █▌
-█▌  █▌       █▌   ▐▌ █▌  █▌ █▌   ▐█ █████▌
+█████▌	   █▌  ██▌ █████▌ █▌   ▐█ █▌
+█▌  █▌	   █▌   █▌ █▌  █▌ █▌   ▐█ █▌
+█▌  █▌	   █▌   ▐▌ █▌  █▌ █▌   ▐█ █████▌
 -->
 
 Creating an Anchor: the 'anchor-name' property {#name}
@@ -177,6 +177,98 @@ unless otherwise specified.
 Note: Without this, these [=pseudo-elements=], which are often inaccessible
 by other specifications, cannot be positioned with [=implicit anchor elements=].
 
+<!-- Big Text: a-scope
+
+ ███▌		 ███▌   ███▌   ███▌  ████▌  █████▌
+▐█ ▐█		█▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌ █▌
+█▌  █▌	   █▌	 █▌	 █▌  █▌ █▌  █▌ █▌
+█▌  █▌ ████▌  ███▌  █▌	 █▌  █▌ ████▌  ████
+█████▌		   █▌ █▌	 █▌  █▌ █▌	 █▌
+█▌  █▌	   █▌  █▌ █▌  █▌ █▌  █▌ █▌	 █▌
+█▌  █▌		███▌   ███▌   ███▌  █▌	 █████▌
+-->
+
+<h3 id='anchor-scope'>
+Scoping Anchor Names: the 'anchor-scope' property</h3>
+
+<pre class=propdef>
+Name: anchor-scope
+Value: none | all | <<dashed-ident>>#
+Initial: none
+Applies to: all elements
+Inherited: no
+Animation type: discrete
+Computed value: as specified
+</pre>
+
+This property scopes the specified [=anchor names=],
+and lookups for these [=anchor names=],
+to this element's subtree.
+See [[#determining]].
+
+Values have the following meanings:
+
+<dl dfn-for="anchor-scope" dfn-type=value>
+	<dt><dfn>none</dfn>
+	<dd>
+		No changes in [=anchor name=] scope.
+
+	<dt><dfn>all</dfn>
+	<dd>
+		Specifies that all [=anchor names=] defined by this element or its descendants--
+		whose scope is not already limited by a descendant using 'anchor-scope'--
+		to be in scope only for this element's descendants;
+		and limits descendants to only match [=anchor names=]
+		to [=anchor elements=] within this subtree.
+
+	<dt><dfn><<dashed-ident>></dfn>
+	<dd>
+		Specifies that a matching [=anchor name=] defined by this element or its descendants--
+		whose scope is not already limited by a descendant using 'anchor-scope'--
+		to be in scope only for this element's descendants;
+		and limits descendants to only match these [=anchor names=]
+		to [=anchor elements=] within this subtree.
+</dl>
+
+This property has no effect on [=implicit anchors=].
+
+<div class=example>
+	When a design pattern is re-used,
+	'anchor-scope' can prevent naming clashes across identical components.
+	For example, if a list contains positioned elements in each list item,
+	which want to position themselves relative to the list item they're in,
+
+
+	<pre class=lang-css>
+		li {
+			anchor-name: --list-item;
+			anchor-scope: --list-item;
+		}
+		li .positioned {
+			position: absolute;
+			anchor-default: --list-item;
+			inset-area: inline-start;
+		}
+	</pre>
+
+	Without 'anchor-scope',
+	all of the <{li}> elements would be visible
+	to all of the positioned elements,
+	and so they'd all positioned themselves relative to the <em>final</em> <{li}>,
+	stacking up on top of each other.
+</div>
+
+<!-- Big Text: lookup
+
+█▌	 ███▌   ███▌  █▌  █▌ █▌  █▌ ████▌
+█▌	█▌  █▌ █▌  █▌ █▌ █▌  █▌  █▌ █▌  █▌
+█▌	█▌  █▌ █▌  █▌ █▌█▌   █▌  █▌ █▌  █▌
+█▌	█▌  █▌ █▌  █▌ ██	 █▌  █▌ ████▌
+█▌	█▌  █▌ █▌  █▌ █▌█▌   █▌  █▌ █▌
+█▌	█▌  █▌ █▌  █▌ █▌ █▌  █▌  █▌ █▌
+█████  ███▌   ███▌  █▌  █▌  ███▌  █▌
+-->
+
 Finding an Anchor {#target}
 -----------------
 
@@ -226,6 +318,11 @@ or nothing (a missing specifier).
 		If no element satisfies these conditions,
 		return nothing.
 
+		Note: 'anchor-scope' can restrict the visibility
+		of certain [=anchor names=],
+		which can affect what elements can be [=anchor elements=]
+		for a given lookup.
+
 	Note: The general rule captured by these conditions
 	is that |el| must be fully laid out
 	before |query el| is laid out.
@@ -277,13 +374,13 @@ or nothing (a missing specifier).
 
 <!-- Big Text: default
 
-████▌  █████▌ █████▌  ███▌  █▌  █▌ █▌    █████▌
-█▌  █▌ █▌     █▌     ▐█ ▐█  █▌  █▌ █▌      █▌
-█▌  █▌ █▌     █▌     █▌  █▌ █▌  █▌ █▌      █▌
-█▌  █▌ ████   ████   █▌  █▌ █▌  █▌ █▌      █▌
-█▌  █▌ █▌     █▌     █████▌ █▌  █▌ █▌      █▌
-█▌  █▌ █▌     █▌     █▌  █▌ █▌  █▌ █▌      █▌
-████▌  █████▌ █▌     █▌  █▌  ███▌  █████   █▌
+████▌  █████▌ █████▌  ███▌  █▌  █▌ █▌	█████▌
+█▌  █▌ █▌	 █▌	 ▐█ ▐█  █▌  █▌ █▌	  █▌
+█▌  █▌ █▌	 █▌	 █▌  █▌ █▌  █▌ █▌	  █▌
+█▌  █▌ ████   ████   █▌  █▌ █▌  █▌ █▌	  █▌
+█▌  █▌ █▌	 █▌	 █████▌ █▌  █▌ █▌	  █▌
+█▌  █▌ █▌	 █▌	 █▌  █▌ █▌  █▌ █▌	  █▌
+████▌  █████▌ █▌	 █▌  █▌  ███▌  █████   █▌
 -->
 
 <h3 id=anchor-default>
@@ -350,13 +447,13 @@ to explicitly refer to edges of an [=anchor element=].
 
 <!-- Big Text: inset-area
 
-████ █    █▌  ███▌  █████▌ █████▌        ███▌  ████▌  █████▌  ███▌
- ▐▌  █▌   █▌ █▌  █▌ █▌       █▌         ▐█ ▐█  █▌  █▌ █▌     ▐█ ▐█
- ▐▌  ██▌  █▌ █▌     █▌       █▌         █▌  █▌ █▌  █▌ █▌     █▌  █▌
- ▐▌  █▌▐█ █▌  ███▌  ████     █▌   ████▌ █▌  █▌ ████▌  ████   █▌  █▌
- ▐▌  █▌  ██▌     █▌ █▌       █▌         █████▌ █▌▐█   █▌     █████▌
- ▐▌  █▌   █▌ █▌  █▌ █▌       █▌         █▌  █▌ █▌ ▐█  █▌     █▌  █▌
-████ █▌   ▐▌  ███▌  █████▌   █▌         █▌  █▌ █▌  █▌ █████▌ █▌  █▌
+████ █	█▌  ███▌  █████▌ █████▌		███▌  ████▌  █████▌  ███▌
+ ▐▌  █▌   █▌ █▌  █▌ █▌	   █▌		 ▐█ ▐█  █▌  █▌ █▌	 ▐█ ▐█
+ ▐▌  ██▌  █▌ █▌	 █▌	   █▌		 █▌  █▌ █▌  █▌ █▌	 █▌  █▌
+ ▐▌  █▌▐█ █▌  ███▌  ████	 █▌   ████▌ █▌  █▌ ████▌  ████   █▌  █▌
+ ▐▌  █▌  ██▌	 █▌ █▌	   █▌		 █████▌ █▌▐█   █▌	 █████▌
+ ▐▌  █▌   █▌ █▌  █▌ █▌	   █▌		 █▌  █▌ █▌ ▐█  █▌	 █▌  █▌
+████ █▌   ▐▌  ███▌  █████▌   █▌		 █▌  █▌ █▌  █▌ █████▌ █▌  █▌
 -->
 
 The 'inset-area' Property {#inset-area}
@@ -553,11 +650,11 @@ some of the [=inset-area grid's=] rows or columns can be zero-sized.
 
 <!-- Big Text: anchor()
 
- ███▌  █    █▌  ███▌  █▌  █▌  ███▌  ████▌    ██ ██
+ ███▌  █	█▌  ███▌  █▌  █▌  ███▌  ████▌	██ ██
 ▐█ ▐█  █▌   █▌ █▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌  █▌   ▐█
-█▌  █▌ ██▌  █▌ █▌     █▌  █▌ █▌  █▌ █▌  █▌ █▌     ▐█
-█▌  █▌ █▌▐█ █▌ █▌     █████▌ █▌  █▌ ████▌  █▌     ▐█
-█████▌ █▌  ██▌ █▌     █▌  █▌ █▌  █▌ █▌▐█   █▌     ▐█
+█▌  █▌ ██▌  █▌ █▌	 █▌  █▌ █▌  █▌ █▌  █▌ █▌	 ▐█
+█▌  █▌ █▌▐█ █▌ █▌	 █████▌ █▌  █▌ ████▌  █▌	 ▐█
+█████▌ █▌  ██▌ █▌	 █▌  █▌ █▌  █▌ █▌▐█   █▌	 ▐█
 █▌  █▌ █▌   █▌ █▌  █▌ █▌  █▌ █▌  █▌ █▌ ▐█   █▌   ▐█
 █▌  █▌ █▌   ▐▌  ███▌  █▌  █▌  ███▌  █▌  █▌   ██ ██
 -->
@@ -575,9 +672,9 @@ The ''anchor()'' function resolves to a <<length>>.
 	&lt;anchor()> = anchor( <<anchor-element>>? <<anchor-side>>, <<length-percentage>>? )
 	<dfn><<anchor-element>></dfn> = <<dashed-ident>> | implicit
 	<dfn><<anchor-side>></dfn> = inside | outside
-	           | top | left | right | bottom
-	           | start | end | self-start | self-end
-	           | <<percentage>> | center
+			   | top | left | right | bottom
+			   | start | end | self-start | self-end
+			   | <<percentage>> | center
 </pre>
 
 The ''anchor()'' function has three arguments:
@@ -738,13 +835,13 @@ as if by an additional ''translate()'' transform.
 
 <!-- Big Text: a-center
 
- ███▌         ███▌  █████▌ █    █▌ █████▌ █████▌ ████▌
-▐█ ▐█        █▌  █▌ █▌     █▌   █▌   █▌   █▌     █▌  █▌
-█▌  █▌       █▌     █▌     ██▌  █▌   █▌   █▌     █▌  █▌
-█▌  █▌ ████▌ █▌     ████   █▌▐█ █▌   █▌   ████   ████▌
-█████▌       █▌     █▌     █▌  ██▌   █▌   █▌     █▌▐█
-█▌  █▌       █▌  █▌ █▌     █▌   █▌   █▌   █▌     █▌ ▐█
-█▌  █▌        ███▌  █████▌ █▌   ▐▌   █▌   █████▌ █▌  █▌
+ ███▌		 ███▌  █████▌ █	█▌ █████▌ █████▌ ████▌
+▐█ ▐█		█▌  █▌ █▌	 █▌   █▌   █▌   █▌	 █▌  █▌
+█▌  █▌	   █▌	 █▌	 ██▌  █▌   █▌   █▌	 █▌  █▌
+█▌  █▌ ████▌ █▌	 ████   █▌▐█ █▌   █▌   ████   ████▌
+█████▌	   █▌	 █▌	 █▌  ██▌   █▌   █▌	 █▌▐█
+█▌  █▌	   █▌  █▌ █▌	 █▌   █▌   █▌   █▌	 █▌ ▐█
+█▌  █▌		███▌  █████▌ █▌   ▐▌   █▌   █████▌ █▌  █▌
 -->
 
 Centering on the Anchor: the ''anchor-center'' value {#anchor-center}
@@ -788,12 +885,12 @@ and has no additional effect on how [=inset properties=] resolve.
 
 <!-- Big Text: scroll
 
- ███▌   ███▌  ████▌   ███▌  █▌    █▌
-█▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌ █▌    █▌
-█▌     █▌     █▌  █▌ █▌  █▌ █▌    █▌
- ███▌  █▌     ████▌  █▌  █▌ █▌    █▌
-    █▌ █▌     █▌▐█   █▌  █▌ █▌    █▌
-█▌  █▌ █▌  █▌ █▌ ▐█  █▌  █▌ █▌    █▌
+ ███▌   ███▌  ████▌   ███▌  █▌	█▌
+█▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌ █▌	█▌
+█▌	 █▌	 █▌  █▌ █▌  █▌ █▌	█▌
+ ███▌  █▌	 ████▌  █▌  █▌ █▌	█▌
+	█▌ █▌	 █▌▐█   █▌  █▌ █▌	█▌
+█▌  █▌ █▌  █▌ █▌ ▐█  █▌  █▌ █▌	█▌
  ███▌   ███▌  █▌  █▌  ███▌  █████ █████
 -->
 
@@ -882,13 +979,13 @@ it resolves to ''0px''.
 
 <!-- Big Text: a-size()
 
- ███▌         ███▌  ████ █████▌ █████▌   ██ ██
-▐█ ▐█        █▌  █▌  ▐▌      ▐▌ █▌      █▌   ▐█
-█▌  █▌       █▌      ▐▌     ▐▌  █▌     █▌     ▐█
-█▌  █▌ ████▌  ███▌   ▐▌    █▌   ████   █▌     ▐█
-█████▌           █▌  ▐▌   █     █▌     █▌     ▐█
-█▌  █▌       █▌  █▌  ▐▌  █      █▌      █▌   ▐█
-█▌  █▌        ███▌  ████ █████▌ █████▌   ██ ██
+ ███▌		 ███▌  ████ █████▌ █████▌   ██ ██
+▐█ ▐█		█▌  █▌  ▐▌	  ▐▌ █▌	  █▌   ▐█
+█▌  █▌	   █▌	  ▐▌	 ▐▌  █▌	 █▌	 ▐█
+█▌  █▌ ████▌  ███▌   ▐▌	█▌   ████   █▌	 ▐█
+█████▌		   █▌  ▐▌   █	 █▌	 █▌	 ▐█
+█▌  █▌	   █▌  █▌  ▐▌  █	  █▌	  █▌   ▐█
+█▌  █▌		███▌  ████ █████▌ █████▌   ██ ██
 -->
 
 Anchor-Based Sizing {#sizing}
@@ -960,13 +1057,13 @@ it resolves to ''0px''.
 
 <!-- Big Text: fallback
 
-█████▌  ███▌  █▌    █▌    ████▌   ███▌   ███▌  █▌  █▌
-█▌     ▐█ ▐█  █▌    █▌    █▌  █▌ ▐█ ▐█  █▌  █▌ █▌ █▌
-█▌     █▌  █▌ █▌    █▌    █▌  █▌ █▌  █▌ █▌     █▌█▌
-████   █▌  █▌ █▌    █▌    █████  █▌  █▌ █▌     ██
-█▌     █████▌ █▌    █▌    █▌  █▌ █████▌ █▌     █▌█▌
-█▌     █▌  █▌ █▌    █▌    █▌  █▌ █▌  █▌ █▌  █▌ █▌ █▌
-█▌     █▌  █▌ █████ █████ ████▌  █▌  █▌  ███▌  █▌  █▌
+█████▌  ███▌  █▌	█▌	████▌   ███▌   ███▌  █▌  █▌
+█▌	 ▐█ ▐█  █▌	█▌	█▌  █▌ ▐█ ▐█  █▌  █▌ █▌ █▌
+█▌	 █▌  █▌ █▌	█▌	█▌  █▌ █▌  █▌ █▌	 █▌█▌
+████   █▌  █▌ █▌	█▌	█████  █▌  █▌ █▌	 ██
+█▌	 █████▌ █▌	█▌	█▌  █▌ █████▌ █▌	 █▌█▌
+█▌	 █▌  █▌ █▌	█▌	█▌  █▌ █▌  █▌ █▌  █▌ █▌ █▌
+█▌	 █▌  █▌ █████ █████ ████▌  █▌  █▌  ███▌  █▌  █▌
 -->
 
 Overflow Management {#fallback}
@@ -1104,13 +1201,13 @@ Values have the following meanings:
 
 <!-- Big Text: -order
 
-       ███▌  ████▌  ████▌  █████▌ ████▌
-      █▌  █▌ █▌  █▌ █▌  █▌ █▌     █▌  █▌
-      █▌  █▌ █▌  █▌ █▌  █▌ █▌     █▌  █▌
+	   ███▌  ████▌  ████▌  █████▌ ████▌
+	  █▌  █▌ █▌  █▌ █▌  █▌ █▌	 █▌  █▌
+	  █▌  █▌ █▌  █▌ █▌  █▌ █▌	 █▌  █▌
 ████▌ █▌  █▌ ████▌  █▌  █▌ ████   ████▌
-      █▌  █▌ █▌▐█   █▌  █▌ █▌     █▌▐█
-      █▌  █▌ █▌ ▐█  █▌  █▌ █▌     █▌ ▐█
-       ███▌  █▌  █▌ ████▌  █████▌ █▌  █▌
+	  █▌  █▌ █▌▐█   █▌  █▌ █▌	 █▌▐█
+	  █▌  █▌ █▌ ▐█  █▌  █▌ █▌	 █▌ ▐█
+	   ███▌  █▌  █▌ ████▌  █████▌ █▌  █▌
 -->
 
 Determining Fallback Order: the 'position-try-order' property {#position-try-order-property}
@@ -1266,13 +1363,13 @@ it's set to the property's initial value.
 
 <!-- Big Text: @pos-try
 
- ████▌  ████▌   ███▌   ███▌        █████▌ ████▌  █   ▐▌
-█▌   █▌ █▌  █▌ █▌  █▌ █▌  █▌         █▌   █▌  █▌ ▐▌  █
-█▌▐█ █▌ █▌  █▌ █▌  █▌ █▌             █▌   █▌  █▌  █ ▐▌
+ ████▌  ████▌   ███▌   ███▌		█████▌ ████▌  █   ▐▌
+█▌   █▌ █▌  █▌ █▌  █▌ █▌  █▌		 █▌   █▌  █▌ ▐▌  █
+█▌▐█ █▌ █▌  █▌ █▌  █▌ █▌			 █▌   █▌  █▌  █ ▐▌
 █▌▐█ █▌ ████▌  █▌  █▌  ███▌  ████▌   █▌   ████▌   ▐▌█
-█▌ ██▌  █▌     █▌  █▌     █▌         █▌   █▌▐█     █▌
-█▌      █▌     █▌  █▌ █▌  █▌         █▌   █▌ ▐█    █▌
- ████▌  █▌      ███▌   ███▌          █▌   █▌  █▌   █▌
+█▌ ██▌  █▌	 █▌  █▌	 █▌		 █▌   █▌▐█	 █▌
+█▌	  █▌	 █▌  █▌ █▌  █▌		 █▌   █▌ ▐█	█▌
+ ████▌  █▌	  ███▌   ███▌		  █▌   █▌  █▌   █▌
 -->
 
 The ''@position-try'' Rule {#fallback-rule}
@@ -1343,13 +1440,13 @@ without using ''@position-try'' at all.
 
 <!-- Big Text: apply
 
- ███▌  ████▌  ████▌  █▌    █   ▐▌
-▐█ ▐█  █▌  █▌ █▌  █▌ █▌    ▐▌  █
-█▌  █▌ █▌  █▌ █▌  █▌ █▌     █ ▐▌
-█▌  █▌ ████▌  ████▌  █▌     ▐▌█
-█████▌ █▌     █▌     █▌      █▌
-█▌  █▌ █▌     █▌     █▌      █▌
-█▌  █▌ █▌     █▌     █████   █▌
+ ███▌  ████▌  ████▌  █▌	█   ▐▌
+▐█ ▐█  █▌  █▌ █▌  █▌ █▌	▐▌  █
+█▌  █▌ █▌  █▌ █▌  █▌ █▌	 █ ▐▌
+█▌  █▌ ████▌  ████▌  █▌	 ▐▌█
+█████▌ █▌	 █▌	 █▌	  █▌
+█▌  █▌ █▌	 █▌	 █▌	  █▌
+█▌  █▌ █▌	 █▌	 █████   █▌
 -->
 
 Applying Position Fallback {#fallback-apply}
@@ -1478,7 +1575,7 @@ This limit must be <em>at least</em> five.
 
 <!-- Big Text: anim
 
- ███▌  █    █▌ ████ █     █
+ ███▌  █	█▌ ████ █	 █
 ▐█ ▐█  █▌   █▌  ▐▌  ██   ██
 █▌  █▌ ██▌  █▌  ▐▌  █▌█ █▐█
 █▌  █▌ █▌▐█ █▌  ▐▌  █▌ █ ▐█
@@ -1581,8 +1678,8 @@ using existing JS APIs (such as {{Element/getBoundingClientRect()}}).
 
 	<pre highlight=css>
 	p {
-	    transition: position-animation 2s; /* magic transition yay */
-	    position-animation: magic;
+		transition: position-animation 2s; /* magic transition yay */
+		position-animation: magic;
 	}
 	</pre>
 
@@ -1594,7 +1691,7 @@ using existing JS APIs (such as {{Element/getBoundingClientRect()}}).
 
 	<pre highlight=css>
 	p {
-	      transition: position-animation 2s, inset 2s; /* sadface */
+		  transition: position-animation 2s, inset 2s; /* sadface */
 	}
 	</pre>
 </div>
@@ -1605,8 +1702,8 @@ using existing JS APIs (such as {{Element/getBoundingClientRect()}}).
 
 	<pre highlight=css>
 	p {
-	    position-animation: magic;
-	    animation: foo 2s;
+		position-animation: magic;
+		animation: foo 2s;
 	}
 
 	@keyframes foo {
@@ -1632,11 +1729,11 @@ using existing JS APIs (such as {{Element/getBoundingClientRect()}}).
 
 <!-- Big Text: cssom
 
- ███▌   ███▌   ███▌   ███▌  █     █
+ ███▌   ███▌   ███▌   ███▌  █	 █
 █▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌ ██   ██
-█▌     █▌     █▌     █▌  █▌ █▌█ █▐█
-█▌      ███▌   ███▌  █▌  █▌ █▌ █ ▐█
-█▌         █▌     █▌ █▌  █▌ █▌   ▐█
+█▌	 █▌	 █▌	 █▌  █▌ █▌█ █▐█
+█▌	  ███▌   ███▌  █▌  █▌ █▌ █ ▐█
+█▌		 █▌	 █▌ █▌  █▌ █▌   ▐█
 █▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌ █▌   ▐█
  ███▌   ███▌   ███▌   ███▌  █▌   ▐█
 -->