Upload app.py

app.py

@@ -102,33 +102,73 @@ def toggle_custom(mode):
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');
 
-body { background: #0a0a0a !important; }
+body { background: #ffffff !important; }
 .gradio-container {
-    background: #0a0a0a !important;
+    background: #ffffff !important;
     font-family: 'DM Mono', monospace !important;
     max-width: 1100px !important;
 }
-.pg-header { padding: 28px 0 22px; border-bottom: 1px solid #1e1e1e; margin-bottom: 4px; }
-.pg-num { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.2em; color: #333; margin-bottom: 6px; display: block; }
-.pg-logo { font-family: 'Bebas Neue', sans-serif; font-size: 56px; letter-spacing: 0.1em; color: #f2efe8; line-height: 1; display: block; }
-.pg-logo .accent { color: #d4a912; }
-.pg-sub { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.22em; color: #f2efe8; text-transform: uppercase; margin-top: 8px; display: block; }
-.pg-rule { width: 100%; height: 1px; background: #1e1e1e; margin-top: 20px; }
-.gradio-container h2 { font-family: 'DM Mono', monospace !important; font-size: 9px !important; letter-spacing: 0.2em !important; color: #d4a912 !important; text-transform: uppercase !important; border-bottom: 1px solid #1e1e1e !important; padding-bottom: 6px !important; margin-top: 20px !important; font-weight: 400 !important; }
-button.primary { background: #d4a912 !important; color: #0a0a0a !important; border: none !important; border-radius: 0 !important; font-family: 'DM Mono', monospace !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-size: 0.7rem !important; font-weight: 500 !important; }
-button.secondary { background: transparent !important; color: #555 !important; border: 1px solid #2a2a2a !important; border-radius: 0 !important; font-family: 'DM Mono', monospace !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-size: 0.7rem !important; }
-button:hover { opacity: 0.85 !important; }
-label span { font-family: 'DM Mono', monospace !important; font-size: 10px !important; letter-spacing: 0.1em !important; color: #666 !important; text-transform: uppercase !important; }
-input[type=range] { accent-color: #d4a912 !important; }
-input[type=checkbox] { accent-color: #d4a912 !important; }
-textarea { background: #0d0d0d !important; border: 1px solid #1e1e1e !important; color: #888 !important; font-family: 'DM Mono', monospace !important; font-size: 12px !important; border-radius: 0 !important; }
-.guide { font-family: 'DM Mono', monospace; font-size: 11px; line-height: 1.9; color: #555; margin-top: 16px; }
-.guide strong { color: #888; font-weight: 500; }
+.pg-header { padding: 24px 0 18px; border-bottom: 1px solid #e0ddd5; margin-bottom: 4px; }
+.pg-logo { font-family: 'Bebas Neue', sans-serif; font-size: 56px; letter-spacing: 0.1em; color: #1a1a1a; line-height: 1; display: block; }
+.pg-logo .accent { color: #b8860b; }
+.pg-sub { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.22em; color: #1a1a1a; text-transform: uppercase; margin-top: 8px; display: block; }
+.pg-rule { width: 100%; height: 1px; background: #e0ddd5; margin-top: 18px; }
+.gradio-container h2 {
+    font-family: 'DM Mono', monospace !important;
+    font-size: 9px !important;
+    letter-spacing: 0.2em !important;
+    color: #b8860b !important;
+    text-transform: uppercase !important;
+    border-bottom: 1px solid #e0ddd5 !important;
+    padding-bottom: 6px !important;
+    margin-top: 20px !important;
+    font-weight: 400 !important;
+}
+button.primary {
+    background: #1a1a1a !important;
+    color: #fff !important;
+    border: none !important;
+    border-radius: 0 !important;
+    font-family: 'DM Mono', monospace !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.1em !important;
+    font-size: 0.7rem !important;
+    font-weight: 500 !important;
+}
+button.secondary {
+    background: transparent !important;
+    color: #888 !important;
+    border: 1px solid #ccc !important;
+    border-radius: 0 !important;
+    font-family: 'DM Mono', monospace !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.1em !important;
+    font-size: 0.7rem !important;
+}
+button:hover { opacity: 0.75 !important; }
+label span {
+    font-family: 'DM Mono', monospace !important;
+    font-size: 10px !important;
+    letter-spacing: 0.1em !important;
+    color: #888 !important;
+    text-transform: uppercase !important;
+}
+input[type=range] { accent-color: #1a1a1a !important; }
+input[type=checkbox] { accent-color: #1a1a1a !important; }
+textarea {
+    background: #fafaf8 !important;
+    border: 1px solid #e0ddd5 !important;
+    color: #333 !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 12px !important;
+    border-radius: 0 !important;
+}
+.guide { font-family: 'DM Mono', monospace; font-size: 11px; line-height: 1.9; color: #aaa; margin-top: 16px; }
+.guide strong { color: #555; font-weight: 500; }
 """
 
 HEADER_HTML = """
 <div class="pg-header">
-  <span class="pg-num">02 / Pattern Ground</span>
   <span class="pg-logo">Pattern <span class="accent">Ground</span></span>
   <span class="pg-sub">Fabrication Topologies · Vectorealism × Dropcity · Design Week Milano 2026</span>
   <div class="pg-rule"></div>