More css clean up

src/style/_app-shell.scss

@@ -1,7 +1,5 @@
-html>body {
+html > body {
   width: 100%;
-  min-height: 100vh;
-  min-height: 100dvh;
   height: 100vh;
   height: 100dvh;
   overflow: hidden;
@@ -9,22 +7,20 @@ html>body {
   position: relative;
   background: var(--garden-background, #10151f);
 
-  >.canvas-container {
+  > .canvas-container {
-    min-height: 100vh;
-    min-height: 100dvh;
     height: 100%;
     width: 100%;
     display: flex;
     position: relative;
     overflow: hidden;
 
-    >canvas {
+    > canvas {
       height: 100%;
       width: 100%;
       touch-action: none;
     }
 
-    >.eraser-preview {
+    > .eraser-preview {
       position: absolute;
       top: 0;
       left: 0;
@@ -51,7 +47,7 @@ html>body {
       }
     }
 
-    >.dev-stats-overlay {
+    > .dev-stats-overlay {
       position: absolute;
       top: max(10px, env(safe-area-inset-top, 0px));
       left: max(10px, env(safe-area-inset-left, 0px));
@@ -70,13 +66,9 @@ html>body {
       pointer-events: none;
       user-select: none;
       white-space: pre;
-
-      &[hidden] {
-        display: none;
-      }
     }
 
-    >.errors-container {
+    > .errors-container {
       position: absolute;
       top: 0;
       left: 0;
@@ -89,4 +81,4 @@ html>body {
       }
     }
   }
-}
+}

src/style/_config-pane.scss

@@ -18,12 +18,15 @@
   min-height: 28px;
   align-items: center;
   justify-content: center;
-  gap: 5px;
   color: rgb(255 255 255 / 76%);
   font-size: 11px;
   line-height: 1;
 }
 
+.color-reaction-matrix__header {
+  gap: 5px;
+}
+
 .color-reaction-matrix__corner {
   justify-content: flex-start;
   padding-left: 2px;
@@ -40,7 +43,6 @@
 }
 
 .color-reaction-matrix__cell {
-  display: block;
   min-width: 0;
 }
 
@@ -51,7 +53,6 @@
   border: 1px solid rgb(255 255 255 / 16%);
   border-radius: 4px;
   padding: 0 4px;
-  appearance: auto;
   background: rgb(255 255 255 / 8%);
   color: white;
   font: inherit;

src/style/_garden-prompt.scss

@@ -3,14 +3,8 @@
 html > body > .canvas-container > .garden-prompt {
   position: absolute;
   left: 50%;
-  bottom: calc(7.25rem + env(safe-area-inset-bottom));
   transform: translateX(-50%);
-  max-width: min(92vw, 780px);
-  color: white;
   text-align: center;
-  font-size: 46px;
-  line-height: 1.15;
-  text-shadow: 0 2px 18px rgb(0 0 0 / 60%);
   pointer-events: none;
   z-index: 2;
 
@@ -22,7 +16,6 @@ html > body > .canvas-container > .garden-prompt {
     display: flex;
     align-items: center;
     top: calc(1.25rem + env(safe-area-inset-top));
-    bottom: auto;
     gap: 16px;
     width: max-content;
     min-height: 78px;
@@ -84,12 +77,8 @@ html > body > .canvas-container > .garden-prompt {
   }
 
   @include on-small-screen {
-    bottom: calc(10rem + env(safe-area-inset-bottom));
-    font-size: 24px;
-
     &.draw-hint {
       top: calc(0.75rem + env(safe-area-inset-top));
-      bottom: auto;
       gap: 10px;
       min-height: 58px;
       max-width: min(92vw, 340px);

src/style/_motion.scss

@@ -1,22 +1,7 @@
 @media (prefers-reduced-motion: reduce) {
   html > body {
-    > .canvas-container > .garden-prompt {
-      .draw-hint-stroke {
-        stroke-dashoffset: 0;
-      }
-
-      .draw-hint-end {
-        opacity: 1;
-        transform: none;
-      }
-    }
-
     > aside.control-dock {
-      transform: translateY(0);
-
       > .toolbar-row {
-        button:hover,
-        button:active,
         > .toolbar-shell > .garden-controls > .swatches > .eraser-size-control:hover,
         > .toolbar-shell > .garden-controls > .swatches > .mirror-segment-control:hover {
           transform: none;

src/style/_toolbar.scss

@@ -127,13 +127,7 @@ html > body > aside.control-dock > .toolbar-row {
     }
 
     &:hover {
-      background: transparent;
       color: color-mix(in srgb, var(--accent-color) 70%, white);
-      box-shadow: none;
-    }
-
-    &:active {
-      transform: translateX(0);
     }
 
     &.previous-vibe:hover {
@@ -190,8 +184,7 @@ html > body > aside.control-dock > .toolbar-row {
           transform var(--transition-time);
       }
 
-      &:hover,
+      &:hover {
-      &.active {
         border-color: rgb(255 255 255 / 10%);
         background: rgb(255 255 255 / 9%);
       }
@@ -257,7 +250,6 @@ html > body > aside.control-dock > .toolbar-row {
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
-    gap: 12px;
     min-width: 0;
     padding: 0 4px;
 
@@ -295,14 +287,9 @@ html > body > aside.control-dock > .toolbar-row {
 
       > .eraser-size-control,
       > .mirror-segment-control {
-        --control-progress: 0%;
-        --control-rgb: 255 255 255;
-        --thumb-background: rgb(var(--control-rgb));
-        --thumb-height: 28px;
         --thumb-hover-transform: scale(1.03);
         --thumb-radius: 50%;
         --thumb-transform: none;
-        --thumb-width: 28px;
 
         position: relative;
         display: grid;
@@ -445,9 +432,7 @@ html > body > aside.control-dock > .toolbar-row {
     }
 
     > .toolbar-shell {
-      min-width: 0;
       flex: 1 1 auto;
-      gap: 8px;
       padding: 4px 8px;
 
       > nav.buttons {
@@ -455,7 +440,6 @@ html > body > aside.control-dock > .toolbar-row {
         padding-top: 3px;
 
         > button {
-          width: 44px;
           height: 38px;
           min-height: 38px;
 
@@ -473,13 +457,11 @@ html > body > aside.control-dock > .toolbar-row {
       }
 
       > .garden-controls {
-        gap: 8px;
         padding: 2px 4px;
 
         > .swatches {
           display: grid;
           grid-template-columns: repeat(6, minmax(0, 1fr));
-          align-items: center;
           justify-items: center;
           justify-content: stretch;
           width: 100%;
@@ -500,7 +482,6 @@ html > body > aside.control-dock > .toolbar-row {
             width: 100%;
             min-width: 0;
             height: 42px;
-            flex-basis: auto;
             padding: 0 8px;
           }
 

src/style/common.scss

@@ -14,14 +14,8 @@
   }
 }
 
-h1,
+h1 {
-h2,
-h3,
-h4,
-h5,
-h6 {
   font-family: 'Open Sans', sans-serif;
-  margin-bottom: var(--small-margin);
 }
 
 p {