Clena up CSS

src/style/_app-shell.scss

@@ -1,4 +1,4 @@
-html > body {
+html>body {
   width: 100%;
   min-height: 100vh;
   min-height: 100dvh;
@@ -9,7 +9,7 @@ html > body {
   position: relative;
   background: var(--garden-background, #10151f);
 
-  > .canvas-container {
+  >.canvas-container {
     min-height: 100vh;
     min-height: 100dvh;
     height: 100%;
@@ -18,16 +18,13 @@ html > body {
     position: relative;
     overflow: hidden;
 
-    > canvas {
+    >canvas {
       height: 100%;
       width: 100%;
       touch-action: none;
-      cursor:
-        url('../../assets/icons/brush.svg') 0 24,
-        auto;
     }
 
-    > .eraser-preview {
+    >.eraser-preview {
       position: absolute;
       top: 0;
       left: 0;
@@ -54,7 +51,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));
@@ -79,7 +76,7 @@ html > body {
       }
     }
 
-    > .errors-container {
+    >.errors-container {
       position: absolute;
       top: 0;
       left: 0;
@@ -92,4 +89,4 @@ html > body {
       }
     }
   }
-}
+}

src/style/_garden-prompt.scss

@@ -37,7 +37,7 @@ html > body > .canvas-container > .garden-prompt {
     backdrop-filter: blur(12px);
     color: rgb(255 255 255 / 94%);
     font:
-      600 20px/1.2 'Open Sans',
+      400 20px/1.2 'Open Sans',
       sans-serif;
     text-shadow: 0 1px 12px rgb(0 0 0 / 58%);
   }

src/style/_loading.scss

@@ -47,7 +47,7 @@
   > .loading-status {
     color: rgb(255 255 255 / 88%);
     font:
-      600 16px/1.25 'Open Sans',
+      400 16px/1.25 'Open Sans',
       sans-serif;
     text-align: center;
     text-shadow: 0 1px 12px rgb(0 0 0 / 60%);
@@ -90,7 +90,6 @@ html > body.is-loading {
   aside.control-dock {
     opacity: 0;
     visibility: hidden;
-    transform: translateY(var(--dock-hidden-translate-y));
   }
 }
 
@@ -109,7 +108,6 @@ html > body.is-loading {
 
 @media (prefers-reduced-motion: reduce) {
   .loading-indicator > .loading-dots > .loading-dot {
-    animation: none;
     transform: scale(0.85);
     opacity: 0.85;
   }

src/style/_panels.scss

@@ -1,8 +1,6 @@
 @use 'mixins' as *;
-@use 'range-input' as *;
 
 html > body > aside.control-dock > .pages {
-  @include blurred-background(#fff);
   width: min(calc(100vw - 1rem), 560px);
   max-height: min(58vh, 520px);
   max-height: min(58dvh, 520px);
@@ -11,9 +9,11 @@ html > body > aside.control-dock > .pages {
   overflow-y: auto;
   border: 1px solid rgb(255 255 255 / 54%);
   border-radius: 8px;
+  background-color: rgb(255 255 255 / 34%);
   box-shadow:
     0 18px 48px rgb(0 0 0 / 28%),
     0 2px 10px rgb(0 0 0 / 16%);
+  backdrop-filter: blur(12px);
   scrollbar-width: thin;
   scrollbar-color: var(--main-color) transparent;
   transition:
@@ -64,7 +64,7 @@ html > body > aside.control-dock > .pages {
 
       a {
         color: rgb(0 84 120);
-        font-weight: 700;
+        font-weight: 400;
 
         &:focus-visible {
           outline: 2px solid currentColor;
@@ -96,75 +96,17 @@ html > body > aside.control-dock > .pages {
     }
 
     p {
-      @include main-font();
       margin-bottom: var(--small-margin);
-      line-height: 1.65;
+      color: var(--normal-text-color);
+      font:
+        400 1.1rem/1.65 'Open Sans',
+        sans-serif;
+      hyphens: auto;
     }
 
     a {
       color: var(--accent-color);
     }
-
-    .slider {
-      $track-height: 8px;
-      $thumb-size: 22px;
-      margin-bottom: var(--small-margin);
-      user-select: none;
-
-      p {
-        display: flex;
-        justify-content: space-between;
-        gap: var(--small-margin);
-        margin-bottom: 0.35rem;
-        font-size: 0.95rem;
-      }
-
-      input[type='range'] {
-        @include settings-range-input();
-
-        &::-webkit-slider-runnable-track {
-          @include range-track(rgb(49 52 63 / 14%), $track-height, 1000px, null);
-        }
-
-        &::-webkit-slider-thumb {
-          @include range-thumb-base(
-            $thumb-size,
-            $thumb-size,
-            2px solid var(--accent-color),
-            1000px
-          );
-          margin-top: -7px;
-          appearance: none;
-          background: white;
-          box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
-          transition: transform var(--transition-time);
-
-          &:hover {
-            transform: scale(1.08);
-          }
-        }
-
-        &::-moz-range-track {
-          @include range-track(rgb(49 52 63 / 14%), $track-height, 1000px, null);
-        }
-
-        &::-moz-range-thumb {
-          @include range-thumb-base(
-            $thumb-size,
-            $thumb-size,
-            2px solid var(--accent-color),
-            1000px
-          );
-          background: white;
-          box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
-        }
-      }
-    }
-
-    .large-button {
-      margin: var(--small-margin) 0 0 auto;
-      border-radius: 8px;
-    }
   }
 
   @include on-small-screen {

src/style/_range-input.scss

@@ -1,49 +0,0 @@
-@mixin toolbar-range-input() {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  appearance: none;
-  background: transparent;
-  cursor: ew-resize;
-  outline: none;
-  touch-action: pan-y;
-
-  &:focus-visible {
-    outline: 2px solid white;
-    outline-offset: 2px;
-    border-radius: 8px;
-  }
-}
-
-@mixin settings-range-input() {
-  width: 100%;
-  height: 44px;
-  appearance: none;
-  background: transparent;
-  outline: none;
-}
-
-@mixin range-track(
-  $background,
-  $height: 7px,
-  $border-radius: 999px,
-  $box-shadow: inset 0 1px 2px rgb(0 0 0 / 24%)
-) {
-  height: $height;
-  cursor: pointer;
-  border-radius: $border-radius;
-  background: $background;
-
-  @if $box-shadow != null {
-    box-shadow: $box-shadow;
-  }
-}
-
-@mixin range-thumb-base($width, $height, $border, $border-radius) {
-  width: $width;
-  height: $height;
-  cursor: pointer;
-  border: $border;
-  border-radius: $border-radius;
-}

src/style/_toolbar.scss

@@ -1,5 +1,39 @@
 @use 'mixins' as *;
-@use 'range-input' as *;
+
+@mixin toolbar-track() {
+  height: 7px;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    rgb(var(--control-rgb) / 72%) 0 var(--control-progress),
+    rgb(255 255 255 / 24%) var(--control-progress) 100%
+  );
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 24%);
+  cursor: ew-resize;
+}
+
+@mixin toolbar-thumb() {
+  width: var(--thumb-width);
+  height: var(--thumb-height);
+  border: 2px solid rgb(255 255 255 / 92%);
+  border-radius: var(--thumb-radius);
+  background: var(--thumb-background);
+  box-shadow:
+    inset 0 1px 2px rgb(255 255 255 / 22%),
+    0 4px 12px rgb(0 0 0 / 30%);
+  cursor: ew-resize;
+  transform: var(--thumb-transform);
+}
+
+$toolbar-icons: (
+  info: 'info',
+  maximize-full-screen: 'maximize',
+  minimize-full-screen: 'minimize',
+  settings: 'settings',
+  sound: 'sound',
+  export-4k: 'download',
+  restart: 'restart',
+);
 
 html > body > aside.control-dock > .toolbar-row {
   display: flex;
@@ -8,11 +42,17 @@ html > body > aside.control-dock > .toolbar-row {
   width: fit-content;
   max-width: 100%;
   margin: 0 auto;
+  padding-inline: clamp(8px, 1.4vw, 14px);
   gap: clamp(6px, 1.8vw, 14px);
+  border-radius: 12px;
   color: rgb(245 250 244 / 92%);
   font:
-    600 13px/1 'Open Sans',
+    400 13px/1 'Open Sans',
     sans-serif;
+  transition:
+    backdrop-filter var(--transition-time-long),
+    background-color var(--transition-time-long),
+    box-shadow var(--transition-time-long);
 
   button {
     min-width: 44px;
@@ -25,8 +65,14 @@ html > body > aside.control-dock > .toolbar-row {
       border-color var(--transition-time),
       color var(--transition-time),
       box-shadow var(--transition-time),
+      opacity var(--transition-time),
       transform var(--transition-time);
 
+    &:disabled {
+      cursor: progress;
+      opacity: 0.58;
+    }
+
     &:focus-visible {
       outline: 2px solid white;
       outline-offset: 2px;
@@ -35,40 +81,32 @@ html > body > aside.control-dock > .toolbar-row {
 
   > .toolbar-shell {
     display: grid;
-    grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
       'swatches'
       'nav';
+    grid-template-columns: minmax(0, 1fr);
     align-items: center;
     justify-content: center;
     gap: 8px;
     min-width: 0;
     min-height: 86px;
     padding: 8px 9px;
-    border: 1px solid transparent;
-    border-radius: 10px;
-    background: transparent;
-    backdrop-filter: none;
-    box-shadow: none;
   }
 
   > .vibe-button {
+    position: relative;
     display: grid;
     place-items: center;
-    position: relative;
     width: 52px;
     height: auto;
     min-height: 66px;
     flex: 0 0 auto;
     padding: 0;
-    border: 0;
     border-radius: 0;
     background: transparent;
     color: rgb(255 255 255 / 70%);
     font-size: 0;
     line-height: 1;
-    text-shadow: none;
-    box-shadow: none;
 
     &::before {
       content: '';
@@ -92,12 +130,28 @@ html > body > aside.control-dock > .toolbar-row {
       background: transparent;
       color: color-mix(in srgb, var(--accent-color) 70%, white);
       box-shadow: none;
-      transform: translateY(-2px);
     }
 
     &:active {
-      transform: translateY(0);
+      transform: translateX(0);
     }
+
+    &.previous-vibe:hover {
+      transform: translateX(-2px);
+    }
+
+    &.next-vibe:hover {
+      transform: translateX(2px);
+    }
+  }
+
+  &.needs-contrast-background {
+    background: linear-gradient(180deg, rgb(22 28 36 / 72%), rgb(5 8 13 / 82%));
+    box-shadow:
+      inset 0 0 0 1px rgb(255 255 255 / 16%),
+      inset 0 1px 0 rgb(255 255 255 / 7%),
+      0 14px 34px rgb(0 0 0 / 28%);
+    backdrop-filter: blur(18px) brightness(0.62) saturate(0.82);
   }
 
   > .toolbar-shell > nav.buttons {
@@ -149,31 +203,16 @@ html > body > aside.control-dock > .toolbar-row {
       &.active {
         border-color: color-mix(in srgb, var(--accent-color) 55%, white 15%);
         background: color-mix(in srgb, var(--accent-color) 30%, transparent);
-        box-shadow: none;
       }
 
       &.active::after {
         background-color: white;
       }
 
-      &.info::after {
+      @each $class, $icon in $toolbar-icons {
-        mask-image: url('../../assets/icons/info.svg');
+        &.#{$class}::after {
-      }
+          mask-image: url('../../assets/icons/#{$icon}.svg');
-
+        }
-      &.maximize-full-screen::after {
-        mask-image: url('../../assets/icons/maximize.svg');
-      }
-
-      &.minimize-full-screen::after {
-        mask-image: url('../../assets/icons/minimize.svg');
-      }
-
-      &.settings::after {
-        mask-image: url('../../assets/icons/settings.svg');
-      }
-
-      &.sound::after {
-        mask-image: url('../../assets/icons/sound.svg');
       }
 
       &.sound.muted::before {
@@ -193,14 +232,6 @@ html > body > aside.control-dock > .toolbar-row {
       &.sound.muted::after {
         background-color: rgb(255 255 255 / 46%);
       }
-
-      &.export-4k::after {
-        mask-image: url('../../assets/icons/download.svg');
-      }
-
-      &.restart::after {
-        mask-image: url('../../assets/icons/restart.svg');
-      }
     }
 
     > .export-status {
@@ -238,7 +269,7 @@ html > body > aside.control-dock > .toolbar-row {
       min-height: 58px;
       padding: 6px 10px;
 
-      > button {
+      > .color-swatch {
         position: relative;
         width: 44px;
         height: 44px;
@@ -262,168 +293,16 @@ html > body > aside.control-dock > .toolbar-row {
         }
       }
 
-      > .eraser-size-control {
+      > .eraser-size-control,
-        --eraser-control-scale: 1;
-        --eraser-progress: 33%;
-
-        position: relative;
-        display: grid;
-        align-items: center;
-        width: 184px;
-        height: 46px;
-        flex: 0 0 184px;
-        padding: 0 12px;
-        overflow: hidden;
-        border: 1px solid rgb(255 255 255 / 14%);
-        border-radius: 8px;
-        background:
-          radial-gradient(
-            circle at 24% 78%,
-            rgb(255 226 215 / 42%) 0 1px,
-            transparent 1.5px
-          ),
-          radial-gradient(
-            circle at 47% 72%,
-            rgb(255 226 215 / 34%) 0 1px,
-            transparent 1.5px
-          ),
-          radial-gradient(
-            circle at 67% 81%,
-            rgb(255 226 215 / 38%) 0 1px,
-            transparent 1.5px
-          ),
-          linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 4%));
-        box-shadow:
-          inset 0 0 0 1px rgb(255 255 255 / 6%),
-          0 3px 10px rgb(0 0 0 / 18%);
-        cursor: ew-resize;
-        transition:
-          border-color var(--transition-time),
-          background-color var(--transition-time),
-          box-shadow var(--transition-time),
-          transform var(--transition-time);
-
-        &::before {
-          content: '';
-          position: absolute;
-          right: 12px;
-          bottom: 8px;
-          left: 12px;
-          height: 2px;
-          border-radius: 999px;
-          background: linear-gradient(
-            90deg,
-            rgb(255 140 117 / 56%) 0 var(--eraser-progress),
-            rgb(255 255 255 / 18%) var(--eraser-progress) 100%
-          );
-          box-shadow: 0 1px 4px rgb(0 0 0 / 22%);
-        }
-
-        &:hover {
-          transform: translateY(-2px);
-          border-color: rgb(255 255 255 / 24%);
-        }
-
-        &.active {
-          border-color: rgb(255 212 202 / 72%);
-          background-color: rgb(255 140 117 / 11%);
-          box-shadow:
-            inset 0 0 0 1px rgb(255 255 255 / 10%),
-            0 0 0 5px rgb(255 140 117 / 34%),
-            0 6px 15px rgb(0 0 0 / 22%);
-        }
-
-        input[type='range'] {
-          @include toolbar-range-input();
-
-          &::-webkit-slider-runnable-track {
-            @include range-track(
-              linear-gradient(
-                90deg,
-                rgb(255 140 117 / 72%) 0 var(--eraser-progress),
-                rgb(255 255 255 / 24%) var(--eraser-progress) 100%
-              )
-            );
-          }
-
-          &::-webkit-slider-thumb {
-            @include range-thumb-base(
-              calc(34px * var(--eraser-control-scale)),
-              calc(21px * var(--eraser-control-scale)),
-              2px solid rgb(255 239 233 / 94%),
-              calc(6px * var(--eraser-control-scale))
-            );
-            margin-top: calc((7px - (21px * var(--eraser-control-scale))) / 2);
-            appearance: none;
-            background:
-              linear-gradient(
-                110deg,
-                transparent 0 12%,
-                rgb(255 255 255 / 44%) 13% 20%,
-                transparent 21% 100%
-              ),
-              linear-gradient(
-                90deg,
-                #ff8fa3 0 52%,
-                rgb(54 46 51 / 78%) 53% 56%,
-                #f5eee5 57% 100%
-              );
-            box-shadow:
-              inset 0 -2px 3px rgb(117 46 58 / 22%),
-              inset 0 2px 3px rgb(255 255 255 / 28%),
-              0 4px 10px rgb(0 0 0 / 28%);
-            transform: rotate(-10deg);
-            transition:
-              height var(--transition-time),
-              margin-top var(--transition-time),
-              width var(--transition-time);
-          }
-
-          &::-moz-range-track {
-            @include range-track(
-              linear-gradient(
-                90deg,
-                rgb(255 140 117 / 72%) 0 var(--eraser-progress),
-                rgb(255 255 255 / 24%) var(--eraser-progress) 100%
-              )
-            );
-          }
-
-          &::-moz-range-thumb {
-            @include range-thumb-base(
-              calc(34px * var(--eraser-control-scale)),
-              calc(21px * var(--eraser-control-scale)),
-              2px solid rgb(255 239 233 / 94%),
-              calc(6px * var(--eraser-control-scale))
-            );
-            background:
-              linear-gradient(
-                110deg,
-                transparent 0 12%,
-                rgb(255 255 255 / 44%) 13% 20%,
-                transparent 21% 100%
-              ),
-              linear-gradient(
-                90deg,
-                #ff8fa3 0 52%,
-                rgb(54 46 51 / 78%) 53% 56%,
-                #f5eee5 57% 100%
-              );
-            box-shadow:
-              inset 0 -2px 3px rgb(117 46 58 / 22%),
-              inset 0 2px 3px rgb(255 255 255 / 28%),
-              0 4px 10px rgb(0 0 0 / 28%);
-            transform: rotate(-10deg);
-            transition:
-              height var(--transition-time),
-              width var(--transition-time);
-          }
-        }
-      }
-
       > .mirror-segment-control {
-        --mirror-progress: 0%;
+        --control-progress: 0%;
-        --mirror-angle: 360deg;
+        --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;
@@ -435,23 +314,7 @@ html > body > aside.control-dock > .toolbar-row {
         overflow: hidden;
         border: 1px solid rgb(255 255 255 / 14%);
         border-radius: 8px;
-        background:
+        background: linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 4%));
-          radial-gradient(
-            circle at 24% 78%,
-            rgb(197 255 234 / 38%) 0 1px,
-            transparent 1.5px
-          ),
-          radial-gradient(
-            circle at 47% 72%,
-            rgb(197 255 234 / 30%) 0 1px,
-            transparent 1.5px
-          ),
-          radial-gradient(
-            circle at 67% 81%,
-            rgb(197 255 234 / 34%) 0 1px,
-            transparent 1.5px
-          ),
-          linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 4%));
         box-shadow:
           inset 0 0 0 1px rgb(255 255 255 / 6%),
           0 3px 10px rgb(0 0 0 / 18%);
@@ -462,108 +325,113 @@ html > body > aside.control-dock > .toolbar-row {
           box-shadow var(--transition-time),
           transform var(--transition-time);
 
-        &::before {
-          content: '';
-          position: absolute;
-          right: 12px;
-          bottom: 8px;
-          left: 12px;
-          height: 2px;
-          border-radius: 999px;
-          background: linear-gradient(
-            90deg,
-            rgb(148 233 203 / 56%) 0 var(--mirror-progress),
-            rgb(255 255 255 / 18%) var(--mirror-progress) 100%
-          );
-          box-shadow: 0 1px 4px rgb(0 0 0 / 22%);
-        }
-
         &:hover {
-          transform: translateY(-2px);
           border-color: rgb(255 255 255 / 24%);
+          transform: translateY(-2px);
         }
 
         &.active {
-          border-color: rgb(167 245 219 / 74%);
+          border-color: rgb(var(--control-rgb) / 72%);
-          background-color: rgb(92 206 177 / 12%);
+          background-color: rgb(var(--control-rgb) / 11%);
           box-shadow:
             inset 0 0 0 1px rgb(255 255 255 / 10%),
-            0 0 0 5px rgb(92 206 177 / 28%),
+            0 0 0 5px rgb(var(--control-rgb) / 28%),
             0 6px 15px rgb(0 0 0 / 22%);
         }
 
         input[type='range'] {
-          @include toolbar-range-input();
+          position: relative;
+          z-index: 1;
+          width: 100%;
+          height: 100%;
+          appearance: none;
+          background: transparent;
+          cursor: ew-resize;
+          outline: none;
+          touch-action: pan-y;
+
+          &:focus-visible {
+            border-radius: 8px;
+            outline: 2px solid white;
+            outline-offset: 2px;
+          }
 
           &::-webkit-slider-runnable-track {
-            @include range-track(
+            @include toolbar-track();
-              linear-gradient(
-                90deg,
-                rgb(148 233 203 / 78%) 0 var(--mirror-progress),
-                rgb(255 255 255 / 24%) var(--mirror-progress) 100%
-              )
-            );
           }
 
           &::-webkit-slider-thumb {
-            @include range-thumb-base(44px, 44px, 2px solid rgb(240 255 251 / 94%), 50%);
+            @include toolbar-thumb();
-            margin-top: -18.5px;
+            margin-top: calc((7px - var(--thumb-height)) / 2);
             appearance: none;
-            background:
-              radial-gradient(circle, white 0 3px, rgb(9 20 18 / 78%) 3.5px 8px),
-              repeating-conic-gradient(
-                from -90deg,
-                rgb(218 255 241) 0 8deg,
-                rgb(8 22 19 / 94%) 8deg var(--mirror-angle)
-              );
-            box-shadow:
-              inset 0 0 0 7px rgb(0 0 0 / 18%),
-              0 0 0 5px rgb(92 206 177 / 16%),
-              0 5px 14px rgb(0 0 0 / 30%);
             transition:
               box-shadow var(--transition-time),
-              transform var(--transition-time);
+              height var(--transition-time),
+              margin-top var(--transition-time),
+              transform var(--transition-time),
+              width var(--transition-time);
           }
 
           &::-webkit-slider-thumb:hover {
             box-shadow:
-              inset 0 0 0 7px rgb(0 0 0 / 18%),
+              inset 0 1px 2px rgb(255 255 255 / 22%),
-              0 0 0 7px rgb(92 206 177 / 24%),
+              0 0 0 4px rgb(var(--control-rgb) / 22%),
-              0 6px 16px rgb(0 0 0 / 34%);
+              0 5px 14px rgb(0 0 0 / 34%);
-            transform: scale(1.04);
+            transform: var(--thumb-hover-transform);
           }
 
           &::-moz-range-track {
-            @include range-track(
+            @include toolbar-track();
-              linear-gradient(
-                90deg,
-                rgb(148 233 203 / 78%) 0 var(--mirror-progress),
-                rgb(255 255 255 / 24%) var(--mirror-progress) 100%
-              )
-            );
           }
 
           &::-moz-range-thumb {
-            @include range-thumb-base(44px, 44px, 2px solid rgb(240 255 251 / 94%), 50%);
+            @include toolbar-thumb();
-            background:
-              radial-gradient(circle, white 0 3px, rgb(9 20 18 / 78%) 3.5px 8px),
-              repeating-conic-gradient(
-                from -90deg,
-                rgb(218 255 241) 0 8deg,
-                rgb(8 22 19 / 94%) 8deg var(--mirror-angle)
-              );
-            box-shadow:
-              inset 0 0 0 7px rgb(0 0 0 / 18%),
-              0 0 0 5px rgb(92 206 177 / 16%),
-              0 5px 14px rgb(0 0 0 / 30%);
           }
         }
       }
+
+      > .eraser-size-control {
+        --control-progress: var(--eraser-progress, 33%);
+        --control-rgb: 255 140 117;
+        --thumb-background:
+          linear-gradient(
+            110deg,
+            transparent 0 12%,
+            rgb(255 255 255 / 44%) 13% 20%,
+            transparent 21% 100%
+          ),
+          linear-gradient(
+            90deg,
+            #ff8fa3 0 52%,
+            rgb(54 46 51 / 78%) 53% 56%,
+            #f5eee5 57% 100%
+          );
+        --thumb-height: calc(21px * var(--eraser-control-scale, 1));
+        --thumb-hover-transform: rotate(-10deg) scale(1.03);
+        --thumb-radius: calc(6px * var(--eraser-control-scale, 1));
+        --thumb-transform: rotate(-10deg);
+        --thumb-width: calc(34px * var(--eraser-control-scale, 1));
+      }
+
+      > .mirror-segment-control {
+        --control-progress: var(--mirror-progress, 0%);
+        --control-rgb: 148 233 203;
+        --thumb-background:
+          radial-gradient(circle, white 0 3px, rgb(9 20 18 / 78%) 3.5px 8px),
+          repeating-conic-gradient(
+            from -90deg,
+            rgb(218 255 241) 0 8deg,
+            rgb(8 22 19 / 94%) 8deg var(--mirror-angle, 360deg)
+          );
+        --thumb-height: 44px;
+        --thumb-width: 44px;
+      }
     }
   }
 
   @include on-small-screen {
     width: 100%;
+    padding-inline: 6px;
     gap: 6px;
 
     > .vibe-button {
@@ -577,17 +445,14 @@ html > body > aside.control-dock > .toolbar-row {
     }
 
     > .toolbar-shell {
-      flex: 1 1 auto;
       min-width: 0;
+      flex: 1 1 auto;
       gap: 8px;
       padding: 4px 8px;
 
       > nav.buttons {
-        grid-area: nav;
-        justify-content: center;
         gap: 2px;
         padding-top: 3px;
-        border-top: 1px solid rgb(255 255 255 / 12%);
 
         > button {
           width: 44px;
@@ -608,110 +473,46 @@ html > body > aside.control-dock > .toolbar-row {
       }
 
       > .garden-controls {
-        grid-area: swatches;
-        display: flex;
-        justify-content: center;
         gap: 8px;
         padding: 2px 4px;
 
         > .swatches {
           display: grid;
           grid-template-columns: repeat(6, minmax(0, 1fr));
-          flex: 1 1 100%;
           align-items: center;
           justify-items: center;
           justify-content: stretch;
-          column-gap: 7px;
-          row-gap: 8px;
           width: 100%;
           min-width: 0;
           min-height: 54px;
+          flex: 1 1 100%;
           padding: 4px 6px;
+          column-gap: 7px;
+          row-gap: 8px;
 
           > .color-swatch {
             grid-column: span 2;
-            width: 44px;
+          }
-            height: 44px;
+
+          > .eraser-size-control,
+          > .mirror-segment-control {
+            justify-self: stretch;
+            width: 100%;
+            min-width: 0;
+            height: 42px;
+            flex-basis: auto;
+            padding: 0 8px;
           }
 
           > .eraser-size-control {
             grid-column: 1 / span 3;
-            justify-self: stretch;
-            width: 100%;
-            min-width: 0;
-            height: 42px;
-            flex-basis: auto;
-            padding: 0 8px;
-
-            &::before {
-              right: 8px;
-              left: 8px;
-            }
           }
 
           > .mirror-segment-control {
+            --thumb-height: 38px;
+            --thumb-width: 38px;
+
             grid-column: 4 / span 3;
-            justify-self: stretch;
-            width: 100%;
-            min-width: 0;
-            height: 42px;
-            flex-basis: auto;
-            padding: 0 8px;
-
-            &::before {
-              right: 8px;
-              left: 8px;
-            }
-
-            input[type='range'] {
-              &::-webkit-slider-thumb {
-                @include range-thumb-base(
-                  38px,
-                  38px,
-                  2px solid rgb(240 255 251 / 94%),
-                  50%
-                );
-                margin-top: -15.5px;
-                background:
-                  radial-gradient(circle, white 0 2.5px, rgb(9 20 18 / 78%) 3px 7px),
-                  repeating-conic-gradient(
-                    from -90deg,
-                    rgb(218 255 241) 0 8deg,
-                    rgb(8 22 19 / 94%) 8deg var(--mirror-angle)
-                  );
-                box-shadow:
-                  inset 0 0 0 6px rgb(0 0 0 / 18%),
-                  0 0 0 3px rgb(92 206 177 / 16%),
-                  0 4px 10px rgb(0 0 0 / 28%);
-              }
-
-              &::-webkit-slider-thumb:hover {
-                box-shadow:
-                  inset 0 0 0 6px rgb(0 0 0 / 18%),
-                  0 0 0 4px rgb(92 206 177 / 24%),
-                  0 5px 12px rgb(0 0 0 / 32%);
-              }
-
-              &::-moz-range-thumb {
-                @include range-thumb-base(
-                  38px,
-                  38px,
-                  2px solid rgb(240 255 251 / 94%),
-                  50%
-                );
-                background:
-                  radial-gradient(circle, white 0 2.5px, rgb(9 20 18 / 78%) 3px 7px),
-                  repeating-conic-gradient(
-                    from -90deg,
-                    rgb(218 255 241) 0 8deg,
-                    rgb(8 22 19 / 94%) 8deg var(--mirror-angle)
-                  );
-                box-shadow:
-                  inset 0 0 0 6px rgb(0 0 0 / 18%),
-                  0 0 0 3px rgb(92 206 177 / 16%),
-                  0 4px 10px rgb(0 0 0 / 28%);
-              }
-            }
           }
         }
       }

src/style/common.scss

@@ -1,6 +1,5 @@
 @use 'vars';
 @use 'fonts';
-@use 'mixins' as *;
 
 *,
 *::before,
@@ -21,7 +20,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Comfortaa', sans-serif;
+  font-family: 'Open Sans', sans-serif;
   margin-bottom: var(--small-margin);
 }
 
@@ -48,16 +47,3 @@ html {
   white-space: nowrap !important;
   border: 0 !important;
 }
-
-.large-button {
-  min-height: 44px;
-  border: none;
-  background-color: var(--accent-color);
-  cursor: pointer;
-  border-radius: var(--border-radius);
-  padding: calc(var(--small-margin) / 2) var(--small-margin);
-  margin: var(--small-margin) auto;
-  align-self: flex-end;
-  @include main-font();
-  color: white;
-}

src/style/fonts.scss

@@ -1,16 +1,3 @@
-/* comfortaa-regular - latin */
-@font-face {
-  font-family: 'Comfortaa';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src:
-    local(''),
-    url('../../assets/fonts/comfortaa-v40-latin-regular.woff2') format('woff2'),
-    /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url('../../assets/fonts/comfortaa-v40-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
 /* open-sans-regular - latin */
 @font-face {
   font-family: 'Open Sans';

src/style/mixins.scss

@@ -1,6 +1,3 @@
-@use 'sass:math';
-@use 'sass:color';
-
 $breakpoint-width: 600px !default;
 
 @mixin on-small-screen() {
@@ -8,132 +5,3 @@ $breakpoint-width: 600px !default;
     @content;
   }
 }
-
-@mixin on-large-screen() {
-  @media (min-width: $breakpoint-width) {
-    @content;
-  }
-}
-
-@mixin title-fragment-link() {
-  position: relative;
-
-  &:before {
-    content: '#';
-    position: absolute;
-    left: -0.5ch;
-    top: 50%;
-    opacity: 0;
-    transform: translateX(-100%) translateY(-50%);
-    transition: opacity var(--transition-time);
-  }
-
-  &:hover:before {
-    opacity: 0.5;
-  }
-}
-
-@mixin center-children() {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin absolute-center() {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}
-
-@mixin blurred-background($color: transparent) {
-  background-color: color.adjust($color, $alpha: -0.66);
-  backdrop-filter: blur(var(--blur-radius));
-}
-
-@mixin square($size) {
-  width: $size;
-  height: $size;
-}
-
-@mixin title-font() {
-  font:
-    400 3rem 'Comfortaa',
-    sans-serif;
-  color: var(--normal-text-color);
-  line-height: 1;
-
-  @include on-small-screen {
-    font-size: 3rem;
-    line-height: 1.1;
-  }
-}
-
-@mixin sub-title-font() {
-  font:
-    400 1.75rem 'Comfortaa',
-    sans-serif;
-  color: var(--normal-text-color);
-  hyphens: auto;
-}
-
-@mixin main-font() {
-  font:
-    400 1.1rem 'Open Sans',
-    sans-serif;
-  color: var(--normal-text-color);
-  line-height: 1.8;
-  hyphens: auto;
-}
-
-@mixin special-text-font() {
-  font:
-    400 1rem 'Open Sans',
-    sans-serif;
-  color: var(--special-text-color);
-  hyphens: auto;
-  font-style: italic;
-}
-
-@mixin link {
-  $border-shift: 10px;
-  $line-width: 2px;
-
-  @include special-text-font();
-  cursor: pointer;
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-
-  padding: 0 3px $line-width 0;
-
-  &:before,
-  &:after {
-    content: '';
-    display: block;
-    position: absolute;
-    bottom: 0;
-  }
-
-  &:before {
-    width: calc(100% + #{$border-shift});
-    border-bottom: $line-width dashed var(--accent-color);
-    transition: transform var(--transition-time);
-  }
-
-  &:after {
-    width: 100%;
-    height: $line-width;
-    background: linear-gradient(
-      90deg,
-      var(--card-color) 0,
-      transparent 4px,
-      transparent calc(100% - 4px),
-      var(--card-color) 100%
-    );
-  }
-
-  &:hover:before {
-    transform: translateX(-$border-shift);
-  }
-}

src/style/vars.scss

@@ -1,33 +1,9 @@
-@use 'mixins' as *;
-
 :root {
   --transition-time: 200ms;
   --transition-time-long: 350ms;
-  --line-width: 4px;
-  --line-height: 1.125rem;
   --accent-color: rgb(6.39851188659668, 70.28645324707031, 102.23043060302734);
-  --very-light-text-color: #ffffff;
   --main-color: #aaa;
   --normal-text-color: #31343f;
-  --blurred-card-color: transparent;
-  --blur-radius: 12px;
-  --special-text-color: var(--accent-color);
-  --border-radius: 0.6rem;
-
-  --large-margin: 4.6rem;
   --normal-margin: 2rem;
   --small-margin: 1rem;
-  --shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.2);
-  --icon-size: 2.5rem;
-  --large-icon-size: 3.75rem;
-  --body-width: min(80%, 60rem);
-}
-
-@include on-small-screen {
-  :root {
-    --body-width: 90%;
-    --large-margin: 2.8rem;
-    --normal-margin: 2rem;
-    --icon-size: 2rem;
-  }
 }