Optimise

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',