diff --git a/dist/css/windows.css b/dist/css/windows.css
index 7a3e14b430..961db74eba 100644
--- a/dist/css/windows.css
+++ b/dist/css/windows.css
@@ -1,3 +1,13 @@
+:root {
+  --mobile-topbar-height: clamp(48px, 12vw, 56px);
+  --mobile-button-size: clamp(48px, 12vw, 56px);
+  --mobile-toolbar-item-size: clamp(44px, 12vw, 50px);
+  --mobile-padding-standard: clamp(8px, 2vw, 15px);
+  --mobile-font-title: clamp(1.1em, 3vw, 1.5em);
+  --mobile-letter-spacing: clamp(1px, 0.3vw, 1.5px);
+  --touch-target-min: 44px;
+}
+
 #floatingWindows {
   position: absolute;
   top: 0;
@@ -8,7 +18,7 @@
   box-sizing: border-box;
 }
 
-#floatingWindows > .windowFrame {
+#floatingWindows>.windowFrame {
   overflow: hidden;
   border-radius: 8px;
   border: 2px solid #666;
@@ -18,7 +28,7 @@
   left: 0;
 }
 
-#floatingWindows > .windowFrame > .wfTopBar {
+#floatingWindows>.windowFrame>.wfTopBar {
   height: 29px;
   border-bottom: 1px solid #666;
   min-width: 425px;
@@ -27,7 +37,7 @@
   position: relative;
 }
 
-#floatingWindows > .windowFrame > .wfTopBar .wftButton {
+#floatingWindows>.windowFrame>.wfTopBar .wftButton {
   background-color: #666;
   border-radius: 2px;
   width: 21px;
@@ -43,26 +53,26 @@
   justify-content: center;
 }
 
-#floatingWindows > .windowFrame > .wfTopBar .wftButton.close:hover {
+#floatingWindows>.windowFrame>.wfTopBar .wftButton.close:hover {
   background-color: #f44336;
   opacity: 0.7;
 }
 
-#floatingWindows > .windowFrame > .wfTopBar .wftButton.rollup:hover {
+#floatingWindows>.windowFrame>.wfTopBar .wftButton.rollup:hover {
   background-color: #18b500;
   opacity: 0.7;
 }
 
-#floatingWindows > .windowFrame > .wfTopBar .wftButton:last-child {
+#floatingWindows>.windowFrame>.wfTopBar .wftButton:last-child {
   margin: 0;
 }
 
-#floatingWindows > .windowFrame > .wfTopBar .wftButton.rollup {
+#floatingWindows>.windowFrame>.wfTopBar .wftButton.rollup {
   order: 2;
 }
 
-#floatingWindows > .windowFrame > .wfTopBar .wftButton.rollup::before,
-#floatingWindows > .windowFrame > .wfTopBar .wftButton.rollup::after {
+#floatingWindows>.windowFrame>.wfTopBar .wftButton.rollup::before,
+#floatingWindows>.windowFrame>.wfTopBar .wftButton.rollup::after {
   content: "";
   display: block;
   height: 2px;
@@ -74,16 +84,16 @@
   transform: translate(-50%, -50%);
 }
 
-#floatingWindows > .windowFrame > .wfTopBar .wftButton.rollup.plus::before {
+#floatingWindows>.windowFrame>.wfTopBar .wftButton.rollup.plus::before {
   transform: translate(-50%, -50%) rotate(90deg);
 }
 
-#floatingWindows > .windowFrame > .wfTopBar .wftButton.rollup::before {
+#floatingWindows>.windowFrame>.wfTopBar .wftButton.rollup::before {
   transform: translate(-50%, -50%) rotate(0deg);
 }
 
-#floatingWindows > .windowFrame > .wfTopBar .wftButton.close::before,
-#floatingWindows > .windowFrame > .wfTopBar .wftButton.close::after {
+#floatingWindows>.windowFrame>.wfTopBar .wftButton.close::before,
+#floatingWindows>.windowFrame>.wfTopBar .wftButton.close::after {
   content: "";
   display: block;
   height: 2px;
@@ -95,11 +105,11 @@
   transform: translate(-50%, -50%) rotate(45deg);
 }
 
-#floatingWindows > .windowFrame > .wfTopBar .wftButton.close::after {
+#floatingWindows>.windowFrame>.wfTopBar .wftButton.close::after {
   transform: translate(-50%, -50%) rotate(-45deg);
 }
 
-#floatingWindows > .windowFrame > .wfTopBar .wftTitle {
+#floatingWindows>.windowFrame>.wfTopBar .wftTitle {
   line-height: 21px;
   flex-grow: 1;
   color: #666;
@@ -109,17 +119,17 @@
   letter-spacing: 1.2px;
 }
 
