From 966034ef04057329f2f2dd7e3de44406267c6dff Mon Sep 17 00:00:00 2001
From: Ben <ben399399@naver.com>
Date: Sun, 15 Aug 2021 02:32:48 +0900
Subject: [PATCH 1/5] add interaction to key

---
 muson/style.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/muson/style.css b/muson/style.css
index 3bb1054..34890c2 100644
--- a/muson/style.css
+++ b/muson/style.css
@@ -360,6 +360,17 @@ body {
         -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
         -7px -3px 7px rgba(201, 149, 135, 0.55),
         -10px -10px 15px rgba(201, 149, 135, 0.25);
+    transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    cursor: pointer;
+}
+.key-container > div:hover {
+    box-shadow: -5px 0 4px -2px #edecfa inset, -8px 0 6px -6px #ebeff8 inset, 3px 0 1px -1px #e9d4cf inset,
+        6px 0 5px -5px #e1e8fa inset, 0 0 0.25px 0.25px #e9d4cf, -0.75px -0.75px 1px -0.5px #e9d4cf, 0 1px 1px #bea19b,
+        -2px -2px 1px -0.5px rgba(150, 90, 64, 0.5), -2px -1px 2px rgba(201, 149, 135, 0.55),
+        -3px -3px 15px rgba(201, 149, 135, 0.25);
+    transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+    transform: scaleY(0.96);
+    transform-origin: bottom center;
 }
 
 .letter-container {

From 088128aa8130dac6203c95ba01ff443c49063522 Mon Sep 17 00:00:00 2001
From: Ben <ben399399@naver.com>
Date: Sun, 15 Aug 2021 04:14:38 +0900
Subject: [PATCH 2/5] fix formatting

---
 muson/style.css | 1042 ++++++++++++++++++-----------------------------
 1 file changed, 391 insertions(+), 651 deletions(-)

diff --git a/muson/style.css b/muson/style.css
index 34890c2..9c221f8 100644
--- a/muson/style.css
+++ b/muson/style.css
@@ -6,23 +6,22 @@
  Inspired by the Muson toy synth.
 */
 
-
 :root {
-    --letter-1: #2E1F23;
-    --letter-2: #1A1A24;
+    --letter-1: #2e1f23;
+    --letter-2: #1a1a24;
 
     --button-1: #171310;
-    --button-2: #18171F;
+    --button-2: #18171f;
     --button-3: #353541;
-    --button-4: #302E33;
+    --button-4: #302e33;
 
-    --center-1: #0F1622;
-    --center-2: #171D33;
+    --center-1: #0f1622;
+    --center-2: #171d33;
     --center-3: #222632;
     --center-4: #313842;
 
-    --center-5: #1C1F30;
-    --center-6: #3D3A4D;
+    --center-5: #1c1f30;
+    --center-6: #3d3a4d;
 }
 
 * {
@@ -32,8 +31,8 @@
 }
 
 body {
-    background-color: #CFD6F0;
-    background-image: linear-gradient(45deg, #CFD6F0, #F0F2FE);
+    background-color: #cfd6f0;
+    background-image: linear-gradient(45deg, #cfd6f0, #f0f2fe);
     min-height: 100vh;
 }
 
@@ -52,47 +51,20 @@ body {
 
     border-radius: 6px;
 
-    background-color: #FFD9D0;
-    background-image: linear-gradient(
-        135deg,
-        #EFC4BB,
-        #F6D0C7,
-        #FDE0DA
-    );
-
-    box-shadow: 2px 0 1.5px -1.5px #7C5558 inset,
-        3.5px 0 2.5px -2.5px #AE857F inset,
-        4.5px 0 2.5px -2.5px #D8B5AF inset,
-        5.5px 0 2.5px -2.5px #DBBBB0 inset,
-        6.5px 0 2.5px -2.5px #DFBDB1 inset,
-        
-        -3px 0 2px -2px #F9EAE5 inset,
-        -3.5px 0 2px -2px #FFF0ED inset,
-        -4.5px 0 2px -2px #FDDFD4 inset,
-        -5.5px 0 2px -2px #FEE1DB inset,
-        
-        0 2px 2px -2px #EBCDCF inset,
-        0 4px 2px -2px #EEC8C7 inset,
-        0 5px 2px -2px #F4CFC7 inset,
-        
-        0 -2px 1.5px -1.5px #E8D4DD inset,
-        0 -4.5px 1.5px -1.5px #F4CFC7 inset,
-        0 -5px 1.5px -1.5px #FFFDFB inset,
-        
-        -30px -30px 10px rgba(114, 86, 98, 0.05),
-        -25px -25px 10px rgba(114, 86, 98, 0.1),
-        -20px -20px 10px rgba(114, 86, 98, 0.075),
-        -10px -10px 10px rgba(114, 86, 98, 0.1),
-        -5px -5px 10px rgba(114, 86, 98, 0.125),
-        -50px -90px 30px rgba(114, 86, 98, 0.15),
-        -45px -80px 30px rgba(114, 86, 98, 0.125),
-        -40px -70px 30px rgba(114, 86, 98, 0.1),
-        -35px -60px 30px rgba(114, 86, 98, 0.075),
-        -45px -50px 30px rgba(114, 86, 98, 0.05),
-        
-        -2px 0 5px rgba(137, 124, 142, 0.5),
-        0 0 10px rgba(137, 124, 142, 0.1),
-        0 0 20px rgba(137, 124, 142, 0.05),
+    background-color: #ffd9d0;
+    background-image: linear-gradient(135deg, #efc4bb, #f6d0c7, #fde0da);
+
+    box-shadow: 2px 0 1.5px -1.5px #7c5558 inset, 3.5px 0 2.5px -2.5px #ae857f inset, 4.5px 0 2.5px -2.5px #d8b5af inset,
+        5.5px 0 2.5px -2.5px #dbbbb0 inset, 6.5px 0 2.5px -2.5px #dfbdb1 inset, -3px 0 2px -2px #f9eae5 inset,
+        -3.5px 0 2px -2px #fff0ed inset, -4.5px 0 2px -2px #fddfd4 inset, -5.5px 0 2px -2px #fee1db inset,
+        0 2px 2px -2px #ebcdcf inset, 0 4px 2px -2px #eec8c7 inset, 0 5px 2px -2px #f4cfc7 inset,
+        0 -2px 1.5px -1.5px #e8d4dd inset, 0 -4.5px 1.5px -1.5px #f4cfc7 inset, 0 -5px 1.5px -1.5px #fffdfb inset,
+        -30px -30px 10px rgba(114, 86, 98, 0.05), -25px -25px 10px rgba(114, 86, 98, 0.1),
+        -20px -20px 10px rgba(114, 86, 98, 0.075), -10px -10px 10px rgba(114, 86, 98, 0.1),
+        -5px -5px 10px rgba(114, 86, 98, 0.125), -50px -90px 30px rgba(114, 86, 98, 0.15),
+        -45px -80px 30px rgba(114, 86, 98, 0.125), -40px -70px 30px rgba(114, 86, 98, 0.1),
+        -35px -60px 30px rgba(114, 86, 98, 0.075), -45px -50px 30px rgba(114, 86, 98, 0.05),
+        -2px 0 5px rgba(137, 124, 142, 0.5), 0 0 10px rgba(137, 124, 142, 0.1), 0 0 20px rgba(137, 124, 142, 0.05),
         0 0 50px rgba(255, 245, 250, 0.5);
 }
 
@@ -102,42 +74,17 @@ body {
     height: 220px;
     margin-left: -8px;
     border-radius: 6px 6px 2px 2px;
-    background-image: linear-gradient(#FAD2CA, #F9D1C7);
-
-    box-shadow: 2px 0 1.5px -1.5px #7C5558 inset,
-        3.5px 0 2.5px -2.5px #AE857F inset,
-        4.5px 0 2.5px -2.5px #D8B5AF inset,
-        5.5px 0 2.5px -2.5px #DBBBB0 inset,
-        6.5px 0 2.5px -2.5px #DFBDB1 inset,
-        
-        -3px 0 2px -2px #F9EAE5 inset,
-        -3.5px 0 2px -2px #FFF0ED inset,
-        -4.5px 0 2px -2px #FDDFD4 inset,
-        -5.5px 0 2px -2px #FEE1DB inset,
-        
-        0 2px 2px -2px #EBCDCF inset,
-        0 4px 2px -2px #EEC8C7 inset,
-        0 5px 2px -2px #F4CFC7 inset,
-        
-        0 -2px 1.5px -1.5px #F9D1C7 inset,
-        0 -4.5px 1.5px -1.5px #F9D1C7 inset,
-        0 -5px 1.5px -1.5px #FFEAE4 inset,
-        
-        
-        2px 12px 1.5px -6px #F9D1C7,
-        1px 11px 1.5px -6px #F9D1C7,
-        1px 10px 1.5px -6px #F9D1C7,
-        1px 9px 1.5px -5px #F9D1C7,
-        1px 8px 1.5px -5px #F9D1C7,
-        1px 7px 1.5px -5px #F9D1C7,
-        1px 6px 1.5px -5px #F9D1C7,
-        3px 5px 1.5px -2px #F9D1C7,
-        2px 4px 1.5px -2px #F9D1C7,
-        1px 3px 1.5px -2px #F9D1C7,
-        
-        3px 13px 1px -6px #F9D1C7,
-        3px 12px 4px -6px rgba(126, 80, 67, 0.25),
-        -2px 25px 30px -3px rgba(126, 80, 67, 0.025),
+    background-image: linear-gradient(#fad2ca, #f9d1c7);
+
+    box-shadow: 2px 0 1.5px -1.5px #7c5558 inset, 3.5px 0 2.5px -2.5px #ae857f inset, 4.5px 0 2.5px -2.5px #d8b5af inset,
+        5.5px 0 2.5px -2.5px #dbbbb0 inset, 6.5px 0 2.5px -2.5px #dfbdb1 inset, -3px 0 2px -2px #f9eae5 inset,
+        -3.5px 0 2px -2px #fff0ed inset, -4.5px 0 2px -2px #fddfd4 inset, -5.5px 0 2px -2px #fee1db inset,
+        0 2px 2px -2px #ebcdcf inset, 0 4px 2px -2px #eec8c7 inset, 0 5px 2px -2px #f4cfc7 inset,
+        0 -2px 1.5px -1.5px #f9d1c7 inset, 0 -4.5px 1.5px -1.5px #f9d1c7 inset, 0 -5px 1.5px -1.5px #ffeae4 inset,
+        2px 12px 1.5px -6px #f9d1c7, 1px 11px 1.5px -6px #f9d1c7, 1px 10px 1.5px -6px #f9d1c7,
+        1px 9px 1.5px -5px #f9d1c7, 1px 8px 1.5px -5px #f9d1c7, 1px 7px 1.5px -5px #f9d1c7, 1px 6px 1.5px -5px #f9d1c7,
+        3px 5px 1.5px -2px #f9d1c7, 2px 4px 1.5px -2px #f9d1c7, 1px 3px 1.5px -2px #f9d1c7, 3px 13px 1px -6px #f9d1c7,
+        3px 12px 4px -6px rgba(126, 80, 67, 0.25), -2px 25px 30px -3px rgba(126, 80, 67, 0.025),
         -2px 35px 35px -3px rgba(126, 80, 67, 0.075);
 
     position: relative;
@@ -148,21 +95,19 @@ body {
     width: 310px;
     height: 165px;
     background-color: transparent;
-    
+
     position: absolute;
     top: 25px;
     right: 65px;
 
     border-radius: 1px;
 
-    box-shadow: 1px -1px 1px #DEB3AC inset,
-        -2px 0 1px -1px #FFDBD3 inset,
-        0 -1.5px 1px #FFDFD3 inset,
-        0 70.25px 1px -70px #B58475;
+    box-shadow: 1px -1px 1px #deb3ac inset, -2px 0 1px -1px #ffdbd3 inset, 0 -1.5px 1px #ffdfd3 inset,
+        0 70.25px 1px -70px #b58475;
 }
 
 .muson-frame:before {
-    content: "";
+    content: '';
     display: block;
     width: 320px;
     height: 25px;
@@ -175,22 +120,19 @@ body {
     top: -25px;
     left: -10px;
 
-    box-shadow: -0.5px 1.25px 0.75px -0.25px #D4A89D,
-        0.5px 0 0.75px -0.25px #F3C9BD,
-        0 -1px 0.5px -0.5px rgba(243, 204, 197, 1),
-        0 -1px 1px #F7CBC0 inset,
-        0 0 3px 4px #FCD1CA inset;
+    box-shadow: -0.5px 1.25px 0.75px -0.25px #d4a89d, 0.5px 0 0.75px -0.25px #f3c9bd,
+        0 -1px 0.5px -0.5px rgba(243, 204, 197, 1), 0 -1px 1px #f7cbc0 inset, 0 0 3px 4px #fcd1ca inset;
 }
 
 .muson-frame:after {
-    content: "";
+    content: '';
     display: block;
     width: 45px;
     height: 39px;
     border-radius: 0.5px;
 
     background-image: radial-gradient(rgba(255, 222, 213, 0.25), rgba(255, 222, 213, 0) 60%),
-        repeating-linear-gradient(#F8D2C5 0 24%, #FDD9C9 25% 49%, #F6D1BF 50% 74%, #FDD4C0 75% 100%);
+        repeating-linear-gradient(#f8d2c5 0 24%, #fdd9c9 25% 49%, #f6d1bf 50% 74%, #fdd4c0 75% 100%);
     background-size: 100% 100%, 4px 4px;
 
     position: absolute;
@@ -202,13 +144,8 @@ body {
 
     opacity: 0.95;
 
-    box-shadow: 0 -1.5px 1px -0.5px #DEB3AC inset,
-        0 -2px 1px -0.5px #FFDFD3 inset,
-        -1px 0 1px #FFDED5 inset,
-        1px 0 1px -0.5px #FFDED5,
-        1px 0 1px #FBD5CA inset,
-        -1px 0 1px -0.5px #FBD5CA,
-        0 1.75px 1px -1px #B58475;
+    box-shadow: 0 -1.5px 1px -0.5px #deb3ac inset, 0 -2px 1px -0.5px #ffdfd3 inset, -1px 0 1px #ffded5 inset,
+        1px 0 1px -0.5px #ffded5, 1px 0 1px #fbd5ca inset, -1px 0 1px -0.5px #fbd5ca, 0 1.75px 1px -1px #b58475;
 }
 
 .rainbow {
@@ -221,25 +158,22 @@ body {
     left: 8px;
 
     background-color: #fff;
-    background-image: linear-gradient(#1E202F 0 12%,
-        #495AC2 12.5% 24.5%,
-        #1250C7 25% 37%,
-        #039CEC 37.5% 49.5%,
-        #DFC63F 50% 62%,
-        #FED13F 62.5% 74.5%,
-        #FC672F 75% 87%,
-        #FD3A48 87.5% 100%
+    background-image: linear-gradient(
+        #1e202f 0 12%,
+        #495ac2 12.5% 24.5%,
+        #1250c7 25% 37%,
+        #039cec 37.5% 49.5%,
+        #dfc63f 50% 62%,
+        #fed13f 62.5% 74.5%,
+        #fc672f 75% 87%,
+        #fd3a48 87.5% 100%
     );
-    
+
     border-radius: 1px;
 
-    box-shadow: 0 -2px 2px -2px rgba(255, 220, 211, 1) inset,
-        0px 0 1.25px 1px #FEDDD6 inset,
-        0 0 1px 1.5px rgba(82, 58, 56, 0.5) inset,
-        0 0 2.5px 3px rgba(82, 58, 56, 0.2) inset,
-        0 0 4px 5px rgba(82, 58, 56, 0.1) inset,
-        -1px 0 1px #DDDAE3,
-        0 0 5px 3px #F6DACF;
+    box-shadow: 0 -2px 2px -2px rgba(255, 220, 211, 1) inset, 0px 0 1.25px 1px #feddd6 inset,
+        0 0 1px 1.5px rgba(82, 58, 56, 0.5) inset, 0 0 2.5px 3px rgba(82, 58, 56, 0.2) inset,
+        0 0 4px 5px rgba(82, 58, 56, 0.1) inset, -1px 0 1px #dddae3, 0 0 5px 3px #f6dacf;
 }
 
 .speaker-bar {
@@ -248,20 +182,15 @@ body {
     height: 219px;
 
     background-color: transparent;
-    
+
     border-radius: 6px 6px 2px 2px;
     position: absolute;
     top: 1px;
     left: 2px;
 
-    box-shadow: 0 -10px 2px -2px #F9D1C7 inset,
-        0 0 1px #F9D1C7,
-        -10px 0 3px -3px #FFE0D3 inset,
-        5px 0 3px -3px #FFE0D3,
-        7px 0 2px -5px rgba(166, 122, 111, 0.15),
-        21px 0 3px -20px rgba(95, 64, 56, 0.15),
+    box-shadow: 0 -10px 2px -2px #f9d1c7 inset, 0 0 1px #f9d1c7, -10px 0 3px -3px #ffe0d3 inset, 5px 0 3px -3px #ffe0d3,
+        7px 0 2px -5px rgba(166, 122, 111, 0.15), 21px 0 3px -20px rgba(95, 64, 56, 0.15),
         -9px -5px 5px rgba(254, 210, 201, 0.5) inset;
-
 }
 
 .speakers {
@@ -277,37 +206,25 @@ body {
     margin: 0 auto;
     top: 15px;
 
-    background-image: linear-gradient(90deg, transparent, #E8C2B6 20% 80%, transparent),
-        linear-gradient(transparent 0 12.5%, 
-            #EECEC1 12.5% 25%,
-            #67473C 37.5% 50%, 
-            #4A251F 50% 62.5%, 
+    background-image: linear-gradient(90deg, transparent, #e8c2b6 20% 80%, transparent),
+        linear-gradient(
+            transparent 0 12.5%,
+            #eecec1 12.5% 25%,
+            #67473c 37.5% 50%,
+            #4a251f 50% 62.5%,
             transparent 82% 100%
-        ), linear-gradient(
-            #EEC4B4,
-            #E8C6BC
-        );
+        ),
+        linear-gradient(#eec4b4, #e8c6bc);
     background-size: 6px 100%, 9px 9px, 100% 100%;
     background-repeat: no-repeat, repeat, repeat;
     background-position: center center, top left, top left;
 
-    box-shadow: 0 0 2px 0.5px #F9D1C7,
-        -1.75px -1.75px 1.5px -1px #F9D1C7,
-        -2px -2px 5px -2px #F9D1C7,
-
-        -5px -25px 20px -5px rgba(83, 23, 0, 0.05) inset,
-        -5px -15px 15px -5px rgba(83, 23, 0, 0.05) inset,
-        -10px -35px 30px -10px rgba(83, 23, 0, 0.025) inset,
-
-        5px 25px 20px -5px rgba(255, 243, 238, 0.1) inset,
-        5px 15px 15px -5px rgba(255, 243, 238, 0.05) inset,
-        10px 35px 30px -10px rgba(255, 243, 238, 0.025) inset,
-
-        0 0 2px 0.5px #FEDCD3 inset,
-        -2px -2px 5px -1px rgba(245, 203, 191, 0.5) inset,
-        0 14px 1px 25.5px #F6D0C7 inset,
-        0 14px 1px 26.5px #EFC1B2 inset,
-        0 14px 1px 30px #F0C3B0 inset;
+    box-shadow: 0 0 2px 0.5px #f9d1c7, -1.75px -1.75px 1.5px -1px #f9d1c7, -2px -2px 5px -2px #f9d1c7,
+        -5px -25px 20px -5px rgba(83, 23, 0, 0.05) inset, -5px -15px 15px -5px rgba(83, 23, 0, 0.05) inset,
+        -10px -35px 30px -10px rgba(83, 23, 0, 0.025) inset, 5px 25px 20px -5px rgba(255, 243, 238, 0.1) inset,
+        5px 15px 15px -5px rgba(255, 243, 238, 0.05) inset, 10px 35px 30px -10px rgba(255, 243, 238, 0.025) inset,
+        0 0 2px 0.5px #fedcd3 inset, -2px -2px 5px -1px rgba(245, 203, 191, 0.5) inset, 0 14px 1px 25.5px #f6d0c7 inset,
+        0 14px 1px 26.5px #efc1b2 inset, 0 14px 1px 30px #f0c3b0 inset;
 }
 
 .key-container {
@@ -324,22 +241,13 @@ body {
     border-radius: 1px;
     background-color: #821510;
 
-    box-shadow: -10px -10px 10px -5px rgba(58, 12, 2, 0.2),
-    
-        -2px 0 1px #BCA7A6 inset,
-        1px 1px 1px 1px #E8D1C9,
-        2px 2px 2px 1px #FFE3D5,
-        3px 3px 4px 1px #FDE0D2,
-        
-        -1px -1px 1px 0 #8E675F;
+    box-shadow: -10px -10px 10px -5px rgba(58, 12, 2, 0.2), -2px 0 1px #bca7a6 inset, 1px 1px 1px 1px #e8d1c9,
+        2px 2px 2px 1px #ffe3d5, 3px 3px 4px 1px #fde0d2, -1px -1px 1px 0 #8e675f;
 }
 
 .key-container > div {
     background-color: #fff;
-    background-image: linear-gradient(90deg,
-        #E7EDF9,
-        #F0F4FD
-    );
+    background-image: linear-gradient(90deg, #e7edf9, #f0f4fd);
     border-radius: 5px;
     position: relative;
     top: -3px;
@@ -347,18 +255,9 @@ body {
     height: 100%;
     height: calc(100% + 2px);
 
-
-    box-shadow: -5px 0 4px -2px #EDECFA inset,
-        -8px 0 6px -6px #EBEFF8 inset,
-        3px 0 1px -1px #E9D4CF inset,
-        6px 0 5px -5px #E1E8FA inset,
-
-        0 0 0.25px 0.25px #E9D4CF,
-        -0.75px -0.75px 1px -0.5px #E9D4CF,
-        0 1px 1px #BEA19B,
-        
-        -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
-        -7px -3px 7px rgba(201, 149, 135, 0.55),
+    box-shadow: -5px 0 4px -2px #edecfa inset, -8px 0 6px -6px #ebeff8 inset, 3px 0 1px -1px #e9d4cf inset,
+        6px 0 5px -5px #e1e8fa inset, 0 0 0.25px 0.25px #e9d4cf, -0.75px -0.75px 1px -0.5px #e9d4cf, 0 1px 1px #bea19b,
+        -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5), -7px -3px 7px rgba(201, 149, 135, 0.55),
         -10px -10px 15px rgba(201, 149, 135, 0.25);
     transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
     cursor: pointer;
@@ -389,84 +288,68 @@ body {
 
     border-radius: 3px;
 
-    box-shadow: -0.5px -0.5px 0.75px #B98A7A,
-        -2px -2px 2px #E0B9A8,
-        0.5px 0.5px 1px -0.25px #E1B8A6 inset,
-        1px 1px 1px 0.5px #E9BCA9 inset,
-        4px 4px 4px rgba(251, 228, 222, 0.25) inset;
+    box-shadow: -0.5px -0.5px 0.75px #b98a7a, -2px -2px 2px #e0b9a8, 0.5px 0.5px 1px -0.25px #e1b8a6 inset,
+        1px 1px 1px 0.5px #e9bca9 inset, 4px 4px 4px rgba(251, 228, 222, 0.25) inset;
 
     padding: 5px;
 }
 
 .letter-container > div {
-    background-color: #19161D;
-    background-image: linear-gradient(
-        var(--letter-1) 20%,
-        var(--letter-2) 30% 50%,
-        #2C2934 50%,
-        #1C1B29,
-        #342127
-    );
+    background-color: #19161d;
+    background-image: linear-gradient(var(--letter-1) 20%, var(--letter-2) 30% 50%, #2c2934 50%, #1c1b29, #342127);
 
     border-radius: 1px;
 
-    box-shadow: 0 0.5px 0.5px #A6857E inset,
-        0 1px 2px rgba(67, 38, 40, 0.25) inset,
-        0.5px 0 0.25px rgba(105, 90, 95, 0.5),
-        
-        0 -1px 0.5px #4D3326 inset,
-        0 -15px 5px -5px #2A1A1A inset,
-        0 1px 1px #D6B6A7,
-        0 5px 3px #F0D0C1,
-        
-        0 12px 5px rgba(26, 26, 36, 0.1) inset;
+    box-shadow: 0 0.5px 0.5px #a6857e inset, 0 1px 2px rgba(67, 38, 40, 0.25) inset,
+        0.5px 0 0.25px rgba(105, 90, 95, 0.5), 0 -1px 0.5px #4d3326 inset, 0 -15px 5px -5px #2a1a1a inset,
+        0 1px 1px #d6b6a7, 0 5px 3px #f0d0c1, 0 12px 5px rgba(26, 26, 36, 0.1) inset;
 
     position: relative;
 }
 
 .letter-container > div:nth-child(2) {
-    --letter-1: #D55622;
-    --letter-2: #E05F0B;
+    --letter-1: #d55622;
+    --letter-2: #e05f0b;
 }
 
 .letter-container > div:nth-child(3) {
-    --letter-1: #FE3339;
-    --letter-2: #FE3336;
+    --letter-1: #fe3339;
+    --letter-2: #fe3336;
 }
 
 .letter-container > div:nth-child(4) {
-    --letter-1: #F84524;
-    --letter-2: #FA5229;
+    --letter-1: #f84524;
+    --letter-2: #fa5229;
 }
 
 .letter-container > div:nth-child(5) {
-    --letter-1: #F78336;
-    --letter-2: #FA9634;
+    --letter-1: #f78336;
+    --letter-2: #fa9634;
 }
 
 .letter-container > div:nth-child(6) {
-    --letter-1: #FDC32A;
-    --letter-2: #FCDA47;
+    --letter-1: #fdc32a;
+    --letter-2: #fcda47;
 }
 
 .letter-container > div:nth-child(7) {
-    --letter-1: #DEBF27;
-    --letter-2: #D8D03D;
+    --letter-1: #debf27;
+    --letter-2: #d8d03d;
 }
 
 .letter-container > div:nth-child(8) {
-    --letter-1: #03A7DA;
-    --letter-2: #0BB3FA;
+    --letter-1: #03a7da;
+    --letter-2: #0bb3fa;
 }
 
 .letter-container > div:nth-child(9) {
-    --letter-1: #2D50B4;
-    --letter-2: #3362CA;
+    --letter-1: #2d50b4;
+    --letter-2: #3362ca;
 }
 
 .letter-container > div:nth-child(10) {
     --letter-1: #734897;
-    --letter-2: #6D56BE;
+    --letter-2: #6d56be;
 }
 
 .letter-container > div > p {
@@ -477,12 +360,9 @@ body {
     margin: 0 auto;
     text-align: center;
     font-size: 13px;
-    color: #E6DFEF;
+    color: #e6dfef;
     font-family: sans-serif;
-    text-shadow: 0.15px 0 0.5px #E6DFEF,
-        -0.15px 0 0.5px #E6DFEF,
-        1px 0 1px #33292A,
-        -2px 0 2px #1A1420;
+    text-shadow: 0.15px 0 0.5px #e6dfef, -0.15px 0 0.5px #e6dfef, 1px 0 1px #33292a, -2px 0 2px #1a1420;
 }
 
 .button-container {
@@ -500,44 +380,22 @@ body {
 
     background-color: transparent;
 
-    box-shadow: 0 0 2px #DDABA0 inset,
-        0 0 1px #DDABA0,
-        0 -1px 2px #F1CBC2,
-        0 -1.5px 2px #FDE4DD,
-        0 1px 2px #E9CDBF,
-        0 1.5px 2px #FADACF,
-        
-        0 1.5px 1.5px -0.5px #D69C8E inset,
-        0 10px 10px -5px #E0B2A2 inset,
+    box-shadow: 0 0 2px #ddaba0 inset, 0 0 1px #ddaba0, 0 -1px 2px #f1cbc2, 0 -1.5px 2px #fde4dd, 0 1px 2px #e9cdbf,
+        0 1.5px 2px #fadacf, 0 1.5px 1.5px -0.5px #d69c8e inset, 0 10px 10px -5px #e0b2a2 inset,
         0 -10px 5px -5px rgba(178, 83, 65, 1) inset;
 }
 
 .button-container .button {
     border-radius: 3px;
 
-    background-image: linear-gradient(
-        var(--button-1),
-        var(--button-2),
-        var(--button-3),
-        var(--button-4)
-    );
+    background-image: linear-gradient(var(--button-1), var(--button-2), var(--button-3), var(--button-4));
 
-    box-shadow: 0 0 0.25px var(--button-3),
-        -0.5px -0.75px 1px  rgba(241, 249, 255, 0.15) inset,
-        -0.75px -1.5px 1.5px rgba(44, 6, 13, 0.05) inset,
-    
-        0 -0.5px 0.75px 0.25px var(--button-1),
-        0 0.5px 0.75px 0.25px var(--button-4),
-
-        0 -0.75px 2px -0.75px var(--button-1),
-        0 0.75px 2px -0.75px var(--button-4),
-
-        -0.5px -2px 3px 0.75px rgba(44, 6, 13, 0.9),
-        -15px -20px 20px 2px rgba(150, 90, 64, 0.35),
-        
-        -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
-        -7px -3px 7px rgba(201, 149, 135, 0.55),
-        -10px -10px 15px rgba(201, 149, 135, 0.25);
+    box-shadow: 0 0 0.25px var(--button-3), -0.5px -0.75px 1px rgba(241, 249, 255, 0.15) inset,
+        -0.75px -1.5px 1.5px rgba(44, 6, 13, 0.05) inset, 0 -0.5px 0.75px 0.25px var(--button-1),
+        0 0.5px 0.75px 0.25px var(--button-4), 0 -0.75px 2px -0.75px var(--button-1),
+        0 0.75px 2px -0.75px var(--button-4), -0.5px -2px 3px 0.75px rgba(44, 6, 13, 0.9),
+        -15px -20px 20px 2px rgba(150, 90, 64, 0.35), -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
+        -7px -3px 7px rgba(201, 149, 135, 0.55), -10px -10px 15px rgba(201, 149, 135, 0.25);
 
     position: relative;
     bottom: -3px;
@@ -550,146 +408,146 @@ body {
 }
 
 .button-container .button:nth-child(2) {
-    --button-1: #884B36;
-    --button-2: #8A4631;
-    --button-3: #BD6E48;
-    --button-4: #C2724D;
-
-    --center-1: #AC5B3D;
-    --center-2: #AE5E43;
-    --center-3: #BD6E48;
-    --center-4: #AA624A;
-    --center-5: #AE5E3D;
-    --center-6: #C77E5B;
+    --button-1: #884b36;
+    --button-2: #8a4631;
+    --button-3: #bd6e48;
+    --button-4: #c2724d;
+
+    --center-1: #ac5b3d;
+    --center-2: #ae5e43;
+    --center-3: #bd6e48;
+    --center-4: #aa624a;
+    --center-5: #ae5e3d;
+    --center-6: #c77e5b;
 
     z-index: 10;
 }
 
 .button-container .button:nth-child(3) {
-    --button-1: #C1353E;
-    --button-2: #C22B3A;
-    --button-3: #E42D49;
-    --button-4: #E32C3E;
-
-    --center-1: #D5132B;
-    --center-2: #DD1F3B;
-    --center-3: #E42849;
-    --center-4: #E33E50;
-    --center-5: #D51A39;
-    --center-6: #F44661;
-    
+    --button-1: #c1353e;
+    --button-2: #c22b3a;
+    --button-3: #e42d49;
+    --button-4: #e32c3e;
+
+    --center-1: #d5132b;
+    --center-2: #dd1f3b;
+    --center-3: #e42849;
+    --center-4: #e33e50;
+    --center-5: #d51a39;
+    --center-6: #f44661;
+
     z-index: 9;
 }
 
 .button-container .button:nth-child(4) {
-    --button-1: #CC3929;
-    --button-2: #D73825;
-    --button-3: #FD5332;
-    --button-4: #F2501F;
-
-    --center-1: #F83D1E;
-    --center-2: #FD4022;
-    --center-3: #FC4D2E;
-    --center-4: #FF5A3D;
-    --center-5: #F0361F;
-    --center-6: #FF6959;
-    
+    --button-1: #cc3929;
+    --button-2: #d73825;
+    --button-3: #fd5332;
+    --button-4: #f2501f;
+
+    --center-1: #f83d1e;
+    --center-2: #fd4022;
+    --center-3: #fc4d2e;
+    --center-4: #ff5a3d;
+    --center-5: #f0361f;
+    --center-6: #ff6959;
+
     z-index: 8;
 }
 
 .button-container .button:nth-child(5) {
-    --button-1: #F2AC26;
-    --button-2: #F0AC19;
-    --button-3: #F0B31C;
-    --button-4: #ECAF19;
-
-    --center-1: #E8A321;
-    --center-2: #F0AD14;
-    --center-3: #F3B61D;
-    --center-4: #F1A943;
-    --center-5: #EBAA09;
-    --center-6: #FBC131;
-    
+    --button-1: #f2ac26;
+    --button-2: #f0ac19;
+    --button-3: #f0b31c;
+    --button-4: #ecaf19;
+
+    --center-1: #e8a321;
+    --center-2: #f0ad14;
+    --center-3: #f3b61d;
+    --center-4: #f1a943;
+    --center-5: #ebaa09;
+    --center-6: #fbc131;
+
     z-index: 7;
 }
 
 .button-container .button:nth-child(6) {
-    --button-1: #FCB829;
-    --button-2: #F7CF31;
-    --button-3: #FFDB3C;
-    --button-4: #FBDB4C;
-
-    --center-1: #FFD531;
-    --center-2: #F6DC41;
-    --center-3: #FFDA3B;
-    --center-4: #FFE470;
-    --center-5: #FFD038;
-    --center-6: #FFE160;
-    
+    --button-1: #fcb829;
+    --button-2: #f7cf31;
+    --button-3: #ffdb3c;
+    --button-4: #fbdb4c;
+
+    --center-1: #ffd531;
+    --center-2: #f6dc41;
+    --center-3: #ffda3b;
+    --center-4: #ffe470;
+    --center-5: #ffd038;
+    --center-6: #ffe160;
+
     z-index: 6;
 }
 
 .button-container .button:nth-child(7) {
-    --button-1: #B5D496;
-    --button-2: #A1D890;
-    --button-3: #B5F4A7;
-    --button-4: #B3EAA4;
-
-    --center-1: #BDE899;
-    --center-2: #B8ED9F;
-    --center-3: #C6F6AA;
-    --center-4: #B7E6B8;
-    --center-5: #C6F6AC;
-    --center-6: #D9FEBB;
-    
+    --button-1: #b5d496;
+    --button-2: #a1d890;
+    --button-3: #b5f4a7;
+    --button-4: #b3eaa4;
+
+    --center-1: #bde899;
+    --center-2: #b8ed9f;
+    --center-3: #c6f6aa;
+    --center-4: #b7e6b8;
+    --center-5: #c6f6ac;
+    --center-6: #d9febb;
+
     z-index: 5;
 }
 
 .button-container .button:nth-child(8) {
-    --button-1: #3F88B5;
-    --button-2: #3494C7;
-    --button-3: #0FCEFB;
-    --button-4: #15CAF7;
-
-    --center-1: #26B7F0;
-    --center-2: #05BEFF;
-    --center-3: #04C6FB;
-    --center-4: #23D7FF;
-    --center-5: #08C2F5;
-    --center-6: #22D9FF;
-    
+    --button-1: #3f88b5;
+    --button-2: #3494c7;
+    --button-3: #0fcefb;
+    --button-4: #15caf7;
+
+    --center-1: #26b7f0;
+    --center-2: #05beff;
+    --center-3: #04c6fb;
+    --center-4: #23d7ff;
+    --center-5: #08c2f5;
+    --center-6: #22d9ff;
+
     z-index: 4;
 }
 
 .button-container .button:nth-child(9) {
-    --button-1: #4058A2;
-    --button-2: #3C5FB9;
-    --button-3: #0D7BF4;
-    --button-4: #2680F8;
-
-    --center-1: #1864DC;
-    --center-2: #0071F1;
-    --center-3: #1A7DE5;
-    --center-4: #346DD4;
-    --center-5: #016EE3;
-    --center-6: #5298F0;
-    
+    --button-1: #4058a2;
+    --button-2: #3c5fb9;
+    --button-3: #0d7bf4;
+    --button-4: #2680f8;
+
+    --center-1: #1864dc;
+    --center-2: #0071f1;
+    --center-3: #1a7de5;
+    --center-4: #346dd4;
+    --center-5: #016ee3;
+    --center-6: #5298f0;
+
     z-index: 3;
 }
 
 .button-container .button:nth-child(10) {
-    --button-1: #3D306E;
-    --button-2: #503C79;
-    --button-3: #6A5ABD;
-    --button-4: #6A5ABD;
-
-    --center-1: #5141A3;
-    --center-2: #5647AE;
-    --center-3: #6052B3;
-    --center-4: #6758AB;
-    --center-5: #574DAE;
-    --center-6: #7B6BCE;
-    
+    --button-1: #3d306e;
+    --button-2: #503c79;
+    --button-3: #6a5abd;
+    --button-4: #6a5abd;
+
+    --center-1: #5141a3;
+    --center-2: #5647ae;
+    --center-3: #6052b3;
+    --center-4: #6758ab;
+    --center-5: #574dae;
+    --center-6: #7b6bce;
+
     z-index: 2;
 }
 
@@ -697,7 +555,7 @@ body {
     display: block;
     width: 100%;
     height: 35px;
-    
+
     width: calc(100% + 2px);
 
     border-radius: 2px;
@@ -706,47 +564,48 @@ body {
     top: 15px;
     left: -1px;
 
-    background-image: linear-gradient(
-        var(--center-1),
-        var(--center-2),
-        var(--center-3)
-    );
+    background-image: linear-gradient(var(--center-1), var(--center-2), var(--center-3));
 
-    box-shadow: 0 0 0.5px var(--center-3),
-    
-    -3px -20px 14px 3px rgba(20, 7, 14, 0.15),
-    3px 20px 14px -3px rgba(241, 249, 255, 0.025),
-    -3px -17px 14px -3px rgba(241, 249, 255, 0.025),
-
-    0 -20px 10px -10px rgba(44, 6, 13, 0.05) inset,
-    0 -0px 10px -10px rgba(44, 6, 13, 0.05) inset,
-    0 30px 20px -10px rgba(241, 249, 255, 0.05) inset,
-    
-    0 -0.25px 0.75px 0.25px var(--center-1),
-    0 0.5px 0.75px 0.25px var(--center-3),
-
-    0 -0.75px 2px -0.75px var(--center-1),
-    0 0.75px 2px -0.75px var(--center-3),
-    
-    0 1px 1.75px -0.75px var(--center-4) inset,
-    0 -3px 4px -3px var(--center-5) inset,
-    
-    0 3px 3px -3px var(--center-6),
-    
-    0 -4px 7px -4px var(--center-1),
-    0 4px 7px -4px var(--center-6);
-}
-
-.button-container .button .center:nth-child(1) { z-index: 22; }
-.button-container .button .center:nth-child(2) { z-index: 21; }
-.button-container .button .center:nth-child(3) { z-index: 20; }
-.button-container .button .center:nth-child(4) { z-index: 19; }
-.button-container .button .center:nth-child(5) { z-index: 18; }
-.button-container .button .center:nth-child(6) { z-index: 17; }
-.button-container .button .center:nth-child(7) { z-index: 16; }
-.button-container .button .center:nth-child(8) { z-index: 15; }
-.button-container .button .center:nth-child(9) { z-index: 14; }
-.button-container .button .center:nth-child(10) { z-index: 13; }
+    box-shadow: 0 0 0.5px var(--center-3), -3px -20px 14px 3px rgba(20, 7, 14, 0.15),
+        3px 20px 14px -3px rgba(241, 249, 255, 0.025), -3px -17px 14px -3px rgba(241, 249, 255, 0.025),
+        0 -20px 10px -10px rgba(44, 6, 13, 0.05) inset, 0 -0px 10px -10px rgba(44, 6, 13, 0.05) inset,
+        0 30px 20px -10px rgba(241, 249, 255, 0.05) inset, 0 -0.25px 0.75px 0.25px var(--center-1),
+        0 0.5px 0.75px 0.25px var(--center-3), 0 -0.75px 2px -0.75px var(--center-1),
+        0 0.75px 2px -0.75px var(--center-3), 0 1px 1.75px -0.75px var(--center-4) inset,
+        0 -3px 4px -3px var(--center-5) inset, 0 3px 3px -3px var(--center-6), 0 -4px 7px -4px var(--center-1),
+        0 4px 7px -4px var(--center-6);
+}
+
+.button-container .button .center:nth-child(1) {
+    z-index: 22;
+}
+.button-container .button .center:nth-child(2) {
+    z-index: 21;
+}
+.button-container .button .center:nth-child(3) {
+    z-index: 20;
+}
+.button-container .button .center:nth-child(4) {
+    z-index: 19;
+}
+.button-container .button .center:nth-child(5) {
+    z-index: 18;
+}
+.button-container .button .center:nth-child(6) {
+    z-index: 17;
+}
+.button-container .button .center:nth-child(7) {
+    z-index: 16;
+}
+.button-container .button .center:nth-child(8) {
+    z-index: 15;
+}
+.button-container .button .center:nth-child(9) {
+    z-index: 14;
+}
+.button-container .button .center:nth-child(10) {
+    z-index: 13;
+}
 
 .range-container {
     display: block;
@@ -760,20 +619,10 @@ body {
 
     border-radius: 0 0 6px 6px;
 
-    box-shadow: -1px 1px 3px -1px #945A42,
-        0.5px -1px 1px #945A42 inset,
-        -4px 2px 7px -2.25px #BD8974,
-        1px -1px 1px -1px #BD8974 inset,
-        1px -1px 1.5px -1px #CF9981 inset,
-        
-        -0.5px -0.5px 0.5px #FFEDE0 inset,
-        -1.5px -1.5px 2px -1px #FFE8DB inset,
-        -4px -1.5px 4px -2px #FEDACA inset,
-        
-        2px 1px 2px -1px #FEDACA,
-        
-        0 0 10px #FBDAD1,
-        -10px 10px 25px rgba(60, 3, 0, 0.015);
+    box-shadow: -1px 1px 3px -1px #945a42, 0.5px -1px 1px #945a42 inset, -4px 2px 7px -2.25px #bd8974,
+        1px -1px 1px -1px #bd8974 inset, 1px -1px 1.5px -1px #cf9981 inset, -0.5px -0.5px 0.5px #ffede0 inset,
+        -1.5px -1.5px 2px -1px #ffe8db inset, -4px -1.5px 4px -2px #fedaca inset, 2px 1px 2px -1px #fedaca,
+        0 0 10px #fbdad1, -10px 10px 25px rgba(60, 3, 0, 0.015);
 }
 
 .range-plate {
@@ -787,46 +636,35 @@ body {
 
     border-radius: 1.5px;
 
-    background-color: #BBC9E6;
+    background-color: #bbc9e6;
 
-    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
+    background-image: linear-gradient(
+            rgba(134, 141, 169, 0.1) 0 25%,
+            transparent 25% 50%,
+            rgba(143, 150, 178, 0.1) 50% 75%,
+            transparent 75%
+        ),
         linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
-        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
-        radial-gradient(#7B84A3, #929CB7, #BBC9E6);
-    background-size: 100% 4px, 
-        20% 100%, 
-        200px 200px, 
-        200% 300%;
-    background-repeat: repeat, 
-        repeat, 
-        no-repeat, 
-        no-repeat;
-    background-position: center center, 
-        center center, 
-        center center, 
-        100% 50%;
-
-    box-shadow: 0 0 1px 0.25px #F6D0C7 inset,
-        0 -0.5px 0.75px 0.5px #8D6E6C inset,
-        0 0.75px 0.5px 0.25px #E7C9C7,
-        0 0.5px 2.5px 1.5px #F6D5CE,
-        
-        0 0 10px rgba(100, 98, 120, 0.25) inset;
+        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%), radial-gradient(#7b84a3, #929cb7, #bbc9e6);
+    background-size: 100% 4px, 20% 100%, 200px 200px, 200% 300%;
+    background-repeat: repeat, repeat, no-repeat, no-repeat;
+    background-position: center center, center center, center center, 100% 50%;
 
+    box-shadow: 0 0 1px 0.25px #f6d0c7 inset, 0 -0.5px 0.75px 0.5px #8d6e6c inset, 0 0.75px 0.5px 0.25px #e7c9c7,
+        0 0.5px 2.5px 1.5px #f6d5ce, 0 0 10px rgba(100, 98, 120, 0.25) inset;
 }
 
 .ranges {
     list-style-type: none;
     font-family: sans-serif;
     font-weight: 600;
-    color: #1F233E;
+    color: #1f233e;
 
     font-size: 8px;
     position: absolute;
     top: 6px;
 
-    text-shadow: 0 0 0.2px #1F233E,
-        0 0 1px #BCBCD0;
+    text-shadow: 0 0 0.2px #1f233e, 0 0 1px #bcbcd0;
 }
 
 .ranges li {
@@ -849,7 +687,7 @@ body {
     width: 50px;
     height: 50px;
 
-    background-color: #606B89;
+    background-color: #606b89;
 
     position: absolute;
     left: 50.25px;
@@ -857,23 +695,12 @@ body {
 
     border-radius: 50px;
 
-    background-image: linear-gradient(20deg, #484653, #606B89, #8792AE);
-
-    box-shadow: -0.5px 0.5px 0.5px #606B89,
-        0 0 1px 0.15px #606B89 inset,
-        0 0 1px 0.25px #606B89,
-        0 0 4px 1px #7886A1,
-        
-        0 15px 10px -2px rgba(51, 46, 52, 0.25),
-
-        -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
-        
-        -12px -25px 17px 4px rgba(62, 21, 8, 0.22),
-        -30px -45px 25px 4px rgba(62, 21, 8, 0.125),
-        -45px -50px 35px 8px rgba(62, 21, 8, 0.125),
-        
-        -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
-        
+    background-image: linear-gradient(20deg, #484653, #606b89, #8792ae);
+
+    box-shadow: -0.5px 0.5px 0.5px #606b89, 0 0 1px 0.15px #606b89 inset, 0 0 1px 0.25px #606b89, 0 0 4px 1px #7886a1,
+        0 15px 10px -2px rgba(51, 46, 52, 0.25), -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
+        -12px -25px 17px 4px rgba(62, 21, 8, 0.22), -30px -45px 25px 4px rgba(62, 21, 8, 0.125),
+        -45px -50px 35px 8px rgba(62, 21, 8, 0.125), -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
         0 0 20px 3px rgba(202, 206, 217, 0.75);
 }
 
@@ -891,15 +718,12 @@ body {
     top: -3.25px;
 
     background-image: linear-gradient(90deg, rgba(17, 18, 23, 0.5), transparent),
-        radial-gradient(#1A2332, #1C1F2D 66%, transparent 69%),
-        linear-gradient(90deg, rgba(17, 18, 23, 0.75), transparent),
-        linear-gradient(rgba(24, 31, 49, 0.9), transparent),
-        linear-gradient(45deg, transparent 30%, #7C899C, transparent 70%),
-        linear-gradient(-45deg, transparent 30%, #7C899C, transparent 70%),
-        radial-gradient(#1A2332, #1C1F2D, #10172A);
+        radial-gradient(#1a2332, #1c1f2d 66%, transparent 69%),
+        linear-gradient(90deg, rgba(17, 18, 23, 0.75), transparent), linear-gradient(rgba(24, 31, 49, 0.9), transparent),
+        linear-gradient(45deg, transparent 30%, #7c899c, transparent 70%),
+        linear-gradient(-45deg, transparent 30%, #7c899c, transparent 70%), radial-gradient(#1a2332, #1c1f2d, #10172a);
 
-    box-shadow: 0 0 1px 0.75px #10172A,
-        0 0 2px 0.75px rgba(67, 68, 88, 0.5);
+    box-shadow: 0 0 1px 0.75px #10172a, 0 0 2px 0.75px rgba(67, 68, 88, 0.5);
 }
 
 .left p {
@@ -907,27 +731,26 @@ body {
     font-family: sans-serif;
     font-weight: 600;
     font-size: 6.5px;
-    color: #1F233E;
+    color: #1f233e;
     letter-spacing: 0.75px;
 
     position: absolute;
     left: 107px;
     top: 29px;
 
-    text-shadow: 0 0 0.2px #1F233E,
-        0 0 1px #959AB2;
+    text-shadow: 0 0 0.2px #1f233e, 0 0 1px #959ab2;
 }
 
-.center p, .center ul li {
+.center p,
+.center ul li {
     text-transform: uppercase;
     font-family: sans-serif;
     font-weight: 600;
     font-size: 6px;
-    color: #1F233E;
+    color: #1f233e;
     letter-spacing: 0.5px;
 
-    text-shadow: 0 0 0.2px #1F233E,
-        0 0 1px #959AB2;
+    text-shadow: 0 0 0.2px #1f233e, 0 0 1px #959ab2;
 
     list-style-type: none;
 }
@@ -958,7 +781,7 @@ body {
     width: 35px;
     height: 17px;
 
-    background-color: #0B090E;
+    background-color: #0b090e;
 
     border-radius: 35px;
 
@@ -967,21 +790,12 @@ body {
     top: 22px;
 
     background-image: linear-gradient(rgba(30, 31, 57, 0), rgba(30, 31, 57, 0.5), rgba(30, 31, 57, 0)),
-        linear-gradient(#09080E, #0A090F);
-
-    box-shadow: 0 0.5px 0.5px #353245 inset,
-        0 -0.25px 0.5px #4F515E inset,
-        0 -0.75px 0.75px #30354B inset,
-        0 1px 1px -0.25px #55515F inset,
-        0 1.25px 1px -0.5px #28252E inset,
-        0 0 5px 1px #1E1F39 inset,
-        
-        0 0 0.5px 0.25px #353245,
-        0 0 1px #B4B9CC,
-        0 0.15px 2.5px -0.5px #9FA5BE,
-        
-        0 10px 10px -3px rgba(208, 209, 227, 0.5),
-        0 20px 20px rgba(208, 209, 227, 0.35);
+        linear-gradient(#09080e, #0a090f);
+
+    box-shadow: 0 0.5px 0.5px #353245 inset, 0 -0.25px 0.5px #4f515e inset, 0 -0.75px 0.75px #30354b inset,
+        0 1px 1px -0.25px #55515f inset, 0 1.25px 1px -0.5px #28252e inset, 0 0 5px 1px #1e1f39 inset,
+        0 0 0.5px 0.25px #353245, 0 0 1px #b4b9cc, 0 0.15px 2.5px -0.5px #9fa5be,
+        0 10px 10px -3px rgba(208, 209, 227, 0.5), 0 20px 20px rgba(208, 209, 227, 0.35);
 }
 
 .switch-button {
@@ -990,43 +804,32 @@ body {
     height: 15px;
     border-radius: 15px;
 
-    background-color: #140E1C;
+    background-color: #140e1c;
 
     position: absolute;
     top: 0.35px;
     left: 0.45px;
 
     background-image: radial-gradient(rgba(208, 209, 227, 0.5), rgba(208, 209, 227, 0) 40%),
-        linear-gradient(90deg, #140E1C, #2D2C3C);
-
-    background-repeat: no-repeat,
-        no-repeat;
+        linear-gradient(90deg, #140e1c, #2d2c3c);
 
-    background-size: 120% 140%,
-        100% 100%;
+    background-repeat: no-repeat, no-repeat;
 
-    background-position: 3px 3px,
-        top left;
+    background-size: 120% 140%, 100% 100%;
 
-    box-shadow: 0 0 0.5px 0.75px #9A9CA9 inset,
-        0 0 0.15px #9A9CA9,
-        0 0 0.5px 0.25px #1B1B25,
-        0 0 1px #1E1E26,
-        
-        0 5px 10px -2px rgba(51, 46, 52, 0.25),
+    background-position: 3px 3px, top left;
 
-        -5px -10px 10px 2px rgba(62, 21, 8, 0.15),
-        -10px -17px 20px 5px rgba(62, 21, 8, 0.1),
-        -20px -23px 25px 6px rgba(62, 21, 8, 0.15),
+    box-shadow: 0 0 0.5px 0.75px #9a9ca9 inset, 0 0 0.15px #9a9ca9, 0 0 0.5px 0.25px #1b1b25, 0 0 1px #1e1e26,
+        0 5px 10px -2px rgba(51, 46, 52, 0.25), -5px -10px 10px 2px rgba(62, 21, 8, 0.15),
+        -10px -17px 20px 5px rgba(62, 21, 8, 0.1), -20px -23px 25px 6px rgba(62, 21, 8, 0.15),
         -30px -35px 30px 10px rgba(62, 21, 8, 0.1);
 }
 
-
 .right .slider-wrapper {
     width: 50px;
     height: 50px;
 
-    background-color: #606B89;
+    background-color: #606b89;
 
     position: absolute;
     right: 50.25px;
@@ -1034,23 +837,12 @@ body {
 
     border-radius: 50px;
 
-    background-image: linear-gradient(20deg, #3C3642, #4B485B, #535166);
-
-    box-shadow: -0.5px 0.5px 0.5px #606B89,
-        0 0 1px 0.15px #606B89 inset,
-        0 0 1px 0.25px #606B89,
-        0 0 4px 1px #7886A1,
-        
-        0 15px 10px -2px rgba(51, 46, 52, 0.25),
-
-        -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
-        
-        -12px -25px 17px 4px rgba(62, 21, 8, 0.15),
-        -30px -45px 25px 4px rgba(62, 21, 8, 0.075),
-        -45px -50px 35px 8px rgba(62, 21, 8, 0.075),
-        
-        -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
-        
+    background-image: linear-gradient(20deg, #3c3642, #4b485b, #535166);
+
+    box-shadow: -0.5px 0.5px 0.5px #606b89, 0 0 1px 0.15px #606b89 inset, 0 0 1px 0.25px #606b89, 0 0 4px 1px #7886a1,
+        0 15px 10px -2px rgba(51, 46, 52, 0.25), -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
+        -12px -25px 17px 4px rgba(62, 21, 8, 0.15), -30px -45px 25px 4px rgba(62, 21, 8, 0.075),
+        -45px -50px 35px 8px rgba(62, 21, 8, 0.075), -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
         0 0 20px 3px rgba(202, 206, 217, 0.75);
 }
 
@@ -1067,34 +859,31 @@ body {
     left: 3.5px;
     top: -3.5px;
 
-    background-image: radial-gradient(#1F273A, rgba(22, 26, 38, 1) 66%, transparent 69%),
-        linear-gradient(90deg, rgba(22, 26, 38, 0.75), transparent),
-        linear-gradient(rgba(24, 31, 49, 0.9), transparent),
-        linear-gradient(45deg, transparent 30%, #7C899C, transparent 70%),
-        linear-gradient(-45deg, transparent 30%, #7C899C, transparent 70%),
-        radial-gradient(#1F273A, #212C42, #171D2D);
+    background-image: radial-gradient(#1f273a, rgba(22, 26, 38, 1) 66%, transparent 69%),
+        linear-gradient(90deg, rgba(22, 26, 38, 0.75), transparent), linear-gradient(rgba(24, 31, 49, 0.9), transparent),
+        linear-gradient(45deg, transparent 30%, #7c899c, transparent 70%),
+        linear-gradient(-45deg, transparent 30%, #7c899c, transparent 70%), radial-gradient(#1f273a, #212c42, #171d2d);
 
-    box-shadow: 0 0 1px 0.75px rgba(22, 26, 38, 1),
-        0 0 2px 0.75px rgba(67, 68, 88, 0.5);
+    box-shadow: 0 0 1px 0.75px rgba(22, 26, 38, 1), 0 0 2px 0.75px rgba(67, 68, 88, 0.5);
 }
 
-.right ul, .right p {
+.right ul,
+.right p {
     text-transform: uppercase;
     font-family: sans-serif;
     font-weight: 600;
-    color: #1F233E;
+    color: #1f233e;
 
     font-size: 6.5px;
 
     letter-spacing: 0.5px;
 
-    text-shadow: 0 0 0.2px #1F233E,
-        0 0 1px #BCBCD0;
+    text-shadow: 0 0 0.2px #1f233e, 0 0 1px #bcbcd0;
 }
 
 .right ul {
     list-style-type: none;
-    
+
     position: absolute;
     left: 415px;
     top: 9px;
@@ -1124,50 +913,40 @@ body {
     height: 150px;
 
     background-color: #656581;
-    
+
     border-radius: 1px;
 
     position: absolute;
     left: 60px;
     top: 360px;
 
-    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
+    background-image: linear-gradient(
+            rgba(134, 141, 169, 0.1) 0 25%,
+            transparent 25% 50%,
+            rgba(143, 150, 178, 0.1) 50% 75%,
+            transparent 75%
+        ),
         linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
-        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
-        radial-gradient(#7B84A3, #929CB7, #BBC9E6);
-    background-size: 100% 4px, 
-        20% 100%, 
-        200px 200px, 
-        200% 300%;
-    background-repeat: repeat, 
-        repeat, 
-        no-repeat, 
-        no-repeat;
-    background-position: center center, 
-        center center, 
-        center center, 
-        100% 50%;
-
-
-    box-shadow: 0 0 1px #E1C3B8 inset,
-        0 0 1px 0.5px #DFC6C1,
-        0 0 2px 1px #E2C1BA,
-        0.5px 0 0.5px 0.5px #929CB7 inset,
-        -0.5px 0 0.5px 0.5px #929CB7 inset;
+        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%), radial-gradient(#7b84a3, #929cb7, #bbc9e6);
+    background-size: 100% 4px, 20% 100%, 200px 200px, 200% 300%;
+    background-repeat: repeat, repeat, no-repeat, no-repeat;
+    background-position: center center, center center, center center, 100% 50%;
+
+    box-shadow: 0 0 1px #e1c3b8 inset, 0 0 1px 0.5px #dfc6c1, 0 0 2px 1px #e2c1ba, 0.5px 0 0.5px 0.5px #929cb7 inset,
+        -0.5px 0 0.5px 0.5px #929cb7 inset;
 }
 
 .speed-container p {
     text-transform: uppercase;
     font-family: sans-serif;
     font-weight: 600;
-    color: #1F233E;
+    color: #1f233e;
 
     font-size: 7px;
 
     letter-spacing: 0.5px;
 
-    text-shadow: 0 0 0.2px #1F233E,
-        0 0 1px #929CB7;
+    text-shadow: 0 0 0.2px #1f233e, 0 0 1px #929cb7;
 }
 
 .speed-container p:first-child {
@@ -1187,18 +966,16 @@ body {
     width: 5px;
     height: 100px;
     border-radius: 6px;
-    background-color: #120D14;
+    background-color: #120d14;
 
     position: absolute;
     top: 25px;
     left: 17px;
 
-    background-image: linear-gradient(#120D14, #1B0B15, #1D1419);
+    background-image: linear-gradient(#120d14, #1b0b15, #1d1419);
 
-    box-shadow: -0.75px 0 1px #9391A5 inset,
-        0.75px 0 1px #A79DA8 inset,
-        -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
-        0 0 3px #9FA7AA;
+    box-shadow: -0.75px 0 1px #9391a5 inset, 0.75px 0 1px #a79da8 inset, -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
+        0 0 3px #9fa7aa;
 }
 
 .speed-button-container {
@@ -1213,11 +990,9 @@ body {
     top: 35px;
     left: 8px;
 
-    background-image: linear-gradient(70deg, #63687E 80%, #9A9BBA);
+    background-image: linear-gradient(70deg, #63687e 80%, #9a9bba);
 
-    box-shadow: 0 0 1px #63687E,
-        0 0 0.5px #63687E,
-        0 0 4px 0.5px #63687E;
+    box-shadow: 0 0 1px #63687e, 0 0 0.5px #63687e, 0 0 4px 0.5px #63687e;
 }
 
 .speed-button {
@@ -1232,24 +1007,13 @@ body {
     left: -3.5px;
     top: -1px;
 
-    background-image: radial-gradient(#353B51, #1E2736, #262739);
-
-    box-shadow: 0 0 0.5px 0.25px #262739,
-        0 0 4px rgba(19, 18, 32, 0.5),
-        
-        8px 10px 10px rgba(51, 46, 52, 0.25),
-
-        -30px -30px 30px 30px rgba(62, 21, 8, 0.1),
-        
-        -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
-        -15px -25px 20px 3px rgba(62, 21, 8, 0.1),
-        -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
-        
-        -5px -15px 10px -2px rgba(202, 206, 217, 0.15),
-        
-        0 0 20px 3px rgba(202, 206, 217, 0.75);
-}
+    background-image: radial-gradient(#353b51, #1e2736, #262739);
 
+    box-shadow: 0 0 0.5px 0.25px #262739, 0 0 4px rgba(19, 18, 32, 0.5), 8px 10px 10px rgba(51, 46, 52, 0.25),
+        -30px -30px 30px 30px rgba(62, 21, 8, 0.1), -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
+        -15px -25px 20px 3px rgba(62, 21, 8, 0.1), -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
+        -5px -15px 10px -2px rgba(202, 206, 217, 0.15), 0 0 20px 3px rgba(202, 206, 217, 0.75);
+}
 
 .vol-container {
     display: block;
@@ -1257,50 +1021,40 @@ body {
     height: 150px;
 
     background-color: #656581;
-    
+
     border-radius: 1px;
 
     position: absolute;
     right: 60px;
     top: 360px;
 
-    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
+    background-image: linear-gradient(
+            rgba(134, 141, 169, 0.1) 0 25%,
+            transparent 25% 50%,
+            rgba(143, 150, 178, 0.1) 50% 75%,
+            transparent 75%
+        ),
         linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
-        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
-        radial-gradient(#7B84A3, #929CB7, #BBC9E6);
-    background-size: 100% 4px, 
-        20% 100%, 
-        200px 200px, 
-        200% 300%;
-    background-repeat: repeat, 
-        repeat, 
-        no-repeat, 
-        no-repeat;
-    background-position: center center, 
-        center center, 
-        center center, 
-        100% 50%;
-
-
-    box-shadow: 0 0 1px #E1C3B8 inset,
-        0 0 1px 0.5px #DFC6C1,
-        0 0 2px 1px #E2C1BA,
-        0.5px 0 0.5px 0.5px #929CB7 inset,
-        -0.5px 0 0.5px 0.5px #929CB7 inset;
+        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%), radial-gradient(#7b84a3, #929cb7, #bbc9e6);
+    background-size: 100% 4px, 20% 100%, 200px 200px, 200% 300%;
+    background-repeat: repeat, repeat, no-repeat, no-repeat;
+    background-position: center center, center center, center center, 100% 50%;
+
+    box-shadow: 0 0 1px #e1c3b8 inset, 0 0 1px 0.5px #dfc6c1, 0 0 2px 1px #e2c1ba, 0.5px 0 0.5px 0.5px #929cb7 inset,
+        -0.5px 0 0.5px 0.5px #929cb7 inset;
 }
 
 .vol-container p {
     text-transform: uppercase;
     font-family: sans-serif;
     font-weight: 600;
-    color: #1F233E;
+    color: #1f233e;
 
     font-size: 7px;
 
     letter-spacing: 0.5px;
 
-    text-shadow: 0 0 0.2px #1F233E,
-        0 0 1px #929CB7;
+    text-shadow: 0 0 0.2px #1f233e, 0 0 1px #929cb7;
 }
 
 .vol-container p:first-child {
@@ -1320,18 +1074,16 @@ body {
     width: 5px;
     height: 100px;
     border-radius: 6px;
-    background-color: #120D14;
+    background-color: #120d14;
 
     position: absolute;
     top: 25px;
     left: 17px;
 
-    background-image: linear-gradient(#120D14, #1B0B15, #1D1419);
+    background-image: linear-gradient(#120d14, #1b0b15, #1d1419);
 
-    box-shadow: -0.75px 0 1px #9391A5 inset,
-        0.75px 0 1px #A79DA8 inset,
-        -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
-        0 0 3px #9FA7AA;
+    box-shadow: -0.75px 0 1px #9391a5 inset, 0.75px 0 1px #a79da8 inset, -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
+        0 0 3px #9fa7aa;
 }
 
 .vol-button-container {
@@ -1346,11 +1098,9 @@ body {
     top: 60px;
     left: 12px;
 
-    background-image: linear-gradient(70deg, #63687E 80%, #9A9BBA);
+    background-image: linear-gradient(70deg, #63687e 80%, #9a9bba);
 
-    box-shadow: 0 0 1px #63687E,
-        0 0 0.5px #63687E,
-        0 0 4px 0.5px #63687E;
+    box-shadow: 0 0 1px #63687e, 0 0 0.5px #63687e, 0 0 4px 0.5px #63687e;
 }
 
 .vol-button {
@@ -1365,20 +1115,10 @@ body {
     left: 3px;
     top: 1px;
 
-    background-image: radial-gradient(#353B51, #1E2736, #262739);
-
-    box-shadow: 0 0 0.5px 0.25px #262739,
-        0 0 4px rgba(19, 18, 32, 0.5),
-        
-        8px 10px 10px rgba(51, 46, 52, 0.25),
-
-        -30px -30px 30px 30px rgba(62, 21, 8, 0.1),
-        
-        -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
-        -15px -25px 20px 3px rgba(62, 21, 8, 0.1),
-        -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
-        
-        -5px -15px 10px -2px rgba(202, 206, 217, 0.15),
-        
-        0 0 20px 3px rgba(202, 206, 217, 0.75);
-}
\ No newline at end of file
+    background-image: radial-gradient(#353b51, #1e2736, #262739);
+
+    box-shadow: 0 0 0.5px 0.25px #262739, 0 0 4px rgba(19, 18, 32, 0.5), 8px 10px 10px rgba(51, 46, 52, 0.25),
+        -30px -30px 30px 30px rgba(62, 21, 8, 0.1), -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
+        -15px -25px 20px 3px rgba(62, 21, 8, 0.1), -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
+        -5px -15px 10px -2px rgba(202, 206, 217, 0.15), 0 0 20px 3px rgba(202, 206, 217, 0.75);
+}

From 4d52ebbb45f46addf545ace2d1ed58b65717d89f Mon Sep 17 00:00:00 2001
From: Ben <ben399399@naver.com>
Date: Sat, 21 Feb 2026 14:47:32 +0900
Subject: [PATCH 3/5] feat: now sings

---
 .gitignore       |   1 +
 muson/index.html | 277 +++++++++++----------
 muson/index.js   | 199 +++++++++++++++
 muson/style.css  | 631 +++++++++++++++++++++++++++++++++++------------
 4 files changed, 821 insertions(+), 287 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 muson/index.js

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e43b0f9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/muson/index.html b/muson/index.html
index ac1dcc4..eab6209 100644
--- a/muson/index.html
+++ b/muson/index.html
@@ -4,147 +4,154 @@
 
 <!-- Inspired by the Muson toy synth -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html>
     <head>
-        <link rel="stylesheet" href="style.css">
+        <link rel="stylesheet" href="style.css" />
+        <script src="./index.js"></script>
     </head>
     <body>
-      <div class="muson" aria-label="Muson Synth Illustration">
-        <div class="top-bar">
-          <div class="speaker-bar"><div class="speakers"></div></div>
-          <div class="muson-frame"><div class="rainbow"></div></div>
-        </div>
-        <div class="range-container" aria-hidden="true">
-          <div class="range-plate">
-            <div class="left">
-              <ul class="ranges">
-                <li>1–4</li>
-                <li>1–6</li>
-                <li>1–8</li>
-                <li>1–10</li>
-              </ul>
-              <p>Range</p>
-              <div class="slider-wrapper">
-                <div class="slider"></div>
-              </div>
+        <div class="muson" aria-label="Muson Synth Illustration">
+            <div class="top-bar">
+                <div class="speaker-bar"><div class="speakers"></div></div>
+                <div class="muson-frame">
+                    <div class="rainbow">
+                        MUS&nbsp;&nbsp;N
+                        <span class="line1">SYNTHESIZER</span>
+                        <span class="line2">THE SOUND OF MUSIC™</span>
+                    </div>
+                </div>
             </div>
-            <div class="center">
-              <p>Volume</p>
-              <ul>
-                <li>Lo</li>
-                <li>Med</li>
-                <li>High</li>
-              </ul>
-              <div class="switch-wrapper">
-                <div class="switch-button"></div>
-              </div>
+            <div class="range-container" aria-hidden="true">
+                <div class="range-plate">
+                    <div class="left">
+                        <ul class="ranges">
+                            <li>1–4</li>
+                            <li>1–6</li>
+                            <li>1–8</li>
+                            <li>1–10</li>
+                        </ul>
+                        <p>Range</p>
+                        <div class="slider-wrapper">
+                            <div class="slider"></div>
+                        </div>
+                    </div>
+                    <div class="center">
+                        <p>Volume</p>
+                        <ul>
+                            <li>Lo</li>
+                            <li>Med</li>
+                            <li>High</li>
+                        </ul>
+                        <div class="switch-wrapper">
+                            <div class="switch-button"></div>
+                        </div>
+                    </div>
+                    <div class="right">
+                        <p>Mode</p>
+                        <ul>
+                            <li>Off</li>
+                            <li>Organ</li>
+                            <li>Organ <br />& Synth</li>
+                        </ul>
+                        <div class="slider-wrapper">
+                            <div class="slider"></div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="right">
-              <p>Mode</p>
-              <ul>
-                <li>Off</li>
-                <li>Organ</li>
-                <li>Organ <br />& Synth</li>
-              </ul>
-              <div class="slider-wrapper">
-                <div class="slider"></div>
-              </div>
+            <div class="button-container">
+                <div class="button">
+                    <div class="center"></div>
+                </div>
+                <div class="button">
+                    <div class="center"></div>
+                </div>
+                <div class="button">
+                    <div class="center"></div>
+                </div>
+                <div class="button">
+                    <div class="center"></div>
+                </div>
+                <div class="button">
+                    <div class="center"></div>
+                </div>
+                <div class="button">
+                    <div class="center"></div>
+                </div>
+                <div class="button">
+                    <div class="center"></div>
+                </div>
+                <div class="button">
+                    <div class="center"></div>
+                </div>
+                <div class="button">
+                    <div class="center"></div>
+                </div>
+                <div class="button">
+                    <div class="center"></div>
+                </div>
+            </div>
+            <div class="letter-container" aria-hidden="true">
+                <div>
+                    <p>C</p>
+                </div>
+                <div>
+                    <p>D</p>
+                </div>
+                <div>
+                    <p>E</p>
+                </div>
+                <div>
+                    <p>F</p>
+                </div>
+                <div>
+                    <p>G</p>
+                </div>
+                <div>
+                    <p>A</p>
+                </div>
+                <div>
+                    <p>B</p>
+                </div>
+                <div>
+                    <p>C</p>
+                </div>
+                <div>
+                    <p>D</p>
+                </div>
+                <div>
+                    <p>E</p>
+                </div>
+            </div>
+            <div class="key-container">
+                <div style="z-index: 12"></div>
+                <div style="z-index: 11"></div>
+                <div style="z-index: 10"></div>
+                <div style="z-index: 9"></div>
+                <div style="z-index: 8"></div>
+                <div style="z-index: 7"></div>
+                <div style="z-index: 6"></div>
+                <div style="z-index: 5"></div>
+                <div style="z-index: 4"></div>
+                <div style="z-index: 3"></div>
+            </div>
+            <div class="speed-container" aria-hidden="true">
+                <p>Fast</p>
+                <div class="speed-slider"></div>
+                <div class="speed-button-container">
+                    <div class="speed-button"></div>
+                </div>
+                <p>Slow</p>
+            </div>
+            <div class="vol-container" aria-hidden="true">
+                <p>High</p>
+                <div class="vol-slider"></div>
+                <div class="vol-button-container">
+                    <div class="vol-button"></div>
+                </div>
+                <p>Low</p>
             </div>
-          </div>
-        </div>
-        <div class="button-container">
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-          <div class="button">
-            <div class="center"></div>
-          </div>
-        </div>
-        <div class="letter-container" aria-hidden="true">
-          <div>
-            <p>C</p>
-          </div>
-          <div>
-            <p>D</p>
-          </div>
-          <div>
-            <p>E</p>
-          </div>
-          <div>
-            <p>F</p>
-          </div>
-          <div>
-            <p>G</p>
-          </div>
-          <div>
-            <p>A</p>
-          </div>
-          <div>
-            <p>B</p>
-          </div>
-          <div>
-            <p>C</p>
-          </div>
-          <div>
-            <p>D</p>
-          </div>
-          <div>
-            <p>E</p>
-          </div>
-        </div>
-        <div class="key-container">
-          <div style="z-index: 12;"></div>
-          <div style="z-index: 11;"></div>
-          <div style="z-index: 10;"></div>
-          <div style="z-index: 9;"></div>
-          <div style="z-index: 8;"></div>
-          <div style="z-index: 7;"></div>
-          <div style="z-index: 6;"></div>
-          <div style="z-index: 5;"></div>
-          <div style="z-index: 4;"></div>
-          <div style="z-index: 3;"></div>
-        </div>
-        <div class="speed-container" aria-hidden="true">
-          <p>Fast</p>
-          <div class="speed-slider"></div>
-          <div class="speed-button-container">
-            <div class="speed-button"></div>
-          </div>
-          <p>Slow</p>
-        </div>
-        <div class="vol-container" aria-hidden="true">
-          <p>High</p>
-          <div class="vol-slider"></div>
-          <div class="vol-button-container">
-            <div class="vol-button"></div>
-          </div>
-          <p>Low</p>
         </div>
-      </div>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/muson/index.js b/muson/index.js
new file mode 100644
index 0000000..3d2906d
--- /dev/null
+++ b/muson/index.js
@@ -0,0 +1,199 @@
+// Web Audio API를 사용한 신디사이저 구현
+let audioContext;
+let currentOscillator = null;
+let currentGainNode = null;
+let volumeLevel = 1; // 0: Lo, 1: Med, 2: High
+const volumeLevels = [0.15, 0.3, 0.6]; // Lo, Med, High 볼륨 값
+
+// 각 건반에 해당하는 주파수 (Hz)
+const keyFrequencies = [
+  261.63, // C4
+  293.66, // D4
+  329.63, // E4
+  349.23, // F4
+  392.0, // G4
+  440.0, // A4
+  493.88, // B4
+  523.25, // C5
+  587.33, // D5
+  659.25, // E5
+];
+
+// 음표 이름
+const noteNames = ["C4", "D4", "E4", "F4", "G4", "A4", "B4", "C5", "D5", "E5"];
+
+// 소리 재생 함수
+function playNote(frequency, noteName) {
+  // 이미 재생 중인 소리가 있으면 중지
+  if (currentOscillator) {
+    stopNote();
+  }
+
+  // AudioContext 초기화 (첫 사용자 인터랙션 시)
+  if (!audioContext) {
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  }
+
+  // Oscillator (음파 생성기) 생성
+  currentOscillator = audioContext.createOscillator();
+  currentGainNode = audioContext.createGain();
+
+  // Oscillator 설정
+  currentOscillator.type = "sine"; // 사인파 (부드러운 소리)
+  currentOscillator.frequency.setValueAtTime(
+    frequency,
+    audioContext.currentTime,
+  );
+
+  // 볼륨 설정 (페이드 인 효과)
+  const targetVolume = volumeLevels[volumeLevel];
+  currentGainNode.gain.setValueAtTime(0, audioContext.currentTime);
+  currentGainNode.gain.linearRampToValueAtTime(
+    targetVolume,
+    audioContext.currentTime + 0.05,
+  );
+
+  // 연결: Oscillator -> Gain -> Destination (스피커)
+  currentOscillator.connect(currentGainNode);
+  currentGainNode.connect(audioContext.destination);
+
+  // 재생 시작
+  currentOscillator.start(audioContext.currentTime);
+
+  console.log(
+    `Playing note: ${noteName} (${frequency} Hz) at volume level ${["Lo", "Med", "High"][volumeLevel]}`,
+  );
+}
+
+// 소리 중지 함수
+function stopNote() {
+  if (currentOscillator && currentGainNode && audioContext) {
+    const oscillatorToStop = currentOscillator;
+    const gainNodeToStop = currentGainNode;
+
+    // 부드러운 페이드 아웃 효과
+    const fadeOutTime = 0.3;
+    const currentTime = audioContext.currentTime;
+
+    try {
+      // 현재 볼륨 값 가져오기
+      const currentGain = gainNodeToStop.gain.value;
+
+      if (currentGain > 0.0001) {
+        gainNodeToStop.gain.cancelScheduledValues(currentTime);
+        gainNodeToStop.gain.setValueAtTime(currentGain, currentTime);
+        gainNodeToStop.gain.exponentialRampToValueAtTime(
+          0.0001,
+          currentTime + fadeOutTime,
+        );
+      }
+
+      // 페이드 아웃 후 완전히 중지
+      oscillatorToStop.stop(currentTime + fadeOutTime);
+    } catch (error) {
+      console.error("Error stopping note:", error);
+      try {
+        oscillatorToStop.stop();
+      } catch (e) {
+        // 이미 멈춘 경우 무시
+      }
+    }
+
+    // 즉시 null로 설정하여 새로운 소리 재생 가능하도록
+    currentOscillator = null;
+    currentGainNode = null;
+  }
+}
+
+// DOM이 로드되면 이벤트 리스너 추가
+document.addEventListener("DOMContentLoaded", () => {
+  const keyContainer = document.querySelector(".key-container");
+  const keys = keyContainer.querySelectorAll("div");
+
+  keys.forEach((key, index) => {
+    // 마우스 오버 시 소리 재생
+    key.addEventListener("mouseenter", () => {
+      playNote(keyFrequencies[index], noteNames[index]);
+      key.style.transform = "translateY(2px)"; // 시각적 피드백
+    });
+
+    // 마우스 아웃 시 소리 중지
+    key.addEventListener("mouseleave", () => {
+      stopNote();
+      key.style.transform = "translateY(0)"; // 원래 위치로
+    });
+
+    // 클릭 시에도 소리 재생
+    key.addEventListener("click", () => {
+      playNote(keyFrequencies[index], noteNames[index]);
+      // 클릭 시에는 자동으로 멈추지 않도록 설정
+      setTimeout(() => {
+        stopNote();
+      }, 500);
+    });
+
+    // 접근성을 위한 속성 추가
+    key.setAttribute("role", "button");
+    key.setAttribute("aria-label", `Play note ${noteNames[index]}`);
+    key.setAttribute("tabindex", "0");
+
+    // 키보드 지원
+    key.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        playNote(keyFrequencies[index], noteNames[index]);
+        setTimeout(() => {
+          stopNote();
+        }, 500);
+      }
+    });
+
+    // 커서 스타일 변경
+    key.style.cursor = "pointer";
+  });
+
+  // 볼륨 컨트롤 설정
+  setupVolumeControl();
+
+  console.log("Muson Synth initialized! Hover over the keys to play notes.");
+});
+
+// 볼륨 컨트롤 설정 함수
+function setupVolumeControl() {
+  const switchWrapper = document.querySelector(".center .switch-wrapper");
+  const switchButton = document.querySelector(".center .switch-button");
+
+  if (!switchWrapper || !switchButton) {
+    console.warn("Volume control elements not found");
+    return;
+  }
+
+  // 볼륨 레벨 업데이트 함수
+  function updateVolumeLevel(newLevel) {
+    volumeLevel = newLevel;
+
+    // 스위치 버튼 위치 업데이트 (3단계: 0%, 50%, 100%)
+    const positions = [5, 28, 53];
+    switchButton.style.left = `${positions[volumeLevel]}%`;
+
+    const levelNames = ["Lo", "Med", "High"];
+    console.log(`Volume set to: ${levelNames[volumeLevel]}`);
+  }
+
+  // 초기 위치 설정 (Med)
+  updateVolumeLevel(1);
+
+  // 스위치 클릭 이벤트
+  switchWrapper.addEventListener("click", (e) => {
+    // 다음 레벨로 순환 (Lo -> Med -> High -> Lo)
+    const nextLevel = (volumeLevel + 1) % 3;
+    updateVolumeLevel(nextLevel);
+  });
+
+  // 스타일 추가
+  switchWrapper.style.cursor = "pointer";
+  switchButton.style.cursor = "pointer";
+
+  // 스위치 버튼에 트랜지션 추가
+  switchButton.style.transition = "left 0.2s ease";
+}
diff --git a/muson/style.css b/muson/style.css
index 9c221f8..1611ca0 100644
--- a/muson/style.css
+++ b/muson/style.css
@@ -1,8 +1,8 @@
-/*  
+/*
  Page: https://fossheim.io
  Patreon: https://patreon.com/fossheim
  Buy Me A Coffee: https://buymeacoffee.com/fossheim
- 
+
  Inspired by the Muson toy synth.
 */
 
@@ -54,17 +54,35 @@ body {
     background-color: #ffd9d0;
     background-image: linear-gradient(135deg, #efc4bb, #f6d0c7, #fde0da);
 
-    box-shadow: 2px 0 1.5px -1.5px #7c5558 inset, 3.5px 0 2.5px -2.5px #ae857f inset, 4.5px 0 2.5px -2.5px #d8b5af inset,
-        5.5px 0 2.5px -2.5px #dbbbb0 inset, 6.5px 0 2.5px -2.5px #dfbdb1 inset, -3px 0 2px -2px #f9eae5 inset,
-        -3.5px 0 2px -2px #fff0ed inset, -4.5px 0 2px -2px #fddfd4 inset, -5.5px 0 2px -2px #fee1db inset,
-        0 2px 2px -2px #ebcdcf inset, 0 4px 2px -2px #eec8c7 inset, 0 5px 2px -2px #f4cfc7 inset,
-        0 -2px 1.5px -1.5px #e8d4dd inset, 0 -4.5px 1.5px -1.5px #f4cfc7 inset, 0 -5px 1.5px -1.5px #fffdfb inset,
-        -30px -30px 10px rgba(114, 86, 98, 0.05), -25px -25px 10px rgba(114, 86, 98, 0.1),
-        -20px -20px 10px rgba(114, 86, 98, 0.075), -10px -10px 10px rgba(114, 86, 98, 0.1),
-        -5px -5px 10px rgba(114, 86, 98, 0.125), -50px -90px 30px rgba(114, 86, 98, 0.15),
-        -45px -80px 30px rgba(114, 86, 98, 0.125), -40px -70px 30px rgba(114, 86, 98, 0.1),
-        -35px -60px 30px rgba(114, 86, 98, 0.075), -45px -50px 30px rgba(114, 86, 98, 0.05),
-        -2px 0 5px rgba(137, 124, 142, 0.5), 0 0 10px rgba(137, 124, 142, 0.1), 0 0 20px rgba(137, 124, 142, 0.05),
+    box-shadow:
+        2px 0 1.5px -1.5px #7c5558 inset,
+        3.5px 0 2.5px -2.5px #ae857f inset,
+        4.5px 0 2.5px -2.5px #d8b5af inset,
+        5.5px 0 2.5px -2.5px #dbbbb0 inset,
+        6.5px 0 2.5px -2.5px #dfbdb1 inset,
+        -3px 0 2px -2px #f9eae5 inset,
+        -3.5px 0 2px -2px #fff0ed inset,
+        -4.5px 0 2px -2px #fddfd4 inset,
+        -5.5px 0 2px -2px #fee1db inset,
+        0 2px 2px -2px #ebcdcf inset,
+        0 4px 2px -2px #eec8c7 inset,
+        0 5px 2px -2px #f4cfc7 inset,
+        0 -2px 1.5px -1.5px #e8d4dd inset,
+        0 -4.5px 1.5px -1.5px #f4cfc7 inset,
+        0 -5px 1.5px -1.5px #fffdfb inset,
+        -30px -30px 10px rgba(114, 86, 98, 0.05),
+        -25px -25px 10px rgba(114, 86, 98, 0.1),
+        -20px -20px 10px rgba(114, 86, 98, 0.075),
+        -10px -10px 10px rgba(114, 86, 98, 0.1),
+        -5px -5px 10px rgba(114, 86, 98, 0.125),
+        -50px -90px 30px rgba(114, 86, 98, 0.15),
+        -45px -80px 30px rgba(114, 86, 98, 0.125),
+        -40px -70px 30px rgba(114, 86, 98, 0.1),
+        -35px -60px 30px rgba(114, 86, 98, 0.075),
+        -45px -50px 30px rgba(114, 86, 98, 0.05),
+        -2px 0 5px rgba(137, 124, 142, 0.5),
+        0 0 10px rgba(137, 124, 142, 0.1),
+        0 0 20px rgba(137, 124, 142, 0.05),
         0 0 50px rgba(255, 245, 250, 0.5);
 }
 
@@ -76,15 +94,35 @@ body {
     border-radius: 6px 6px 2px 2px;
     background-image: linear-gradient(#fad2ca, #f9d1c7);
 
-    box-shadow: 2px 0 1.5px -1.5px #7c5558 inset, 3.5px 0 2.5px -2.5px #ae857f inset, 4.5px 0 2.5px -2.5px #d8b5af inset,
-        5.5px 0 2.5px -2.5px #dbbbb0 inset, 6.5px 0 2.5px -2.5px #dfbdb1 inset, -3px 0 2px -2px #f9eae5 inset,
-        -3.5px 0 2px -2px #fff0ed inset, -4.5px 0 2px -2px #fddfd4 inset, -5.5px 0 2px -2px #fee1db inset,
-        0 2px 2px -2px #ebcdcf inset, 0 4px 2px -2px #eec8c7 inset, 0 5px 2px -2px #f4cfc7 inset,
-        0 -2px 1.5px -1.5px #f9d1c7 inset, 0 -4.5px 1.5px -1.5px #f9d1c7 inset, 0 -5px 1.5px -1.5px #ffeae4 inset,
-        2px 12px 1.5px -6px #f9d1c7, 1px 11px 1.5px -6px #f9d1c7, 1px 10px 1.5px -6px #f9d1c7,
-        1px 9px 1.5px -5px #f9d1c7, 1px 8px 1.5px -5px #f9d1c7, 1px 7px 1.5px -5px #f9d1c7, 1px 6px 1.5px -5px #f9d1c7,
-        3px 5px 1.5px -2px #f9d1c7, 2px 4px 1.5px -2px #f9d1c7, 1px 3px 1.5px -2px #f9d1c7, 3px 13px 1px -6px #f9d1c7,
-        3px 12px 4px -6px rgba(126, 80, 67, 0.25), -2px 25px 30px -3px rgba(126, 80, 67, 0.025),
+    box-shadow:
+        2px 0 1.5px -1.5px #7c5558 inset,
+        3.5px 0 2.5px -2.5px #ae857f inset,
+        4.5px 0 2.5px -2.5px #d8b5af inset,
+        5.5px 0 2.5px -2.5px #dbbbb0 inset,
+        6.5px 0 2.5px -2.5px #dfbdb1 inset,
+        -3px 0 2px -2px #f9eae5 inset,
+        -3.5px 0 2px -2px #fff0ed inset,
+        -4.5px 0 2px -2px #fddfd4 inset,
+        -5.5px 0 2px -2px #fee1db inset,
+        0 2px 2px -2px #ebcdcf inset,
+        0 4px 2px -2px #eec8c7 inset,
+        0 5px 2px -2px #f4cfc7 inset,
+        0 -2px 1.5px -1.5px #f9d1c7 inset,
+        0 -4.5px 1.5px -1.5px #f9d1c7 inset,
+        0 -5px 1.5px -1.5px #ffeae4 inset,
+        2px 12px 1.5px -6px #f9d1c7,
+        1px 11px 1.5px -6px #f9d1c7,
+        1px 10px 1.5px -6px #f9d1c7,
+        1px 9px 1.5px -5px #f9d1c7,
+        1px 8px 1.5px -5px #f9d1c7,
+        1px 7px 1.5px -5px #f9d1c7,
+        1px 6px 1.5px -5px #f9d1c7,
+        3px 5px 1.5px -2px #f9d1c7,
+        2px 4px 1.5px -2px #f9d1c7,
+        1px 3px 1.5px -2px #f9d1c7,
+        3px 13px 1px -6px #f9d1c7,
+        3px 12px 4px -6px rgba(126, 80, 67, 0.25),
+        -2px 25px 30px -3px rgba(126, 80, 67, 0.025),
         -2px 35px 35px -3px rgba(126, 80, 67, 0.075);
 
     position: relative;
@@ -102,12 +140,15 @@ body {
 
     border-radius: 1px;
 
-    box-shadow: 1px -1px 1px #deb3ac inset, -2px 0 1px -1px #ffdbd3 inset, 0 -1.5px 1px #ffdfd3 inset,
+    box-shadow:
+        1px -1px 1px #deb3ac inset,
+        -2px 0 1px -1px #ffdbd3 inset,
+        0 -1.5px 1px #ffdfd3 inset,
         0 70.25px 1px -70px #b58475;
 }
 
 .muson-frame:before {
-    content: '';
+    content: "";
     display: block;
     width: 320px;
     height: 25px;
@@ -120,20 +161,32 @@ body {
     top: -25px;
     left: -10px;
 
-    box-shadow: -0.5px 1.25px 0.75px -0.25px #d4a89d, 0.5px 0 0.75px -0.25px #f3c9bd,
-        0 -1px 0.5px -0.5px rgba(243, 204, 197, 1), 0 -1px 1px #f7cbc0 inset, 0 0 3px 4px #fcd1ca inset;
+    box-shadow:
+        -0.5px 1.25px 0.75px -0.25px #d4a89d,
+        0.5px 0 0.75px -0.25px #f3c9bd,
+        0 -1px 0.5px -0.5px rgba(243, 204, 197, 1),
+        0 -1px 1px #f7cbc0 inset,
+        0 0 3px 4px #fcd1ca inset;
 }
 
 .muson-frame:after {
-    content: '';
+    content: "";
     display: block;
     width: 45px;
     height: 39px;
     border-radius: 0.5px;
 
-    background-image: radial-gradient(rgba(255, 222, 213, 0.25), rgba(255, 222, 213, 0) 60%),
-        repeating-linear-gradient(#f8d2c5 0 24%, #fdd9c9 25% 49%, #f6d1bf 50% 74%, #fdd4c0 75% 100%);
-    background-size: 100% 100%, 4px 4px;
+    background-image:
+        radial-gradient(rgba(255, 222, 213, 0.25), rgba(255, 222, 213, 0) 60%),
+        repeating-linear-gradient(
+            #f8d2c5 0 24%,
+            #fdd9c9 25% 49%,
+            #f6d1bf 50% 74%,
+            #fdd4c0 75% 100%
+        );
+    background-size:
+        100% 100%,
+        4px 4px;
 
     position: absolute;
     bottom: 0;
@@ -144,12 +197,26 @@ body {
 
     opacity: 0.95;
 
-    box-shadow: 0 -1.5px 1px -0.5px #deb3ac inset, 0 -2px 1px -0.5px #ffdfd3 inset, -1px 0 1px #ffded5 inset,
-        1px 0 1px -0.5px #ffded5, 1px 0 1px #fbd5ca inset, -1px 0 1px -0.5px #fbd5ca, 0 1.75px 1px -1px #b58475;
+    box-shadow:
+        0 -1.5px 1px -0.5px #deb3ac inset,
+        0 -2px 1px -0.5px #ffdfd3 inset,
+        -1px 0 1px #ffded5 inset,
+        1px 0 1px -0.5px #ffded5,
+        1px 0 1px #fbd5ca inset,
+        -1px 0 1px -0.5px #fbd5ca,
+        0 1.75px 1px -1px #b58475;
 }
 
 .rainbow {
-    display: block;
+    padding-top: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #e2e2e2;
+    font-size: 60px;
+    line-height: 46px;
+    font-weight: 800;
     width: 290px;
     height: 120px;
 
@@ -171,9 +238,28 @@ body {
 
     border-radius: 1px;
 
-    box-shadow: 0 -2px 2px -2px rgba(255, 220, 211, 1) inset, 0px 0 1.25px 1px #feddd6 inset,
-        0 0 1px 1.5px rgba(82, 58, 56, 0.5) inset, 0 0 2.5px 3px rgba(82, 58, 56, 0.2) inset,
-        0 0 4px 5px rgba(82, 58, 56, 0.1) inset, -1px 0 1px #dddae3, 0 0 5px 3px #f6dacf;
+    box-shadow:
+        0 -2px 2px -2px rgba(255, 220, 211, 1) inset,
+        0px 0 1.25px 1px #feddd6 inset,
+        0 0 1px 1.5px rgba(82, 58, 56, 0.5) inset,
+        0 0 2.5px 3px rgba(82, 58, 56, 0.2) inset,
+        0 0 4px 5px rgba(82, 58, 56, 0.1) inset,
+        -1px 0 1px #dddae3,
+        0 0 5px 3px #f6dacf;
+    .line1 {
+        font-size: 24px;
+        line-height: 10px;
+        font-weight: 800;
+        margin-top: 10px;
+        color: #2f233f;
+    }
+    .line2 {
+        font-size: 10px;
+        line-height: 6px;
+        font-weight: 700;
+        margin-top: 10px;
+        color: #2f233e;
+    }
 }
 
 .speaker-bar {
@@ -188,8 +274,13 @@ body {
     top: 1px;
     left: 2px;
 
-    box-shadow: 0 -10px 2px -2px #f9d1c7 inset, 0 0 1px #f9d1c7, -10px 0 3px -3px #ffe0d3 inset, 5px 0 3px -3px #ffe0d3,
-        7px 0 2px -5px rgba(166, 122, 111, 0.15), 21px 0 3px -20px rgba(95, 64, 56, 0.15),
+    box-shadow:
+        0 -10px 2px -2px #f9d1c7 inset,
+        0 0 1px #f9d1c7,
+        -10px 0 3px -3px #ffe0d3 inset,
+        5px 0 3px -3px #ffe0d3,
+        7px 0 2px -5px rgba(166, 122, 111, 0.15),
+        21px 0 3px -20px rgba(95, 64, 56, 0.15),
         -9px -5px 5px rgba(254, 210, 201, 0.5) inset;
 }
 
@@ -206,7 +297,8 @@ body {
     margin: 0 auto;
     top: 15px;
 
-    background-image: linear-gradient(90deg, transparent, #e8c2b6 20% 80%, transparent),
+    background-image:
+        linear-gradient(90deg, transparent, #e8c2b6 20% 80%, transparent),
         linear-gradient(
             transparent 0 12.5%,
             #eecec1 12.5% 25%,
@@ -215,16 +307,31 @@ body {
             transparent 82% 100%
         ),
         linear-gradient(#eec4b4, #e8c6bc);
-    background-size: 6px 100%, 9px 9px, 100% 100%;
+    background-size:
+        6px 100%,
+        9px 9px,
+        100% 100%;
     background-repeat: no-repeat, repeat, repeat;
-    background-position: center center, top left, top left;
-
-    box-shadow: 0 0 2px 0.5px #f9d1c7, -1.75px -1.75px 1.5px -1px #f9d1c7, -2px -2px 5px -2px #f9d1c7,
-        -5px -25px 20px -5px rgba(83, 23, 0, 0.05) inset, -5px -15px 15px -5px rgba(83, 23, 0, 0.05) inset,
-        -10px -35px 30px -10px rgba(83, 23, 0, 0.025) inset, 5px 25px 20px -5px rgba(255, 243, 238, 0.1) inset,
-        5px 15px 15px -5px rgba(255, 243, 238, 0.05) inset, 10px 35px 30px -10px rgba(255, 243, 238, 0.025) inset,
-        0 0 2px 0.5px #fedcd3 inset, -2px -2px 5px -1px rgba(245, 203, 191, 0.5) inset, 0 14px 1px 25.5px #f6d0c7 inset,
-        0 14px 1px 26.5px #efc1b2 inset, 0 14px 1px 30px #f0c3b0 inset;
+    background-position:
+        center center,
+        top left,
+        top left;
+
+    box-shadow:
+        0 0 2px 0.5px #f9d1c7,
+        -1.75px -1.75px 1.5px -1px #f9d1c7,
+        -2px -2px 5px -2px #f9d1c7,
+        -5px -25px 20px -5px rgba(83, 23, 0, 0.05) inset,
+        -5px -15px 15px -5px rgba(83, 23, 0, 0.05) inset,
+        -10px -35px 30px -10px rgba(83, 23, 0, 0.025) inset,
+        5px 25px 20px -5px rgba(255, 243, 238, 0.1) inset,
+        5px 15px 15px -5px rgba(255, 243, 238, 0.05) inset,
+        10px 35px 30px -10px rgba(255, 243, 238, 0.025) inset,
+        0 0 2px 0.5px #fedcd3 inset,
+        -2px -2px 5px -1px rgba(245, 203, 191, 0.5) inset,
+        0 14px 1px 25.5px #f6d0c7 inset,
+        0 14px 1px 26.5px #efc1b2 inset,
+        0 14px 1px 30px #f0c3b0 inset;
 }
 
 .key-container {
@@ -241,8 +348,13 @@ body {
     border-radius: 1px;
     background-color: #821510;
 
-    box-shadow: -10px -10px 10px -5px rgba(58, 12, 2, 0.2), -2px 0 1px #bca7a6 inset, 1px 1px 1px 1px #e8d1c9,
-        2px 2px 2px 1px #ffe3d5, 3px 3px 4px 1px #fde0d2, -1px -1px 1px 0 #8e675f;
+    box-shadow:
+        -10px -10px 10px -5px rgba(58, 12, 2, 0.2),
+        -2px 0 1px #bca7a6 inset,
+        1px 1px 1px 1px #e8d1c9,
+        2px 2px 2px 1px #ffe3d5,
+        3px 3px 4px 1px #fde0d2,
+        -1px -1px 1px 0 #8e675f;
 }
 
 .key-container > div {
@@ -255,17 +367,31 @@ body {
     height: 100%;
     height: calc(100% + 2px);
 
-    box-shadow: -5px 0 4px -2px #edecfa inset, -8px 0 6px -6px #ebeff8 inset, 3px 0 1px -1px #e9d4cf inset,
-        6px 0 5px -5px #e1e8fa inset, 0 0 0.25px 0.25px #e9d4cf, -0.75px -0.75px 1px -0.5px #e9d4cf, 0 1px 1px #bea19b,
-        -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5), -7px -3px 7px rgba(201, 149, 135, 0.55),
+    box-shadow:
+        -5px 0 4px -2px #edecfa inset,
+        -8px 0 6px -6px #ebeff8 inset,
+        3px 0 1px -1px #e9d4cf inset,
+        6px 0 5px -5px #e1e8fa inset,
+        0 0 0.25px 0.25px #e9d4cf,
+        -0.75px -0.75px 1px -0.5px #e9d4cf,
+        0 1px 1px #bea19b,
+        -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
+        -7px -3px 7px rgba(201, 149, 135, 0.55),
         -10px -10px 15px rgba(201, 149, 135, 0.25);
     transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
     cursor: pointer;
 }
 .key-container > div:hover {
-    box-shadow: -5px 0 4px -2px #edecfa inset, -8px 0 6px -6px #ebeff8 inset, 3px 0 1px -1px #e9d4cf inset,
-        6px 0 5px -5px #e1e8fa inset, 0 0 0.25px 0.25px #e9d4cf, -0.75px -0.75px 1px -0.5px #e9d4cf, 0 1px 1px #bea19b,
-        -2px -2px 1px -0.5px rgba(150, 90, 64, 0.5), -2px -1px 2px rgba(201, 149, 135, 0.55),
+    box-shadow:
+        -5px 0 4px -2px #edecfa inset,
+        -8px 0 6px -6px #ebeff8 inset,
+        3px 0 1px -1px #e9d4cf inset,
+        6px 0 5px -5px #e1e8fa inset,
+        0 0 0.25px 0.25px #e9d4cf,
+        -0.75px -0.75px 1px -0.5px #e9d4cf,
+        0 1px 1px #bea19b,
+        -2px -2px 1px -0.5px rgba(150, 90, 64, 0.5),
+        -2px -1px 2px rgba(201, 149, 135, 0.55),
         -3px -3px 15px rgba(201, 149, 135, 0.25);
     transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
     transform: scaleY(0.96);
@@ -288,21 +414,37 @@ body {
 
     border-radius: 3px;
 
-    box-shadow: -0.5px -0.5px 0.75px #b98a7a, -2px -2px 2px #e0b9a8, 0.5px 0.5px 1px -0.25px #e1b8a6 inset,
-        1px 1px 1px 0.5px #e9bca9 inset, 4px 4px 4px rgba(251, 228, 222, 0.25) inset;
+    box-shadow:
+        -0.5px -0.5px 0.75px #b98a7a,
+        -2px -2px 2px #e0b9a8,
+        0.5px 0.5px 1px -0.25px #e1b8a6 inset,
+        1px 1px 1px 0.5px #e9bca9 inset,
+        4px 4px 4px rgba(251, 228, 222, 0.25) inset;
 
     padding: 5px;
 }
 
 .letter-container > div {
     background-color: #19161d;
-    background-image: linear-gradient(var(--letter-1) 20%, var(--letter-2) 30% 50%, #2c2934 50%, #1c1b29, #342127);
+    background-image: linear-gradient(
+        var(--letter-1) 20%,
+        var(--letter-2) 30% 50%,
+        #2c2934 50%,
+        #1c1b29,
+        #342127
+    );
 
     border-radius: 1px;
 
-    box-shadow: 0 0.5px 0.5px #a6857e inset, 0 1px 2px rgba(67, 38, 40, 0.25) inset,
-        0.5px 0 0.25px rgba(105, 90, 95, 0.5), 0 -1px 0.5px #4d3326 inset, 0 -15px 5px -5px #2a1a1a inset,
-        0 1px 1px #d6b6a7, 0 5px 3px #f0d0c1, 0 12px 5px rgba(26, 26, 36, 0.1) inset;
+    box-shadow:
+        0 0.5px 0.5px #a6857e inset,
+        0 1px 2px rgba(67, 38, 40, 0.25) inset,
+        0.5px 0 0.25px rgba(105, 90, 95, 0.5),
+        0 -1px 0.5px #4d3326 inset,
+        0 -15px 5px -5px #2a1a1a inset,
+        0 1px 1px #d6b6a7,
+        0 5px 3px #f0d0c1,
+        0 12px 5px rgba(26, 26, 36, 0.1) inset;
 
     position: relative;
 }
@@ -362,7 +504,11 @@ body {
     font-size: 13px;
     color: #e6dfef;
     font-family: sans-serif;
-    text-shadow: 0.15px 0 0.5px #e6dfef, -0.15px 0 0.5px #e6dfef, 1px 0 1px #33292a, -2px 0 2px #1a1420;
+    text-shadow:
+        0.15px 0 0.5px #e6dfef,
+        -0.15px 0 0.5px #e6dfef,
+        1px 0 1px #33292a,
+        -2px 0 2px #1a1420;
 }
 
 .button-container {
@@ -380,22 +526,41 @@ body {
 
     background-color: transparent;
 
-    box-shadow: 0 0 2px #ddaba0 inset, 0 0 1px #ddaba0, 0 -1px 2px #f1cbc2, 0 -1.5px 2px #fde4dd, 0 1px 2px #e9cdbf,
-        0 1.5px 2px #fadacf, 0 1.5px 1.5px -0.5px #d69c8e inset, 0 10px 10px -5px #e0b2a2 inset,
+    box-shadow:
+        0 0 2px #ddaba0 inset,
+        0 0 1px #ddaba0,
+        0 -1px 2px #f1cbc2,
+        0 -1.5px 2px #fde4dd,
+        0 1px 2px #e9cdbf,
+        0 1.5px 2px #fadacf,
+        0 1.5px 1.5px -0.5px #d69c8e inset,
+        0 10px 10px -5px #e0b2a2 inset,
         0 -10px 5px -5px rgba(178, 83, 65, 1) inset;
 }
 
 .button-container .button {
     border-radius: 3px;
 
-    background-image: linear-gradient(var(--button-1), var(--button-2), var(--button-3), var(--button-4));
+    background-image: linear-gradient(
+        var(--button-1),
+        var(--button-2),
+        var(--button-3),
+        var(--button-4)
+    );
 
-    box-shadow: 0 0 0.25px var(--button-3), -0.5px -0.75px 1px rgba(241, 249, 255, 0.15) inset,
-        -0.75px -1.5px 1.5px rgba(44, 6, 13, 0.05) inset, 0 -0.5px 0.75px 0.25px var(--button-1),
-        0 0.5px 0.75px 0.25px var(--button-4), 0 -0.75px 2px -0.75px var(--button-1),
-        0 0.75px 2px -0.75px var(--button-4), -0.5px -2px 3px 0.75px rgba(44, 6, 13, 0.9),
-        -15px -20px 20px 2px rgba(150, 90, 64, 0.35), -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
-        -7px -3px 7px rgba(201, 149, 135, 0.55), -10px -10px 15px rgba(201, 149, 135, 0.25);
+    box-shadow:
+        0 0 0.25px var(--button-3),
+        -0.5px -0.75px 1px rgba(241, 249, 255, 0.15) inset,
+        -0.75px -1.5px 1.5px rgba(44, 6, 13, 0.05) inset,
+        0 -0.5px 0.75px 0.25px var(--button-1),
+        0 0.5px 0.75px 0.25px var(--button-4),
+        0 -0.75px 2px -0.75px var(--button-1),
+        0 0.75px 2px -0.75px var(--button-4),
+        -0.5px -2px 3px 0.75px rgba(44, 6, 13, 0.9),
+        -15px -20px 20px 2px rgba(150, 90, 64, 0.35),
+        -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
+        -7px -3px 7px rgba(201, 149, 135, 0.55),
+        -10px -10px 15px rgba(201, 149, 135, 0.25);
 
     position: relative;
     bottom: -3px;
@@ -564,15 +729,28 @@ body {
     top: 15px;
     left: -1px;
 
-    background-image: linear-gradient(var(--center-1), var(--center-2), var(--center-3));
+    background-image: linear-gradient(
+        var(--center-1),
+        var(--center-2),
+        var(--center-3)
+    );
 
-    box-shadow: 0 0 0.5px var(--center-3), -3px -20px 14px 3px rgba(20, 7, 14, 0.15),
-        3px 20px 14px -3px rgba(241, 249, 255, 0.025), -3px -17px 14px -3px rgba(241, 249, 255, 0.025),
-        0 -20px 10px -10px rgba(44, 6, 13, 0.05) inset, 0 -0px 10px -10px rgba(44, 6, 13, 0.05) inset,
-        0 30px 20px -10px rgba(241, 249, 255, 0.05) inset, 0 -0.25px 0.75px 0.25px var(--center-1),
-        0 0.5px 0.75px 0.25px var(--center-3), 0 -0.75px 2px -0.75px var(--center-1),
-        0 0.75px 2px -0.75px var(--center-3), 0 1px 1.75px -0.75px var(--center-4) inset,
-        0 -3px 4px -3px var(--center-5) inset, 0 3px 3px -3px var(--center-6), 0 -4px 7px -4px var(--center-1),
+    box-shadow:
+        0 0 0.5px var(--center-3),
+        -3px -20px 14px 3px rgba(20, 7, 14, 0.15),
+        3px 20px 14px -3px rgba(241, 249, 255, 0.025),
+        -3px -17px 14px -3px rgba(241, 249, 255, 0.025),
+        0 -20px 10px -10px rgba(44, 6, 13, 0.05) inset,
+        0 -0px 10px -10px rgba(44, 6, 13, 0.05) inset,
+        0 30px 20px -10px rgba(241, 249, 255, 0.05) inset,
+        0 -0.25px 0.75px 0.25px var(--center-1),
+        0 0.5px 0.75px 0.25px var(--center-3),
+        0 -0.75px 2px -0.75px var(--center-1),
+        0 0.75px 2px -0.75px var(--center-3),
+        0 1px 1.75px -0.75px var(--center-4) inset,
+        0 -3px 4px -3px var(--center-5) inset,
+        0 3px 3px -3px var(--center-6),
+        0 -4px 7px -4px var(--center-1),
         0 4px 7px -4px var(--center-6);
 }
 
@@ -619,10 +797,18 @@ body {
 
     border-radius: 0 0 6px 6px;
 
-    box-shadow: -1px 1px 3px -1px #945a42, 0.5px -1px 1px #945a42 inset, -4px 2px 7px -2.25px #bd8974,
-        1px -1px 1px -1px #bd8974 inset, 1px -1px 1.5px -1px #cf9981 inset, -0.5px -0.5px 0.5px #ffede0 inset,
-        -1.5px -1.5px 2px -1px #ffe8db inset, -4px -1.5px 4px -2px #fedaca inset, 2px 1px 2px -1px #fedaca,
-        0 0 10px #fbdad1, -10px 10px 25px rgba(60, 3, 0, 0.015);
+    box-shadow:
+        -1px 1px 3px -1px #945a42,
+        0.5px -1px 1px #945a42 inset,
+        -4px 2px 7px -2.25px #bd8974,
+        1px -1px 1px -1px #bd8974 inset,
+        1px -1px 1.5px -1px #cf9981 inset,
+        -0.5px -0.5px 0.5px #ffede0 inset,
+        -1.5px -1.5px 2px -1px #ffe8db inset,
+        -4px -1.5px 4px -2px #fedaca inset,
+        2px 1px 2px -1px #fedaca,
+        0 0 10px #fbdad1,
+        -10px 10px 25px rgba(60, 3, 0, 0.015);
 }
 
 .range-plate {
@@ -638,20 +824,39 @@ body {
 
     background-color: #bbc9e6;
 
-    background-image: linear-gradient(
+    background-image:
+        linear-gradient(
             rgba(134, 141, 169, 0.1) 0 25%,
             transparent 25% 50%,
             rgba(143, 150, 178, 0.1) 50% 75%,
             transparent 75%
         ),
-        linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
-        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%), radial-gradient(#7b84a3, #929cb7, #bbc9e6);
-    background-size: 100% 4px, 20% 100%, 200px 200px, 200% 300%;
+        linear-gradient(
+            90deg,
+            rgba(159, 167, 188, 0.05),
+            rgba(119, 130, 160, 0.1),
+            rgba(159, 167, 188, 0.05)
+        ),
+        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
+        radial-gradient(#7b84a3, #929cb7, #bbc9e6);
+    background-size:
+        100% 4px,
+        20% 100%,
+        200px 200px,
+        200% 300%;
     background-repeat: repeat, repeat, no-repeat, no-repeat;
-    background-position: center center, center center, center center, 100% 50%;
+    background-position:
+        center center,
+        center center,
+        center center,
+        100% 50%;
 
-    box-shadow: 0 0 1px 0.25px #f6d0c7 inset, 0 -0.5px 0.75px 0.5px #8d6e6c inset, 0 0.75px 0.5px 0.25px #e7c9c7,
-        0 0.5px 2.5px 1.5px #f6d5ce, 0 0 10px rgba(100, 98, 120, 0.25) inset;
+    box-shadow:
+        0 0 1px 0.25px #f6d0c7 inset,
+        0 -0.5px 0.75px 0.5px #8d6e6c inset,
+        0 0.75px 0.5px 0.25px #e7c9c7,
+        0 0.5px 2.5px 1.5px #f6d5ce,
+        0 0 10px rgba(100, 98, 120, 0.25) inset;
 }
 
 .ranges {
@@ -664,7 +869,9 @@ body {
     position: absolute;
     top: 6px;
 
-    text-shadow: 0 0 0.2px #1f233e, 0 0 1px #bcbcd0;
+    text-shadow:
+        0 0 0.2px #1f233e,
+        0 0 1px #bcbcd0;
 }
 
 .ranges li {
@@ -697,10 +904,17 @@ body {
 
     background-image: linear-gradient(20deg, #484653, #606b89, #8792ae);
 
-    box-shadow: -0.5px 0.5px 0.5px #606b89, 0 0 1px 0.15px #606b89 inset, 0 0 1px 0.25px #606b89, 0 0 4px 1px #7886a1,
-        0 15px 10px -2px rgba(51, 46, 52, 0.25), -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
-        -12px -25px 17px 4px rgba(62, 21, 8, 0.22), -30px -45px 25px 4px rgba(62, 21, 8, 0.125),
-        -45px -50px 35px 8px rgba(62, 21, 8, 0.125), -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
+    box-shadow:
+        -0.5px 0.5px 0.5px #606b89,
+        0 0 1px 0.15px #606b89 inset,
+        0 0 1px 0.25px #606b89,
+        0 0 4px 1px #7886a1,
+        0 15px 10px -2px rgba(51, 46, 52, 0.25),
+        -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
+        -12px -25px 17px 4px rgba(62, 21, 8, 0.22),
+        -30px -45px 25px 4px rgba(62, 21, 8, 0.125),
+        -45px -50px 35px 8px rgba(62, 21, 8, 0.125),
+        -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
         0 0 20px 3px rgba(202, 206, 217, 0.75);
 }
 
@@ -717,13 +931,18 @@ body {
     left: -3.25px;
     top: -3.25px;
 
-    background-image: linear-gradient(90deg, rgba(17, 18, 23, 0.5), transparent),
+    background-image:
+        linear-gradient(90deg, rgba(17, 18, 23, 0.5), transparent),
         radial-gradient(#1a2332, #1c1f2d 66%, transparent 69%),
-        linear-gradient(90deg, rgba(17, 18, 23, 0.75), transparent), linear-gradient(rgba(24, 31, 49, 0.9), transparent),
+        linear-gradient(90deg, rgba(17, 18, 23, 0.75), transparent),
+        linear-gradient(rgba(24, 31, 49, 0.9), transparent),
         linear-gradient(45deg, transparent 30%, #7c899c, transparent 70%),
-        linear-gradient(-45deg, transparent 30%, #7c899c, transparent 70%), radial-gradient(#1a2332, #1c1f2d, #10172a);
+        linear-gradient(-45deg, transparent 30%, #7c899c, transparent 70%),
+        radial-gradient(#1a2332, #1c1f2d, #10172a);
 
-    box-shadow: 0 0 1px 0.75px #10172a, 0 0 2px 0.75px rgba(67, 68, 88, 0.5);
+    box-shadow:
+        0 0 1px 0.75px #10172a,
+        0 0 2px 0.75px rgba(67, 68, 88, 0.5);
 }
 
 .left p {
@@ -738,7 +957,9 @@ body {
     left: 107px;
     top: 29px;
 
-    text-shadow: 0 0 0.2px #1f233e, 0 0 1px #959ab2;
+    text-shadow:
+        0 0 0.2px #1f233e,
+        0 0 1px #959ab2;
 }
 
 .center p,
@@ -750,7 +971,9 @@ body {
     color: #1f233e;
     letter-spacing: 0.5px;
 
-    text-shadow: 0 0 0.2px #1f233e, 0 0 1px #959ab2;
+    text-shadow:
+        0 0 0.2px #1f233e,
+        0 0 1px #959ab2;
 
     list-style-type: none;
 }
@@ -789,13 +1012,26 @@ body {
     left: 210px;
     top: 22px;
 
-    background-image: linear-gradient(rgba(30, 31, 57, 0), rgba(30, 31, 57, 0.5), rgba(30, 31, 57, 0)),
+    background-image:
+        linear-gradient(
+            rgba(30, 31, 57, 0),
+            rgba(30, 31, 57, 0.5),
+            rgba(30, 31, 57, 0)
+        ),
         linear-gradient(#09080e, #0a090f);
 
-    box-shadow: 0 0.5px 0.5px #353245 inset, 0 -0.25px 0.5px #4f515e inset, 0 -0.75px 0.75px #30354b inset,
-        0 1px 1px -0.25px #55515f inset, 0 1.25px 1px -0.5px #28252e inset, 0 0 5px 1px #1e1f39 inset,
-        0 0 0.5px 0.25px #353245, 0 0 1px #b4b9cc, 0 0.15px 2.5px -0.5px #9fa5be,
-        0 10px 10px -3px rgba(208, 209, 227, 0.5), 0 20px 20px rgba(208, 209, 227, 0.35);
+    box-shadow:
+        0 0.5px 0.5px #353245 inset,
+        0 -0.25px 0.5px #4f515e inset,
+        0 -0.75px 0.75px #30354b inset,
+        0 1px 1px -0.25px #55515f inset,
+        0 1.25px 1px -0.5px #28252e inset,
+        0 0 5px 1px #1e1f39 inset,
+        0 0 0.5px 0.25px #353245,
+        0 0 1px #b4b9cc,
+        0 0.15px 2.5px -0.5px #9fa5be,
+        0 10px 10px -3px rgba(208, 209, 227, 0.5),
+        0 20px 20px rgba(208, 209, 227, 0.35);
 }
 
 .switch-button {
@@ -810,18 +1046,29 @@ body {
     top: 0.35px;
     left: 0.45px;
 
-    background-image: radial-gradient(rgba(208, 209, 227, 0.5), rgba(208, 209, 227, 0) 40%),
+    background-image:
+        radial-gradient(rgba(208, 209, 227, 0.5), rgba(208, 209, 227, 0) 40%),
         linear-gradient(90deg, #140e1c, #2d2c3c);
 
     background-repeat: no-repeat, no-repeat;
 
-    background-size: 120% 140%, 100% 100%;
-
-    background-position: 3px 3px, top left;
-
-    box-shadow: 0 0 0.5px 0.75px #9a9ca9 inset, 0 0 0.15px #9a9ca9, 0 0 0.5px 0.25px #1b1b25, 0 0 1px #1e1e26,
-        0 5px 10px -2px rgba(51, 46, 52, 0.25), -5px -10px 10px 2px rgba(62, 21, 8, 0.15),
-        -10px -17px 20px 5px rgba(62, 21, 8, 0.1), -20px -23px 25px 6px rgba(62, 21, 8, 0.15),
+    background-size:
+        120% 140%,
+        100% 100%;
+
+    background-position:
+        3px 3px,
+        top left;
+
+    box-shadow:
+        0 0 0.5px 0.75px #9a9ca9 inset,
+        0 0 0.15px #9a9ca9,
+        0 0 0.5px 0.25px #1b1b25,
+        0 0 1px #1e1e26,
+        0 5px 10px -2px rgba(51, 46, 52, 0.25),
+        -5px -10px 10px 2px rgba(62, 21, 8, 0.15),
+        -10px -17px 20px 5px rgba(62, 21, 8, 0.1),
+        -20px -23px 25px 6px rgba(62, 21, 8, 0.15),
         -30px -35px 30px 10px rgba(62, 21, 8, 0.1);
 }
 
@@ -839,10 +1086,17 @@ body {
 
     background-image: linear-gradient(20deg, #3c3642, #4b485b, #535166);
 
-    box-shadow: -0.5px 0.5px 0.5px #606b89, 0 0 1px 0.15px #606b89 inset, 0 0 1px 0.25px #606b89, 0 0 4px 1px #7886a1,
-        0 15px 10px -2px rgba(51, 46, 52, 0.25), -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
-        -12px -25px 17px 4px rgba(62, 21, 8, 0.15), -30px -45px 25px 4px rgba(62, 21, 8, 0.075),
-        -45px -50px 35px 8px rgba(62, 21, 8, 0.075), -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
+    box-shadow:
+        -0.5px 0.5px 0.5px #606b89,
+        0 0 1px 0.15px #606b89 inset,
+        0 0 1px 0.25px #606b89,
+        0 0 4px 1px #7886a1,
+        0 15px 10px -2px rgba(51, 46, 52, 0.25),
+        -30px -30px 50px 20px rgba(62, 21, 8, 0.1),
+        -12px -25px 17px 4px rgba(62, 21, 8, 0.15),
+        -30px -45px 25px 4px rgba(62, 21, 8, 0.075),
+        -45px -50px 35px 8px rgba(62, 21, 8, 0.075),
+        -5px -15px 10px -2px rgba(202, 206, 217, 0.25),
         0 0 20px 3px rgba(202, 206, 217, 0.75);
 }
 
@@ -859,12 +1113,17 @@ body {
     left: 3.5px;
     top: -3.5px;
 
-    background-image: radial-gradient(#1f273a, rgba(22, 26, 38, 1) 66%, transparent 69%),
-        linear-gradient(90deg, rgba(22, 26, 38, 0.75), transparent), linear-gradient(rgba(24, 31, 49, 0.9), transparent),
+    background-image:
+        radial-gradient(#1f273a, rgba(22, 26, 38, 1) 66%, transparent 69%),
+        linear-gradient(90deg, rgba(22, 26, 38, 0.75), transparent),
+        linear-gradient(rgba(24, 31, 49, 0.9), transparent),
         linear-gradient(45deg, transparent 30%, #7c899c, transparent 70%),
-        linear-gradient(-45deg, transparent 30%, #7c899c, transparent 70%), radial-gradient(#1f273a, #212c42, #171d2d);
+        linear-gradient(-45deg, transparent 30%, #7c899c, transparent 70%),
+        radial-gradient(#1f273a, #212c42, #171d2d);
 
-    box-shadow: 0 0 1px 0.75px rgba(22, 26, 38, 1), 0 0 2px 0.75px rgba(67, 68, 88, 0.5);
+    box-shadow:
+        0 0 1px 0.75px rgba(22, 26, 38, 1),
+        0 0 2px 0.75px rgba(67, 68, 88, 0.5);
 }
 
 .right ul,
@@ -878,7 +1137,9 @@ body {
 
     letter-spacing: 0.5px;
 
-    text-shadow: 0 0 0.2px #1f233e, 0 0 1px #bcbcd0;
+    text-shadow:
+        0 0 0.2px #1f233e,
+        0 0 1px #bcbcd0;
 }
 
 .right ul {
@@ -920,19 +1181,38 @@ body {
     left: 60px;
     top: 360px;
 
-    background-image: linear-gradient(
+    background-image:
+        linear-gradient(
             rgba(134, 141, 169, 0.1) 0 25%,
             transparent 25% 50%,
             rgba(143, 150, 178, 0.1) 50% 75%,
             transparent 75%
         ),
-        linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
-        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%), radial-gradient(#7b84a3, #929cb7, #bbc9e6);
-    background-size: 100% 4px, 20% 100%, 200px 200px, 200% 300%;
+        linear-gradient(
+            90deg,
+            rgba(159, 167, 188, 0.05),
+            rgba(119, 130, 160, 0.1),
+            rgba(159, 167, 188, 0.05)
+        ),
+        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
+        radial-gradient(#7b84a3, #929cb7, #bbc9e6);
+    background-size:
+        100% 4px,
+        20% 100%,
+        200px 200px,
+        200% 300%;
     background-repeat: repeat, repeat, no-repeat, no-repeat;
-    background-position: center center, center center, center center, 100% 50%;
-
-    box-shadow: 0 0 1px #e1c3b8 inset, 0 0 1px 0.5px #dfc6c1, 0 0 2px 1px #e2c1ba, 0.5px 0 0.5px 0.5px #929cb7 inset,
+    background-position:
+        center center,
+        center center,
+        center center,
+        100% 50%;
+
+    box-shadow:
+        0 0 1px #e1c3b8 inset,
+        0 0 1px 0.5px #dfc6c1,
+        0 0 2px 1px #e2c1ba,
+        0.5px 0 0.5px 0.5px #929cb7 inset,
         -0.5px 0 0.5px 0.5px #929cb7 inset;
 }
 
@@ -946,7 +1226,9 @@ body {
 
     letter-spacing: 0.5px;
 
-    text-shadow: 0 0 0.2px #1f233e, 0 0 1px #929cb7;
+    text-shadow:
+        0 0 0.2px #1f233e,
+        0 0 1px #929cb7;
 }
 
 .speed-container p:first-child {
@@ -974,7 +1256,10 @@ body {
 
     background-image: linear-gradient(#120d14, #1b0b15, #1d1419);
 
-    box-shadow: -0.75px 0 1px #9391a5 inset, 0.75px 0 1px #a79da8 inset, -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
+    box-shadow:
+        -0.75px 0 1px #9391a5 inset,
+        0.75px 0 1px #a79da8 inset,
+        -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
         0 0 3px #9fa7aa;
 }
 
@@ -992,7 +1277,10 @@ body {
 
     background-image: linear-gradient(70deg, #63687e 80%, #9a9bba);
 
-    box-shadow: 0 0 1px #63687e, 0 0 0.5px #63687e, 0 0 4px 0.5px #63687e;
+    box-shadow:
+        0 0 1px #63687e,
+        0 0 0.5px #63687e,
+        0 0 4px 0.5px #63687e;
 }
 
 .speed-button {
@@ -1009,10 +1297,16 @@ body {
 
     background-image: radial-gradient(#353b51, #1e2736, #262739);
 
-    box-shadow: 0 0 0.5px 0.25px #262739, 0 0 4px rgba(19, 18, 32, 0.5), 8px 10px 10px rgba(51, 46, 52, 0.25),
-        -30px -30px 30px 30px rgba(62, 21, 8, 0.1), -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
-        -15px -25px 20px 3px rgba(62, 21, 8, 0.1), -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
-        -5px -15px 10px -2px rgba(202, 206, 217, 0.15), 0 0 20px 3px rgba(202, 206, 217, 0.75);
+    box-shadow:
+        0 0 0.5px 0.25px #262739,
+        0 0 4px rgba(19, 18, 32, 0.5),
+        8px 10px 10px rgba(51, 46, 52, 0.25),
+        -30px -30px 30px 30px rgba(62, 21, 8, 0.1),
+        -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
+        -15px -25px 20px 3px rgba(62, 21, 8, 0.1),
+        -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
+        -5px -15px 10px -2px rgba(202, 206, 217, 0.15),
+        0 0 20px 3px rgba(202, 206, 217, 0.75);
 }
 
 .vol-container {
@@ -1028,19 +1322,38 @@ body {
     right: 60px;
     top: 360px;
 
-    background-image: linear-gradient(
+    background-image:
+        linear-gradient(
             rgba(134, 141, 169, 0.1) 0 25%,
             transparent 25% 50%,
             rgba(143, 150, 178, 0.1) 50% 75%,
             transparent 75%
         ),
-        linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
-        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%), radial-gradient(#7b84a3, #929cb7, #bbc9e6);
-    background-size: 100% 4px, 20% 100%, 200px 200px, 200% 300%;
+        linear-gradient(
+            90deg,
+            rgba(159, 167, 188, 0.05),
+            rgba(119, 130, 160, 0.1),
+            rgba(159, 167, 188, 0.05)
+        ),
+        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
+        radial-gradient(#7b84a3, #929cb7, #bbc9e6);
+    background-size:
+        100% 4px,
+        20% 100%,
+        200px 200px,
+        200% 300%;
     background-repeat: repeat, repeat, no-repeat, no-repeat;
-    background-position: center center, center center, center center, 100% 50%;
-
-    box-shadow: 0 0 1px #e1c3b8 inset, 0 0 1px 0.5px #dfc6c1, 0 0 2px 1px #e2c1ba, 0.5px 0 0.5px 0.5px #929cb7 inset,
+    background-position:
+        center center,
+        center center,
+        center center,
+        100% 50%;
+
+    box-shadow:
+        0 0 1px #e1c3b8 inset,
+        0 0 1px 0.5px #dfc6c1,
+        0 0 2px 1px #e2c1ba,
+        0.5px 0 0.5px 0.5px #929cb7 inset,
         -0.5px 0 0.5px 0.5px #929cb7 inset;
 }
 
@@ -1054,7 +1367,9 @@ body {
 
     letter-spacing: 0.5px;
 
-    text-shadow: 0 0 0.2px #1f233e, 0 0 1px #929cb7;
+    text-shadow:
+        0 0 0.2px #1f233e,
+        0 0 1px #929cb7;
 }
 
 .vol-container p:first-child {
@@ -1082,7 +1397,10 @@ body {
 
     background-image: linear-gradient(#120d14, #1b0b15, #1d1419);
 
-    box-shadow: -0.75px 0 1px #9391a5 inset, 0.75px 0 1px #a79da8 inset, -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
+    box-shadow:
+        -0.75px 0 1px #9391a5 inset,
+        0.75px 0 1px #a79da8 inset,
+        -0.5px 0 1px -0.15px rgba(213, 212, 219, 0.1),
         0 0 3px #9fa7aa;
 }
 
@@ -1100,7 +1418,10 @@ body {
 
     background-image: linear-gradient(70deg, #63687e 80%, #9a9bba);
 
-    box-shadow: 0 0 1px #63687e, 0 0 0.5px #63687e, 0 0 4px 0.5px #63687e;
+    box-shadow:
+        0 0 1px #63687e,
+        0 0 0.5px #63687e,
+        0 0 4px 0.5px #63687e;
 }
 
 .vol-button {
@@ -1117,8 +1438,14 @@ body {
 
     background-image: radial-gradient(#353b51, #1e2736, #262739);
 
-    box-shadow: 0 0 0.5px 0.25px #262739, 0 0 4px rgba(19, 18, 32, 0.5), 8px 10px 10px rgba(51, 46, 52, 0.25),
-        -30px -30px 30px 30px rgba(62, 21, 8, 0.1), -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
-        -15px -25px 20px 3px rgba(62, 21, 8, 0.1), -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
-        -5px -15px 10px -2px rgba(202, 206, 217, 0.15), 0 0 20px 3px rgba(202, 206, 217, 0.75);
+    box-shadow:
+        0 0 0.5px 0.25px #262739,
+        0 0 4px rgba(19, 18, 32, 0.5),
+        8px 10px 10px rgba(51, 46, 52, 0.25),
+        -30px -30px 30px 30px rgba(62, 21, 8, 0.1),
+        -7px -10px 15px 3px rgba(62, 21, 8, 0.15),
+        -15px -25px 20px 3px rgba(62, 21, 8, 0.1),
+        -25px -50px 30px 3px rgba(62, 21, 8, 0.075),
+        -5px -15px 10px -2px rgba(202, 206, 217, 0.15),
+        0 0 20px 3px rgba(202, 206, 217, 0.75);
 }

From ba4077f6dd364bdc9a637b259817bdec02c0ec71 Mon Sep 17 00:00:00 2001
From: Ben <ben399399@naver.com>
Date: Sat, 21 Feb 2026 16:00:49 +0900
Subject: [PATCH 4/5] feat: lowpass filter, 1oct up, button classes

---
 muson/index.html |  20 +++---
 muson/index.js   | 166 +++++++++++++++++++++++++++++++++++++++++++----
 muson/style.css  |  34 +++++++---
 3 files changed, 189 insertions(+), 31 deletions(-)

diff --git a/muson/index.html b/muson/index.html
index eab6209..ea002e8 100644
--- a/muson/index.html
+++ b/muson/index.html
@@ -61,34 +61,34 @@
                 </div>
             </div>
             <div class="button-container">
-                <div class="button">
+                <div class="button c4">
                     <div class="center"></div>
                 </div>
-                <div class="button">
+                <div class="button d4">
                     <div class="center"></div>
                 </div>
-                <div class="button">
+                <div class="button e4">
                     <div class="center"></div>
                 </div>
-                <div class="button">
+                <div class="button f4">
                     <div class="center"></div>
                 </div>
-                <div class="button">
+                <div class="button g4">
                     <div class="center"></div>
                 </div>
-                <div class="button">
+                <div class="button a4">
                     <div class="center"></div>
                 </div>
-                <div class="button">
+                <div class="button b4">
                     <div class="center"></div>
                 </div>
-                <div class="button">
+                <div class="button c5">
                     <div class="center"></div>
                 </div>
-                <div class="button">
+                <div class="button d5">
                     <div class="center"></div>
                 </div>
-                <div class="button">
+                <div class="button e5">
                     <div class="center"></div>
                 </div>
             </div>
diff --git a/muson/index.js b/muson/index.js
index 3d2906d..d9385ad 100644
--- a/muson/index.js
+++ b/muson/index.js
@@ -4,24 +4,38 @@ let currentOscillator = null;
 let currentGainNode = null;
 let volumeLevel = 1; // 0: Lo, 1: Med, 2: High
 const volumeLevels = [0.15, 0.3, 0.6]; // Lo, Med, High 볼륨 값
+let octaveLevel = 1; // 0: Off (낮은 옥타브), 1: Organ (기본), 2: Organ & Synth (높은 옥타브)
+const octaveMultipliers = [0.5, 1.0, 2.0]; // 옥타브 배율
+let pitchBend = 0; // -1.0 ~ 1.0 (피치 벤드)
+
+const noteChips = ["C4", "D4", "E4", "F4", "G4", "A4", "B4", "C5", "D5", "E5"];
 
 // 각 건반에 해당하는 주파수 (Hz)
 const keyFrequencies = [
-  261.63, // C4
-  293.66, // D4
-  329.63, // E4
-  349.23, // F4
-  392.0, // G4
-  440.0, // A4
-  493.88, // B4
   523.25, // C5
   587.33, // D5
   659.25, // E5
+  698.46, // F5
+  783.99, // G5
+  880.0, // A5
+  987.77, // B5
+  1046.5, // C6
+  1174.66, // D6
+  1318.51, // E6
 ];
 
 // 음표 이름
 const noteNames = ["C4", "D4", "E4", "F4", "G4", "A4", "B4", "C5", "D5", "E5"];
 
+// 피치 벤드 계산 (±2 반음)
+function getPitchBendMultiplier() {
+  // pitchBend: -1.0 ~ 1.0 -> ±2 semitones
+  //
+  console.log(pitchBend);
+  const semitones = pitchBend * 8;
+  return Math.pow(2, semitones / 12);
+}
+
 // 소리 재생 함수
 function playNote(frequency, noteName) {
   // 이미 재생 중인 소리가 있으면 중지
@@ -39,9 +53,15 @@ function playNote(frequency, noteName) {
   currentGainNode = audioContext.createGain();
 
   // Oscillator 설정
-  currentOscillator.type = "sine"; // 사인파 (부드러운 소리)
+  const filter = audioContext.createBiquadFilter();
+  filter.type = "lowpass";
+  filter.frequency.value = 3000; // 2k~4k 사이 조절
+  filter.Q.value = 0.7;
+  currentOscillator.type = "square"; // 사인파 (부드러운 소리)
+  const adjustedFrequency =
+    frequency * octaveMultipliers[octaveLevel] * getPitchBendMultiplier();
   currentOscillator.frequency.setValueAtTime(
-    frequency,
+    adjustedFrequency,
     audioContext.currentTime,
   );
 
@@ -53,18 +73,35 @@ function playNote(frequency, noteName) {
     audioContext.currentTime + 0.05,
   );
 
-  // 연결: Oscillator -> Gain -> Destination (스피커)
-  currentOscillator.connect(currentGainNode);
+  // 연결: Oscillator -> Filter -> Gain -> Destination (스피커)
+  currentOscillator.connect(filter);
+  filter.connect(currentGainNode);
   currentGainNode.connect(audioContext.destination);
 
   // 재생 시작
   currentOscillator.start(audioContext.currentTime);
 
+  const octaveModes = ["Off (Low)", "Organ (Normal)", "Organ & Synth (High)"];
   console.log(
-    `Playing note: ${noteName} (${frequency} Hz) at volume level ${["Lo", "Med", "High"][volumeLevel]}`,
+    `Playing note: ${noteName} (${adjustedFrequency.toFixed(2)} Hz) | Volume: ${["Lo", "Med", "High"][volumeLevel]} | Octave: ${octaveModes[octaveLevel]} | Pitch Bend: ${pitchBend.toFixed(2)}`,
   );
 }
 
+// 피치 벤드 업데이트 (재생 중인 음에 실시간 적용)
+function updatePitchBend(newPitchBend) {
+  pitchBend = newPitchBend;
+
+  // 현재 재생 중인 음이 있으면 주파수 업데이트
+  if (currentOscillator && audioContext) {
+    const baseFreq = currentOscillator.frequency.value;
+    const newFreq = baseFreq * getPitchBendMultiplier();
+    currentOscillator.frequency.setValueAtTime(
+      newFreq,
+      audioContext.currentTime,
+    );
+  }
+}
+
 // 소리 중지 함수
 function stopNote() {
   if (currentOscillator && currentGainNode && audioContext) {
@@ -155,6 +192,9 @@ document.addEventListener("DOMContentLoaded", () => {
   // 볼륨 컨트롤 설정
   setupVolumeControl();
 
+  // 피치 벤드 슬라이더 설정
+  setupPitchBendControl();
+
   console.log("Muson Synth initialized! Hover over the keys to play notes.");
 });
 
@@ -197,3 +237,105 @@ function setupVolumeControl() {
   // 스위치 버튼에 트랜지션 추가
   switchButton.style.transition = "left 0.2s ease";
 }
+
+// 옥타브 컨트롤 설정 함수
+// function setupOctaveControl() {
+//   const sliderWrapper = document.querySelector(".right .slider-wrapper");
+//   const slider = document.querySelector(".right .slider");
+
+//   if (!sliderWrapper || !slider) {
+//     console.warn("Octave control elements not found");
+//     return;
+//   }
+
+//   // 스타일 추가
+//   sliderWrapper.style.cursor = "pointer";
+//   slider.style.cursor = "pointer";
+
+//   // 슬라이더에 트랜지션 추가
+//   slider.style.transition = "top 0.2s ease";
+// }
+
+// 피치 벤드 슬라이더 설정 함수
+function setupPitchBendControl() {
+  const volButtonContainer = document.querySelector(".vol-button-container");
+  const volButton = document.querySelector(".vol-button");
+  const volSlider = document.querySelector(".vol-slider");
+
+  if (!volButtonContainer || !volButton || !volSlider) {
+    console.warn("Pitch bend control elements not found");
+    return;
+  }
+
+  let isDragging = false;
+
+  // 슬라이더의 높이와 위치 정보
+  function getSliderInfo() {
+    const rect = volSlider.getBoundingClientRect();
+    return {
+      top: rect.top,
+      height: rect.height,
+    };
+  }
+
+  // 피치 벤드 업데이트 함수
+  function updatePitchBendFromPosition(position) {
+    const sliderInfo = getSliderInfo();
+    let normalizedPosition = (position - sliderInfo.top) / sliderInfo.height;
+    normalizedPosition = Math.max(0, Math.min(1, normalizedPosition));
+
+    // 0 (High/+1) ~ 0.5 (중앙/0) ~ 1 (Low/-1)
+    const newPitchBend = 1.0 - normalizedPosition * 2.0;
+
+    // 버튼 위치 업데이트
+    volButtonContainer.style.top = `calc(14px + ${normalizedPosition * 65}%)`;
+
+    // 피치 벤드 적용
+    updatePitchBend(newPitchBend);
+
+    console.log(`Pitch Bend: ${newPitchBend.toFixed(2)}`);
+  }
+
+  // 초기 위치 설정 (중앙 = 피치 벤드 0)
+  volButtonContainer.style.top = "50%";
+  pitchBend = 0;
+
+  // 마우스 다운 이벤트 (버튼)
+  volButton.addEventListener("mousedown", (e) => {
+    isDragging = true;
+    e.preventDefault();
+  });
+
+  // 슬라이더 클릭 이벤트
+  volSlider.addEventListener("mousedown", (e) => {
+    isDragging = true;
+    updatePitchBendFromPosition(e.clientY);
+  });
+
+  // 마우스 이동 이벤트 (document에 등록)
+  document.addEventListener("mousemove", (e) => {
+    if (isDragging) {
+      updatePitchBendFromPosition(e.clientY);
+    }
+  });
+
+  // 마우스 업 이벤트 (document에 등록) - 중앙으로 되돌아감
+  document.addEventListener("mouseup", () => {
+    if (isDragging) {
+      isDragging = false;
+      // 피치 벤드를 0으로 되돌리기 (스프링백)
+    }
+  });
+
+  // 스타일 추가
+  volButton.style.cursor = "grab";
+  volSlider.style.cursor = "pointer";
+
+  volButton.addEventListener("mousedown", () => {
+    volButton.style.cursor = "grabbing";
+  });
+
+  document.addEventListener("mouseup", () => {
+    volButton.style.cursor = "grab";
+  });
+}
diff --git a/muson/style.css b/muson/style.css
index 1611ca0..f8db281 100644
--- a/muson/style.css
+++ b/muson/style.css
@@ -541,6 +541,8 @@ body {
 .button-container .button {
     border-radius: 3px;
 
+    cursor: pointer;
+
     background-image: linear-gradient(
         var(--button-1),
         var(--button-2),
@@ -572,7 +574,21 @@ body {
     height: calc(100% - 3px);
 }
 
-.button-container .button:nth-child(2) {
+.button-container .button.c4 {
+    --button-1: #171310;
+    --button-2: #18171f;
+    --button-3: #353541;
+    --button-4: #302e33;
+
+    --center-1: #0f1622;
+    --center-2: #171d33;
+    --center-3: #222632;
+    --center-4: #313842;
+    --center-5: #1c1f30;
+    --center-6: #3d3a4d;
+}
+
+.button-container .button.d4 {
     --button-1: #884b36;
     --button-2: #8a4631;
     --button-3: #bd6e48;
@@ -588,7 +604,7 @@ body {
     z-index: 10;
 }
 
-.button-container .button:nth-child(3) {
+.button-container .button.e4 {
     --button-1: #c1353e;
     --button-2: #c22b3a;
     --button-3: #e42d49;
@@ -604,7 +620,7 @@ body {
     z-index: 9;
 }
 
-.button-container .button:nth-child(4) {
+.button-container .button.f4 {
     --button-1: #cc3929;
     --button-2: #d73825;
     --button-3: #fd5332;
@@ -620,7 +636,7 @@ body {
     z-index: 8;
 }
 
-.button-container .button:nth-child(5) {
+.button-container .button.g4 {
     --button-1: #f2ac26;
     --button-2: #f0ac19;
     --button-3: #f0b31c;
@@ -636,7 +652,7 @@ body {
     z-index: 7;
 }
 
-.button-container .button:nth-child(6) {
+.button-container .button.a4 {
     --button-1: #fcb829;
     --button-2: #f7cf31;
     --button-3: #ffdb3c;
@@ -652,7 +668,7 @@ body {
     z-index: 6;
 }
 
-.button-container .button:nth-child(7) {
+.button-container .button.b4 {
     --button-1: #b5d496;
     --button-2: #a1d890;
     --button-3: #b5f4a7;
@@ -668,7 +684,7 @@ body {
     z-index: 5;
 }
 
-.button-container .button:nth-child(8) {
+.button-container .button.c5 {
     --button-1: #3f88b5;
     --button-2: #3494c7;
     --button-3: #0fcefb;
@@ -684,7 +700,7 @@ body {
     z-index: 4;
 }
 
-.button-container .button:nth-child(9) {
+.button-container .button.d5 {
     --button-1: #4058a2;
     --button-2: #3c5fb9;
     --button-3: #0d7bf4;
@@ -700,7 +716,7 @@ body {
     z-index: 3;
 }
 
-.button-container .button:nth-child(10) {
+.button-container .button.e5 {
     --button-1: #3d306e;
     --button-2: #503c79;
     --button-3: #6a5abd;

From 35501f7e8f8287d705976b8346632669eeb0e458 Mon Sep 17 00:00:00 2001
From: Ben <ben399399@naver.com>
Date: Sat, 21 Feb 2026 16:05:55 +0900
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=EC=9D=8C=20=EC=B9=A9=20=EB=A7=A4?=
 =?UTF-8?q?=ED=95=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 muson/index.js | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/muson/index.js b/muson/index.js
index d9385ad..cb58531 100644
--- a/muson/index.js
+++ b/muson/index.js
@@ -8,7 +8,7 @@ let octaveLevel = 1; // 0: Off (낮은 옥타브), 1: Organ (기본), 2: Organ &
 const octaveMultipliers = [0.5, 1.0, 2.0]; // 옥타브 배율
 let pitchBend = 0; // -1.0 ~ 1.0 (피치 벤드)
 
-const noteChips = ["C4", "D4", "E4", "F4", "G4", "A4", "B4", "C5", "D5", "E5"];
+const noteChips = ["D4", "E4", "F4", "G4", "A4", "B4", "C5", "D5", "E5"];
 
 // 각 건반에 해당하는 주파수 (Hz)
 const keyFrequencies = [
@@ -142,8 +142,32 @@ function stopNote() {
   }
 }
 
+// noteChips에 따라 버튼을 표시/숨김하는 함수
+function updateButtonVisibility() {
+  const buttonContainer = document.querySelector(".button-container");
+
+  const allButtons = buttonContainer.querySelectorAll(".button");
+
+  // 모든 버튼을 숨김 처리
+  allButtons.forEach((button) => (button.style.display = "none"));
+
+  // noteChips에 있는 버튼만 표시
+  noteChips.forEach((noteName) => {
+    const className = noteName.toLowerCase();
+    const button = buttonContainer.querySelector(`.button.${className}`);
+    const letterIndex = noteNames.indexOf(noteName);
+
+    if (button) button.style.display = "";
+  });
+
+  console.log(`Visible buttons: ${noteChips.join(", ")}`);
+}
+
 // DOM이 로드되면 이벤트 리스너 추가
 document.addEventListener("DOMContentLoaded", () => {
+  // noteChips에 따라 버튼 표시/숨김
+  updateButtonVisibility();
+
   const keyContainer = document.querySelector(".key-container");
   const keys = keyContainer.querySelectorAll("div");