Update app.py

app.py

@@ -383,6 +383,166 @@ label {
     border: 2px dashed #e0e0e0 !important;
     border-radius: 8px !important;
 }
+
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+    .header-box h1 {
+        font-size: 1.8em !important;
+    }
+    
+    .header-box p {
+        font-size: 0.95em !important;
+    }
+    
+    .badge {
+        font-size: 0.85em !important;
+        padding: 4px 12px !important;
+    }
+    
+    .info-box {
+        padding: 12px !important;
+        font-size: 0.9em !important;
+    }
+    
+    .gr-button {
+        padding: 12px 20px !important;
+        font-size: 14px !important;
+    }
+    
+    .footer-box {
+        padding: 15px !important;
+        font-size: 0.9em !important;
+    }
+    
+    /* Mobile link buttons */
+    .header-box a {
+        padding: 8px 16px !important;
+        font-size: 0.85em !important;
+    }
+}
+
+/* Dark mode support - ensures text is always readable */
+@media (prefers-color-scheme: dark) {
+    /* Keep header gradient but ensure text contrast */
+    .header-box {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    }
+    
+    .header-box h1,
+    .header-box p,
+    .header-box a,
+    .badge {
+        color: white !important;
+    }
+    
+    /* Adjust info box for dark mode */
+    .info-box {
+        background: #2d3748 !important;
+        border-left-color: #4299e1 !important;
+        color: #e2e8f0 !important;
+    }
+    
+    .info-box h4 {
+        color: #63b3ed !important;
+    }
+    
+    .info-box ul {
+        color: #e2e8f0 !important;
+    }
+    
+    .info-box a {
+        color: #90cdf4 !important;
+    }
+    
+    /* Footer dark mode */
+    .footer-box {
+        background: #2d3748 !important;
+        color: #e2e8f0 !important;
+    }
+    
+    .footer-box p {
+        color: #e2e8f0 !important;
+    }
+    
+    .footer-box a {
+        color: #90cdf4 !important;
+    }
+    
+    /* Input fields dark mode */
+    .gr-textbox,
+    .gr-text-input {
+        background: #2d3748 !important;
+        color: #e2e8f0 !important;
+        border-color: #4a5568 !important;
+    }
+    
+    /* Labels dark mode */
+    label {
+        color: #e2e8f0 !important;
+    }
+    
+    /* Markdown output dark mode */
+    .gr-markdown {
+        background: #2d3748 !important;
+        color: #e2e8f0 !important;
+        border-color: #4a5568 !important;
+    }
+}
+
+/* Light mode explicit styles - ensures text is always readable */
+@media (prefers-color-scheme: light) {
+    .header-box h1,
+    .header-box p,
+    .header-box a,
+    .badge {
+        color: white !important;
+        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    }
+    
+    .info-box {
+        background: #e7f3ff !important;
+        color: #1a202c !important;
+    }
+    
+    .info-box h4 {
+        color: #1976D2 !important;
+    }
+    
+    .info-box ul {
+        color: #333 !important;
+    }
+    
+    .info-box a {
+        color: #667eea !important;
+    }
+    
+    .footer-box {
+        background: #f8f9fa !important;
+        color: #333 !important;
+    }
+    
+    .footer-box a {
+        color: #667eea !important;
+    }
+}
+
+/* High contrast mode for accessibility */
+@media (prefers-contrast: high) {
+    .header-box h1,
+    .header-box p,
+    .badge {
+        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        font-weight: 600 !important;
+    }
+    
+    .info-box {
+        border-left-width: 6px !important;
+    }
+    
+    .gr-button {
+        border: 2px solid currentColor !important;
+    }
+}
 """
 
 # Create Gradio interface
@@ -425,6 +585,10 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🎮 BesiegeField
                                 <li>Click "Generate Machine"</li>
                                 <li>Wait for AI to generate (30-120 seconds)</li>
                                 <li>Download the generated .bsg file</li>
+                                <li>Put yout .bsg file into GameRoot/Besiege_Data/SavedMachines</li>
+                                <li>Open the game, open costume scene, load machine</li>
+                                <li>For detailed guidance, please refer to the 📖 Help Tutorial video</li>
+                                <li>You can check our <a href="https://github.com/Godheritage/BesiegeField" target="_blank" style="color: #667eea; text-decoration: underline; font-weight: 500;">GitHub repo</a> for more LLMs and agentic workflows</li>
                             </ul>
                         </div>
                     """)