-#floatingWindows > .windowFrame > .wfWinBody {
+#floatingWindows>.windowFrame>.wfWinBody {
   min-height: 50px;
   min-width: 50px;
   display: flex;
 }
 
-#floatingWindows > .windowFrame > .wfWinBody > .wfbToolbar {
+#floatingWindows>.windowFrame>.wfWinBody>.wfbToolbar {
   flex-shrink: 0;
 }
 
-#floatingWindows > .windowFrame > .wfWinBody > .wfbToolbar > .wfbtHR {
+#floatingWindows>.windowFrame>.wfWinBody>.wfbToolbar>.wfbtHR {
   width: 40px;
   height: 2px;
   margin: -2px 7px;
@@ -142,7 +152,7 @@
   background-color: #7bb5ee;
 }
 
-.wfbtItem > input {
+.wfbtItem>input {
   border: none;
   width: 100%;
   height: 100%;
@@ -152,7 +162,7 @@
   text-align: center;
 }
 
-#floatingWindows > .windowFrame > .wfWinBody > .wfbWidget {
+#floatingWindows>.windowFrame>.wfWinBody>.wfbWidget {
   flex-grow: 1;
   overflow: hidden;
   position: relative;
@@ -182,7 +192,7 @@
     z-index: 10000;
   }
 
-  #floatingWindows > .windowFrame {
+  #floatingWindows>.windowFrame {
     border-radius: 0;
     border: none;
     width: 100vw;
@@ -193,229 +203,87 @@
     flex-direction: column;
   }
 
-  #floatingWindows > .windowFrame > .wfTopBar {
-    height: 56px;
+  #floatingWindows>.windowFrame>.wfTopBar {
+    height: var(--mobile-topbar-height);
     background-color: #2196f3;
     border: none;
     padding: 0;
     align-items: center;
     flex-direction: row-reverse;
     flex-shrink: 0;
-    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16),
+      0px 2px 10px 0px rgba(0, 0, 0, 0.12);
     min-width: auto;
   }
 
-  #floatingWindows > .windowFrame > .wfTopBar .wftButton {
-    padding: 0 15px;
+  #floatingWindows>.windowFrame>.wfTopBar .wftButton {
+    padding: 0 var(--mobile-padding-standard);
     background: none;
     border-radius: 0;
     transition: background-color 300ms;
     height: 100%;
-    width: 56px;
+    width: var(--mobile-button-size);
+    min-width: var(--touch-target-min);
+    min-height: var(--touch-target-min);
     margin: 0;
   }
 
-  #floatingWindows > .windowFrame > .wfTopBar .wftButton.wftMaxmin {
-    display: none;
-  }
-
-  #floatingWindows > .windowFrame > .wfTopBar .wftButton.rollup {
+  #floatingWindows>.windowFrame>.wfTopBar .wftButton.wftMaxmin,
+  #floatingWindows>.windowFrame>.wfTopBar .wftButton.rollup {
     display: none;
   }
 
-  #floatingWindows > .windowFrame > .wfTopBar .wftButton:hover {
+  #floatingWindows>.windowFrame>.wfTopBar .wftButton:hover {
     opacity: 1;
     background-color: rgba(0, 0, 0, 0.1);
   }
 
-  #floatingWindows > .windowFrame > .wfTopBar .wftButton.rollup::before {
-    width: 40%;
+  #floatingWindows>.windowFrame>.wfTopBar .wftButton.rollup::before {
+    width: clamp(35%, 8vw, 40%);
   }
 
-  #floatingWindows > .windowFrame > .wfTopBar .wftButton.close::before,
-  #floatingWindows > .windowFrame > .wfTopBar .wftButton.close::after {
-    width: 50%;
+  #floatingWindows>.windowFrame>.wfTopBar .wftButton.close::before,
+  #floatingWindows>.windowFrame>.wfTopBar .wftButton.close::after {
+    width: clamp(45%, 10vw, 50%);
   }
 
-  #floatingWindows > .windowFrame > .wfTopBar .wftTitle {
+  #floatingWindows>.windowFrame>.wfTopBar .wftTitle {
     flex-grow: 1;
     color: #fff;
-    font-size: 1.5em;
-    padding: 0 15px;
+    font-size: var(--mobile-font-title);
+    padding: 0 var(--mobile-padding-standard);
     text-align: center;
     text-transform: uppercase;
     font-weight: 500;
-    letter-spacing: 1.5px;
+    letter-spacing: var(--mobile-letter-spacing);
   }
 
-  #floatingWindows > .windowFrame > .wfWinBody {
+  #floatingWindows>.windowFrame>.wfWinBody {
     flex-direction: column;
     flex-grow: 1;
   }
 
