Revert keyboard visuals to previous synthwave style

static/styles.css

@@ -196,111 +196,45 @@ body::after {
 
 #keyboard {
   display: flex;
-  position: relative;
-  isolation: isolate;
   justify-content: center;
   width: 100%;
   padding: 20px 14px;
   border-radius: 16px;
-  border: 1px solid rgba(62, 244, 255, 0.5);
+  border: 1px solid rgba(62, 244, 255, 0.38);
   background:
-    radial-gradient(circle at 50% 0, rgba(255, 63, 176, 0.16), transparent 56%),
-    linear-gradient(180deg, rgba(22, 9, 45, 0.96), rgba(10, 4, 23, 0.98));
+    linear-gradient(180deg, rgba(21, 10, 43, 0.92), rgba(10, 4, 23, 0.92)),
+    radial-gradient(circle at 50% 0, rgba(62, 244, 255, 0.14), transparent 60%);
   box-shadow:
-    inset 0 0 28px rgba(62, 244, 255, 0.16),
-    inset 0 -26px 30px rgba(139, 64, 255, 0.18),
-    0 0 22px rgba(62, 244, 255, 0.24),
-    0 0 40px rgba(255, 63, 176, 0.24);
+    inset 0 0 20px rgba(62, 244, 255, 0.16),
+    0 0 22px rgba(62, 244, 255, 0.2),
+    0 0 34px rgba(255, 63, 176, 0.18);
   user-select: none;
   touch-action: none;
   overflow-x: auto;
-  overflow-y: hidden;
-}
-
-#keyboard::before,
-#keyboard::after {
-  content: '';
-  position: absolute;
-  pointer-events: none;
-  z-index: 0;
-}
-
-#keyboard::before {
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background:
-    repeating-linear-gradient(
-      90deg,
-      rgba(62, 244, 255, 0.045) 0 1px,
-      transparent 1px 46px
-    ),
-    repeating-linear-gradient(
-      0deg,
-      rgba(255, 63, 176, 0.028) 0 1px,
-      transparent 1px 22px
-    );
-  opacity: 0.65;
-}
-
-#keyboard::after {
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 44px;
-  background: linear-gradient(
-    180deg,
-    rgba(255, 63, 176, 0.08) 0%,
-    rgba(139, 64, 255, 0.3) 52%,
-    rgba(62, 244, 255, 0.16) 100%
-  );
-  filter: blur(3px);
 }
 
 .key {
-  z-index: 1;
   width: 44px;
   height: 190px;
   margin: 0 1px;
-  border: 1px solid rgba(255, 63, 176, 0.5);
+  border: 1px solid rgba(255, 63, 176, 0.45);
   border-bottom-width: 4px;
   border-radius: 0 0 11px 11px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 213, 255, 0.95) 64%, rgba(233, 180, 255, 0.98)),
-    linear-gradient(90deg, rgba(62, 244, 255, 0.12), transparent 40%, rgba(255, 63, 176, 0.13));
+  background: linear-gradient(180deg, var(--keyboard-white-top), var(--keyboard-white-bottom));
   position: relative;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   cursor: pointer;
-  color: #4e1168;
+  color: #51176e;
   font-size: 11px;
   font-weight: 700;
-  box-shadow:
-    0 8px 12px rgba(0, 0, 0, 0.28),
-    inset 0 0 10px rgba(62, 244, 255, 0.14);
-  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease, border-color 120ms ease;
-}
-
-.key::after {
-  content: '';
-  position: absolute;
-  left: 7px;
-  right: 7px;
-  bottom: 6px;
-  height: 2px;
-  border-radius: 999px;
-  background: linear-gradient(90deg, rgba(62, 244, 255, 0.95), rgba(255, 63, 176, 0.95));
-  opacity: 0.58;
+  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
 }
 
 .key:hover {
-  transform: translateY(1px) scale(1.01);
-  border-color: rgba(255, 63, 176, 0.8);
-  box-shadow:
-    0 0 16px rgba(255, 63, 176, 0.34),
-    inset 0 -6px 12px rgba(255, 63, 176, 0.2);
+  transform: translateY(1px);
+  box-shadow: inset 0 -5px 12px rgba(255, 63, 176, 0.16);
 }
 
 .key.black {
@@ -310,21 +244,15 @@ body::after {
   margin-right: -15px;
   z-index: 3;
   border-radius: 0 0 9px 9px;
-  border-color: rgba(62, 244, 255, 0.65);
+  border-color: rgba(62, 244, 255, 0.55);
   border-bottom-width: 3px;
-  background:
-    linear-gradient(180deg, rgba(62, 24, 100, 0.96), rgba(12, 7, 29, 0.98)),
-    linear-gradient(90deg, rgba(255, 63, 176, 0.1), transparent 40%, rgba(62, 244, 255, 0.16));
-  color: #cef8ff;
-  box-shadow:
-    0 8px 12px rgba(0, 0, 0, 0.62),
-    inset 0 0 12px rgba(62, 244, 255, 0.16);
+  background: linear-gradient(180deg, var(--keyboard-black-top), var(--keyboard-black-bottom));
+  color: #bdf6ff;
+  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.55);
 }
 
 .key.black:hover {
-  box-shadow:
-    0 0 18px rgba(62, 244, 255, 0.48),
-    inset 0 0 12px rgba(255, 63, 176, 0.22);
+  box-shadow: 0 0 16px rgba(62, 244, 255, 0.4);
 }
 
 .key .shortcut-hint {