diff --git a/css/activities.css b/css/activities.css
index 9f9d36f32c..f2fc616c66 100644
--- a/css/activities.css
+++ b/css/activities.css
@@ -14,12 +14,12 @@
 
 @import url("play-only-mode.css");
 
-*:focus:not(:focus-visible) {
+:focus:not(:focus-visible) {
   outline: none;
 }
 
-*:focus-visible {
-  outline: 2px solid #0066FF !important;
+:focus-visible {
+  outline: 2px solid #0066ff;
   outline-offset: 2px;
 }
 
@@ -72,7 +72,7 @@ body:not(.dark) #helpfulSearchDiv {
   line-height: normal;
   font-size: 24px;
   text-align: left;
-  color: #0066FF;
+  color: #0066ff;
 }
 
 #confirmation-message {
@@ -96,7 +96,7 @@ body:not(.dark) #helpfulSearchDiv {
 }
 
 .modal-title {
-  color: #0066FF;
+  color: #0066ff;
   font-size: 24px;
   margin: 0 0 16px 0;
 }
@@ -118,7 +118,7 @@ body:not(.dark) #helpfulSearchDiv {
   padding: 8px 16px;
   font-weight: bold;
   cursor: pointer;
-  background-color: #0066FF;
+  background-color: #0066ff;
   color: white;
   margin-right: 16px;
   transition: background-color 0.2s ease;
@@ -279,7 +279,7 @@ body:not(.dark) #helpfulSearchDiv {
   z-index: 10;
   display: flex;
   gap: 10px;
-  background: #2196F3;
+  background: #2196f3;
   margin: 0;
   padding: 5px;
   border-bottom: 1px solid #d9d9d9;
@@ -313,12 +313,10 @@ body:not(.dark) #helpfulSearchDiv {
   cursor: pointer;
 }
 
-
 .material-icons.md-48 {
   font-size: 32px;
 }
 
-
 .hidden {
   display: none;
 }
@@ -2038,8 +2036,8 @@ table {
 }
 
 .color-change {
-  fill: #033CD2;
-  stroke: #78E600;
+  fill: #033cd2;
+  stroke: #78e600;
   stroke-width: 3;
 }
 
