refactor: start grouping brick attributes info

routes/static/out.css

@@ -604,6 +604,10 @@ video {
   flex: none;
 }
 
+.grow {
+  flex-grow: 1;
+}
+
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -636,6 +640,10 @@ video {
   grid-template-rows: auto 1fr;
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -656,6 +664,10 @@ video {
   gap: 1.5rem;
 }
 
+.gap-y-10 {
+  row-gap: 2.5rem;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -783,10 +795,15 @@ video {
 
 :root {
   --change-topic-color: 0deg 100% 50%;
+  --change-topic-dark: 0deg 57% 20%;
   --probing-q-color: 48deg 100% 50%;
+  --probing-q-dark: 48deg 100% 17%;
   --expand-color: 120deg 57% 50%;
+  --expand-dark: 120deg 57% 20%;
   --clarifying-q-color: 216deg 99% 55%;
+  --clarifying-q-dark: 216deg 57% 20%;
   --meta-color: 312deg 100% 50%;
+  --meta-dark: 312deg 57% 20%;
 }
 
 /* https://stackoverflow.com/questions/12813573/position-icons-into-circle */