first prototype

wizard_website/src/App.module.css

@@ -0,0 +1,54 @@
+/* Global element defaults; everything else is scoped to modules. */
+:global(*),
+:global(*::before),
+:global(*::after) {
+  box-sizing: border-box;
+}
+
+:global(body) {
+  margin: 0;
+}
+
+.app {
+  /* Design tokens, inherited by all components. */
+  --bg: #0f0c24;
+  --bg-elevated: #1a1640;
+  --bg-sunken: #0a081a;
+  --surface: #231d52;
+  --border: #3a3278;
+  --text: #ece9ff;
+  --text-muted: #a49fcc;
+  --accent: #8b6cff;
+  --accent-strong: #a58cff;
+  --gold: #ffd166;
+  --danger: #ff6b7a;
+  --success: #4fd18b;
+  --suit-red: #e5484d;
+  --suit-yellow: #f2b90d;
+  --suit-green: #2fa46c;
+  --suit-blue: #3e7bfa;
+  --radius: 12px;
+  --shadow: 0 10px 30px rgb(0 0 0 / 35%);
+  --font: system-ui, 'Segoe UI', Roboto, sans-serif;
+
+  min-height: 100vh;
+  min-height: 100dvh;
+  background:
+    radial-gradient(ellipse at top, rgb(109 74 255 / 25%), transparent 60%),
+    radial-gradient(ellipse at bottom, rgb(255 209 102 / 8%), transparent 60%),
+    var(--bg);
+  color: var(--text);
+  font: 16px/1.45 var(--font);
+  -webkit-font-smoothing: antialiased;
+}
+
+.banner {
+  position: fixed;
+  inset: 0 0 auto;
+  z-index: 50;
+  padding: 8px 16px;
+  background: #5b2330;
+  color: #ffe1e6;
+  text-align: center;
+  font-size: 14px;
+}