Optimise

src/style/_app-shell.scss

@@ -46,19 +46,19 @@ html > body {
       }
 
       &::before {
-        opacity: clamp(0, calc(var(--garden-grain-strength) * 12), 0.44);
+        opacity: clamp(0, calc(var(--garden-grain-strength) * 4.25), 0.24);
         background-image: $grain-noise-a;
         background-size: 257px 257px;
-        filter: contrast(190%) brightness(0.66);
+        filter: contrast(145%) brightness(0.82);
         mix-blend-mode: multiply;
       }
 
       &::after {
-        opacity: clamp(0, calc(var(--garden-grain-strength) * 7), 0.24);
+        opacity: clamp(0, calc(var(--garden-grain-strength) * 2.5), 0.12);
         background-image: $grain-noise-b;
         background-position: 73px 41px;
         background-size: 389px 389px;
-        filter: contrast(170%) brightness(1.02);
+        filter: contrast(135%) brightness(1);
         mix-blend-mode: screen;
         transform: rotate(0.01deg);
       }

src/style/_config-pane.scss

@@ -1,5 +1,3 @@
-@use 'mixins' as *;
-
 .config-pane-container {
   --config-pane-available-height: calc(
     100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
@@ -31,6 +29,8 @@
 }
 
 .config-pane {
+  --tp-blade-value-width: min(260px, 64%);
+
   width: 100%;
   max-height: calc(var(--config-pane-available-height) - 36px);
   overflow-x: hidden;
@@ -40,6 +40,19 @@
   scrollbar-width: thin;
   touch-action: pan-y;
   -webkit-overflow-scrolling: touch;
+
+  .tp-lblv_l {
+    padding-right: 10px;
+  }
+
+  .tp-sldtxtv_s {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .tp-sldtxtv_t {
+    flex: 0 0 54px;
+  }
 }
 
 .config-pane-close {
@@ -121,10 +134,14 @@
   }
 
   .config-pane {
-    --tp-blade-value-width: min(128px, 38vw);
+    --tp-blade-value-width: min(210px, 62%);
     --tp-container-unit-size: 18px;
 
     font-size: 11px;
+
+    .tp-sldtxtv_t {
+      flex-basis: 48px;
+    }
   }
 
   .config-pane-close {
@@ -133,11 +150,7 @@
   }
 }
 
-@include on-small-screen {
-  @include mobile-config-pane;
-}
-
-@media (hover: none) and (pointer: coarse) {
+@media (max-width: 599px), (hover: none) and (pointer: coarse) {
   @include mobile-config-pane;
 }
 
@@ -147,7 +160,7 @@
 
 .color-reaction-matrix {
   display: grid;
-  grid-template-columns: minmax(42px, max-content) repeat(3, minmax(0, 1fr));
+  grid-template-columns: 28px repeat(3, minmax(0, 1fr));
   gap: 4px;
   align-items: stretch;
 }
@@ -165,7 +178,7 @@
 }
 
 .color-reaction-matrix__header {
-  gap: 5px;
+  gap: 0;
 }
 
 .color-reaction-matrix__corner {

src/style/_loading.scss

@@ -1,10 +1,11 @@
 .loading-indicator {
+  --loading-gap: 22px;
+
   position: absolute;
   top: 50%;
   left: 50%;
   display: flex;
   flex-direction: column;
-  gap: 22px;
   align-items: center;
   justify-content: center;
   z-index: 3;
@@ -13,6 +14,7 @@
   opacity: 0;
   pointer-events: none;
   transition: opacity var(--transition-time-long);
+  contain: layout;
 
   > .splash {
     display: flex;
@@ -20,9 +22,19 @@
     gap: 16px;
     align-items: center;
     pointer-events: auto;
+    opacity: 1;
+    visibility: visible;
+    transition:
+      opacity var(--transition-time),
+      visibility 0s linear 0s;
 
-    &[hidden] {
-      display: none;
+    &[data-visible='false'] {
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      transition:
+        opacity var(--transition-time),
+        visibility 0s linear var(--transition-time);
     }
 
     > .splash-title {
@@ -89,14 +101,28 @@
   }
 
   > .loading-bar {
+    position: absolute;
+    top: calc(100% + var(--loading-gap));
+    left: 0;
+    right: 0;
     display: flex;
     flex-direction: column;
     gap: 18px;
     align-items: center;
     width: 100%;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition:
+      opacity var(--transition-time),
+      visibility 0s linear var(--transition-time);
 
-    &[hidden] {
-      display: none;
+    &[data-visible='true'] {
+      opacity: 1;
+      visibility: visible;
+      transition:
+        opacity var(--transition-time),
+        visibility 0s linear 0s;
     }
 
     > .loading-status {
@@ -147,7 +173,7 @@ html > body.is-loading {
   }
 
   .eraser-preview {
-    display: none;
+    visibility: hidden;
   }
 
   aside.control-dock {

src/style/toolbar/_buttons.scss

@@ -1,6 +1,6 @@
 @use 'shared' as *;
 
-html > body > aside.control-dock > .toolbar-row > nav.buttons {
+.buttons {
   grid-area: buttons;
   display: flex;
   flex-wrap: nowrap;
@@ -58,6 +58,10 @@ html > body > aside.control-dock > .toolbar-row > nav.buttons {
       }
     }
 
+    &.full-screen-toggle.active::after {
+      mask-image: url('../../../assets/icons/minimize.svg');
+    }
+
     &.sound.muted::before {
       content: '';
       position: absolute;

src/style/toolbar/_garden-controls.scss

@@ -1,6 +1,6 @@
 @use 'shared' as *;
 
-html > body > aside.control-dock > .toolbar-row > .toolbar-shell > .garden-controls {
+.garden-controls {
   grid-area: swatches;
   display: flex;
   flex-wrap: wrap;

src/style/toolbar/_layout.scss

@@ -1,6 +1,6 @@
 @use 'shared' as *;
 
-html > body > aside.control-dock > .toolbar-row {
+.toolbar-row {
   --toolbar-background-opacity: 0%;
   --toolbar-background-strength: 0;
   --toolbar-divider-space: clamp(6px, 1.8vw, 14px);

src/style/toolbar/_responsive.scss

@@ -1,6 +1,6 @@
 @use '../mixins' as *;
 
-html > body > aside.control-dock > .toolbar-row {
+.toolbar-row {
   @include on-small-screen {
     --toolbar-divider-space: 4px;
     --toolbar-top-max-width: 329px;
@@ -124,7 +124,7 @@ html > body > aside.control-dock > .toolbar-row {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  html > body > aside.control-dock > .toolbar-row {
+  .toolbar-row {
     > .vibe-button.previous-vibe:hover,
     > .vibe-button.next-vibe:hover,
     > .toolbar-shell > .garden-controls > .swatches > .color-swatch:hover,

src/style/toolbar/_shared.scss

@@ -1,7 +1,6 @@
 $toolbar-icons: (
   info: 'info',
-  maximize-full-screen: 'maximize',
-  minimize-full-screen: 'minimize',
+  full-screen-toggle: 'maximize',
   settings: 'settings',
   sound: 'sound',
   export-4k: 'download',