@@ -2048,7 +2046,7 @@ table {
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
-  background-color: #1E88E5;
+  background-color: #1e88e5;
   color: white;
   padding: 15px 20px;
   border-radius: 8px;
@@ -2061,8 +2059,6 @@ table {
   max-width: 80%;
 }
 
-
-
 .chatInterface {
   display: flex;
   flex-direction: column;
@@ -2110,13 +2106,12 @@ table {
 
 .message-container.user {
   align-self: flex-end;
-  background-color: #DCF8C6;
+  background-color: #dcf8c6;
 }
 
-
 .lego-brick {
   display: inline-block;
-  background-color: #FF0000;
+  background-color: #ff0000;
   border: 1px solid #880000;
   margin: 2px;
 }
@@ -2197,4 +2192,4 @@ table {
     padding: 0 10px;
     box-sizing: border-box;
   }
-}
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 218fc1e31c..27fd4403e6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,116 +1,126 @@
-html, body {
-  overscroll-behavior-x: none;
+html,
+body {
+    overscroll-behavior-x: none;
 }
 
 input[type="range"] {
-  height: 4px;
-  appearance: none;
-  -webkit-appearance: none;
-  width: 250px;
+    height: 4px;
+    appearance: none;
+    -webkit-appearance: none;
+    width: 250px;
 }
 
-input[type="range"]:focus {
-  outline: none;
+input[type="range"]:focus-visible {
+    outline: 2px solid #0066ff;
+    outline-offset: 2px;
 }
 
 input[type="range"]:not(.pitchSlider)::-webkit-slider-runnable-track {
-  width: 10px;
-  height: 11px;
-  cursor: pointer;
-  animation: 0.2s;
-  box-shadow: 1px 1px 1px #000000;
-  background: #90c100;
-  border-radius: 1px;
-  border: 0px solid #010101;
+    width: 10px;
+    height: 11px;
+    cursor: pointer;
+    animation: 0.2s;
+    box-shadow: 1px 1px 1px #000000;
+    background: #90c100;
+    border-radius: 1px;
+    border: 0px solid #010101;
 }
 
 input[type="range"]:not(.pitchSlider)::-webkit-slider-thumb {
-  box-shadow: 1px 1px 1px #000031;
-  border: 1px solid #00001e;
-  height: 26px;
-  width: 26px;
-  border-radius: 15px;
-  background: blue;
-  cursor: pointer;
-  -webkit-appearance: none;
-  margin-top: -8px;
+    box-shadow: 1px 1px 1px #000031;
+    border: 1px solid #00001e;
+    height: 26px;
+    width: 26px;
+    border-radius: 15px;
+    background: blue;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -8px;
 }
 
 input[type="range"]:not(.pitchSlider):focus::-webkit-slider-runnable-track {
-  background: #90c100;
+    background: #90c100;
 }
 
 input[type="range"]:not(.pitchSlider)::-moz-range-track {
-  width: 100%;
-  height: 4px;
-  cursor: pointer;
-  animation: 0.2s;
-  box-shadow: 1px 1px 1px #000000;
-  background: #90c100;
-  border-radius: 1px;
-  border: 0px solid #010101;
+    width: 100%;
+    height: 4px;
+    cursor: pointer;
+    animation: 0.2s;
+    box-shadow: 1px 1px 1px #000000;
+    background: #90c100;
+    border-radius: 1px;
+    border: 0px solid #010101;
 }
 
 input[type="range"]:not(.pitchSlider)::-moz-range-thumb {
-  box-shadow: 1px 1px 1px #000031;
-  border: 1px solid #00001e;
-  height: 26px;
-  width: 26px;
-  border-radius: 15px;
-  background: #ffffff;
-  cursor: pointer;
+    box-shadow: 1px 1px 1px #000031;
+    border: 1px solid #00001e;
+    height: 26px;
+    width: 26px;
+    border-radius: 15px;
+    background: #ffffff;
+    cursor: pointer;
 }
 
 input[type="range"]::-ms-track {
-  width: 100%;
-  height: 11px;
-  cursor: pointer;
-  animation: 0.2s;
-  background: transparent;
-  border-color: transparent;
-  color: transparent;
+    width: 100%;
+    height: 11px;
+    cursor: pointer;
+    animation: 0.2s;
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
 }
 
 input[type="range"]::-ms-fill-lower {
-  background: #90c100;
-  border: 0px solid #010101;
-  border-radius: 2px;
-  box-shadow: 1px 1px 1px #000000;
+    background: #90c100;
+    border: 0px solid #010101;
+    border-radius: 2px;
+    box-shadow: 1px 1px 1px #000000;
 }
 
 input[type="range"]::-ms-fill-upper {
-  background: #90c100;
-  border: 0px solid #010101;
-  border-radius: 2px;
-  box-shadow: 1px 1px 1px #000000;
+    background: #90c100;
+    border: 0px solid #010101;
+    border-radius: 2px;
+    box-shadow: 1px 1px 1px #000000;
 }
 
 input[type="range"]::-ms-thumb {
-  margin-top: 1px;
-  box-shadow: 1px 1px 1px #000031;
-  border: 1px solid #00001e;
-  height: 26px;
-  width: 26px;
-  border-radius: 15px;
-  background: #ffffff;
-  cursor: pointer;
+    margin-top: 1px;
+    box-shadow: 1px 1px 1px #000031;
+    border: 1px solid #00001e;
+    height: 26px;
+    width: 26px;
+    border-radius: 15px;
+    background: #ffffff;
+    cursor: pointer;
 }
 
 input[type="range"]:focus::-ms-fill-lower {
-  background: #90c100;
+    background: #90c100;
 }
 
 input[type="range"]:focus::-ms-fill-upper {
-  background: #90c100;
+    background: #90c100;
 }
 
 .lego-brick {
     display: inline-block;
-    background-color: #FF0000;
+    background-color: #ff0000;
     border: 1px solid #880000;
     margin: 2px;
 }
 
-.lego-size-1 { width: 20px; height: 10px; }
-.lego-size-2 { width: 40px; height: 10px; }
+.lego-size-1 {
+    width: 20px;
+    height: 10px;
+}
+
+.lego-size-2 {
+    width: 40px;
+    height: 10px;
+}
+
 /* ... more sizes ... */