Studio: more finetuning, first version working

public/css/index-tailwind-output.css

@@ -813,6 +813,16 @@ video {
   margin: 1px;
 }
 
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -838,16 +848,6 @@ video {
   margin-bottom: 0.75rem;
 }
 
-.mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-
-.my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -874,6 +874,10 @@ video {
   margin-right: 1.5rem;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -886,10 +890,6 @@ video {
   margin-right: 0px;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1066,6 +1066,10 @@ video {
   height: 1.5rem;
 }
 
+.h-4 {
+  height: 1rem;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -1076,10 +1080,6 @@ video {
   height: fit-content;
 }
 
-.h-4 {
-  height: 1rem;
-}
-
 .h-1\/2 {
   height: 50%;
 }
@@ -1156,6 +1156,10 @@ video {
   width: 1.5rem;
 }
 
+.w-4 {
+  width: 1rem;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -1174,10 +1178,6 @@ video {
   width: 6rem;
 }
 
-.w-4 {
-  width: 1rem;
-}
-
 .w-0 {
   width: 0px;
 }
@@ -1483,14 +1483,14 @@ video {
   word-break: break-all;
 }
 
-.rounded {
-  border-radius: 0.25rem;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-xl {
   border-radius: 0.75rem;
 }
@@ -1627,10 +1627,20 @@ video {
   border-color: rgb(107 114 128 / var(--tw-border-opacity));
 }
 
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
 .border-opacity-50 {
   --tw-border-opacity: 0.5;
 }
 
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
 .bg-red-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));