prototyped svg reports

styles/index.css

@@ -274,9 +274,6 @@
   .my-\[0\.5em\] {
     margin-block: 0.5em;
   }
-  .my-\[1em\] {
-    margin-block: 1em;
-  }
   .my-\[1rem\] {
     margin-block: 1rem;
   }
@@ -334,9 +331,18 @@
   .h-\[2rem\] {
     height: 2rem;
   }
+  .h-\[30em\] {
+    height: 30em;
+  }
+  .h-\[min\(100cqw\,75vh\)\] {
+    height: min(100cqw, 75vh);
+  }
   .h-fit {
     height: fit-content;
   }
+  .h-full {
+    height: 100%;
+  }
   .max-h-\[50vh\] {
     max-height: 50vh;
   }
@@ -388,6 +394,9 @@
   .basis-full {
     flex-basis: 100%;
   }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -498,6 +507,9 @@
   .border-\[gray\] {
     border-color: gray;
   }
+  .border-black {
+    border-color: var(--color-black);
+  }
   .border-border {
     border-color: var(--border);
   }
@@ -522,6 +534,18 @@
   .bg-card {
     background-color: var(--card);
   }
+  .fill-\[pink\] {
+    fill: pink;
+  }
+  .fill-accent {
+    fill: var(--accent);
+  }
+  .fill-white {
+    fill: var(--color-white);
+  }
+  .stroke-2 {
+    stroke-width: 2;
+  }
   .p-\[0\.5em\] {
     padding: 0.5em;
   }
@@ -540,9 +564,6 @@
   .py-\[1em\] {
     padding-block: 1em;
   }
-  .py-\[2em\] {
-    padding-block: 2em;
-  }
   .pt-\[1em\] {
     padding-top: 1em;
   }
@@ -579,6 +600,9 @@
   .text-\[1\.5em\] {
     font-size: 1.5em;
   }
+  .text-\[4px\] {
+    font-size: 4px;
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -619,6 +643,24 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .not-group-focus-within\:hidden {
+    &:not(*:is(:where(.group):focus-within *)) {
+      display: none;
+    }
+  }
+  .not-group-hover\:hidden {
+    &:not(*:is(:where(.group):hover *)) {
+      display: none;
+    }
+    @media not (hover: hover) {
+      display: none;
+    }
+  }
+  .not-group-focus\:hidden {
+    &:not(*:is(:where(.group):focus *)) {
+      display: none;
+    }
+  }
   .not-open\:mb-\[1em\] {
     &:not(*:is([open], :popover-open, :open)) {
       margin-bottom: 1em;
@@ -1178,6 +1220,26 @@
     }
   }
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1260,26 +1322,6 @@
   inherits: false;
   initial-value: 1;
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
@@ -1297,6 +1339,11 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-font-weight: initial;
       --tw-outline-style: solid;
@@ -1316,11 +1363,6 @@
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
       --tw-content: "";
       --tw-leading: initial;
     }

styles/source.css

@@ -17,3 +17,7 @@
 @import "./components.css";
 @source inline("group-open/sync-group:after:content-['-']");
 @source inline("not-open:mb-[1em]");
+@source inline("not-group-hover:hidden");
+@source inline("not-group-hover:focus-within");
+@source inline("hover:fill-pink");
+@source inline("fill-[pink]");