Update background to grayscale gradient

src/style.css

@@ -11,6 +11,24 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  /* --- Glassmorphism Design System (from Nonograms) --- */
+  --bg-gradient: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
+  --glass-bg: rgba(255, 255, 255, 0.05);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  --text-color: #ffffff;
+  --text-strong: #ffffff;
+  --text-secondary: rgba(255, 255, 255, 0.85);
+  --text-muted: rgba(255, 255, 255, 0.7);
+  --accent-cyan: #00f2fe;
+  --accent-purple: #4facfe;
+  --primary-accent: #00f2fe;
+  --title-glow: rgba(0, 255, 255, 0.2);
+  --toggle-btn-border: rgba(255, 255, 255, 0.2);
+  --panel-bg: rgba(255, 255, 255, 0.05);
+  --panel-border: rgba(255, 255, 255, 0.1);
+  --panel-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }
 
 a {
@@ -25,9 +43,12 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  flex-direction: column;
+  background: var(--bg-gradient);
+  background-attachment: fixed;
+  color: var(--text-color);
 }
 
 h1 {
@@ -59,10 +80,19 @@ button:focus-visible {
 }
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Glassmorphism utility class */
+.glass-panel {
+  background: var(--glass-bg);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
 }
 
 @media (prefers-color-scheme: light) {