Keep mobile piano keys bright

frontend/index.html

@@ -3,8 +3,9 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="dark only" />
     <title>Web Continuator</title>
-    <link rel="stylesheet" href="/assets/styles.css?v=20260729-phone3" />
+    <link rel="stylesheet" href="/assets/styles.css?v=20260729-phone4" />
   </head>
   <body>
     <div class="page-aura"></div>
@@ -1196,6 +1197,6 @@
       </section>
     </main>
 
-    <script type="module" src="/assets/app.js?v=20260729-phone3"></script>
+    <script type="module" src="/assets/app.js?v=20260729-phone4"></script>
   </body>
 </html>

frontend/styles.css

@@ -1,4 +1,5 @@
 :root {
+  color-scheme: dark only;
   --bg: #071217;
   --panel: rgba(11, 27, 34, 0.84);
   --panel-strong: rgba(14, 32, 40, 0.94);
@@ -1075,9 +1076,15 @@ input[type="password"]:disabled {
 
 .white-key {
   height: 100%;
-  border: 1px solid rgba(8, 17, 24, 0.28);
-  background: linear-gradient(180deg, #fffaf0, #d9edf0);
-  color: #101820;
+  border: 1px solid #9ebbb9;
+  background-color: #f4fbf8;
+  background-image: linear-gradient(180deg, #ffffff 0%, #eef8f5 54%, #dbeae7 100%);
+  color: #071217;
+  color-scheme: light only;
+  forced-color-adjust: none;
+  box-shadow:
+    inset 0 -10px 18px rgba(85, 123, 124, 0.12),
+    inset 0 1px 0 #ffffff;
 }
 
 .white-key.is-active {
@@ -1104,6 +1111,8 @@ input[type="password"]:disabled {
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: linear-gradient(180deg, #26333d, #081118);
   color: #f7fbff;
+  color-scheme: dark only;
+  forced-color-adjust: none;
 }
 
 .black-key:hover {
@@ -2539,6 +2548,12 @@ html.phone-layout .black-key {
   width: calc((100% / var(--white-key-count)) * 0.7);
 }
 
+html.phone-layout .white-key {
+  border-color: #adc6c3;
+  background-color: #f7fcfa;
+  background-image: linear-gradient(180deg, #ffffff 0%, #f2faf7 52%, #deece9 100%);
+}
+
 html.phone-layout .virtual-octave-controls .compact-button,
 html.phone-layout .virtual-keyboard-actions .compact-button {
   min-height: 44px;