-  #floatingWindows > .windowFrame > .wfWinBody > .wfbToolbar {
-    width: 54px;
+  #floatingWindows>.windowFrame>.wfWinBody>.wfbToolbar {
     flex-shrink: 0;
     display: flex;
     overflow-y: auto;
     background-color: rgba(0, 0, 0, 0.1);
     width: 100%;
-    padding: 2px 4px;
+    padding: clamp(1px, 0.5vw, 2px) clamp(3px, 1vw, 4px);
   }
 
-  #floatingWindows > .windowFrame > .wfWinBody > .wfbToolbar > * {
+  #floatingWindows>.windowFrame>.wfWinBody>.wfbToolbar>* {
     flex-shrink: 0;
   }
 
-  #floatingWindows > .windowFrame > .wfWinBody > .wfbWidget {
-    padding: 10px;
-  }
-}
-
-@media (max-width: 450px) {
-  .wheelNav {
-    z-index: 2000;
-  }
-
-  #floatingWindows {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 10000;
-  }
-
-  #floatingWindows > .windowFrame {
-    border-radius: 0;
-    border: none;
-    width: 100vw;
-    height: 100vh;
-    left: 0 !important;
-    top: 0 !important;
-    display: flex;
-    flex-direction: column;
+  .wfbtItem {
+    width: var(--mobile-toolbar-item-size);
+    height: var(--mobile-toolbar-item-size);
+    min-width: var(--touch-target-min);
+    min-height: var(--touch-target-min);
   }
 
-  #floatingWindows > .windowFrame > .wfTopBar {
-    height: 56px;
-    background-color: #2196f3;
-    border: none;
-    padding: 0;
-    align-items: center;
-    flex-direction: row-reverse;
-    flex-shrink: 0;
-    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
-    min-width: auto;
-  }
-
-  #floatingWindows > .windowFrame > .wfTopBar .wftButton {
-    padding: 0 10px;
-    background: none;
-    border-radius: 0;
-    transition: background-color 300ms;
-    height: 100%;
-    width: 56px;
-    margin: 0;
-  }
-
-  #floatingWindows > .windowFrame > .wfTopBar .wftButton:hover {
-    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-
-  #floatingWindows > .windowFrame > .wfTopBar .wftTitle {
-    flex-grow: 1;
-    color: #fff;
-    font-size: 1.2em;
-    padding: 0 10px;
-    text-align: center;
-    text-transform: uppercase;
-    font-weight: 500;
-    letter-spacing: 1px;
-  }
-
-  #floatingWindows > .windowFrame > .wfWinBody > .wfbToolbar {
-    width: 50px;
-    flex-shrink: 0;
-    display: flex;
-    overflow-y: auto;
-    background-color: rgba(0, 0, 0, 0.1);
-    width: 100%;
-    padding: 2px 4px;
+  #floatingWindows>.windowFrame>.wfWinBody>.wfbWidget {
+    padding: clamp(5px, 2vw, 10px);
   }
-
-  #floatingWindows > .windowFrame > .wfWinBody > .wfbWidget {
-    padding: 5px;
-  }
-}
-
-@media (max-width: 320px) {
-  .wheelNav {
-    z-index: 2000;
-  }
-
-  #floatingWindows {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 10000;
-  }
-
-  #floatingWindows > .windowFrame {
-    border-radius: 0;
-    border: none;
-    width: 100vw;
-    height: 100vh;
-    left: 0;
-    top: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  #floatingWindows > .windowFrame > .wfTopBar {
-    height: 48px;
-    background-color: #2196f3;
-    border: none;
-    padding: 0;
-    align-items: center;
-    flex-direction: row-reverse;
-    flex-shrink: 0;
-    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16), 0px 1px 7px 0px rgba(0, 0, 0, 0.12);
-    min-width: auto;
-  }
-
-  #floatingWindows > .windowFrame > .wfTopBar .wftButton {
-    padding: 0 8px;
-    background: none;
-    border-radius: 0;
-    transition: background-color 300ms;
-    height: 100%;
-    width: 48px;
-    margin: 0;
-  }
-
-  #floatingWindows > .windowFrame > .wfTopBar .wftButton:hover {
-    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-
-  #floatingWindows > .windowFrame > .wfTopBar .wftTitle {
-    flex-grow: 1;
-    color: #fff;
-    font-size: 1.1em;
-    padding: 0 8px;
-    text-align: center;
-    text-transform: uppercase;
-    font-weight: 100;
-    letter-spacing: 1px;
-  }
-
-  #floatingWindows > .windowFrame > .wfWinBody > .wfbToolbar {
-    width: 44px;
-    flex-shrink: 0;
-    display: flex;
-    overflow-y: auto;
-    background-color: rgba(0, 0, 0, 0.1);
-    width: 100%;
-    padding: 1px 3px;
-  }
-}
+}
\ No newline at end of file