Upload app.py with huggingface_hub

app.py

@@ -452,23 +452,25 @@ def get_ritual():
 
 # ===== CSS: Gradio 6.x Compatible =====
 CUSTOM_CSS = """
-/* Root background */
-body, .gradio-container, gradio-app {
+/* ===== Thousand Token Wood — Gradio 6.x Compatible ===== */
+
+/* --- Root dark theme --- */
+html, body, .app, .main, .gradio-container {
     background: #0a0015 !important;
+    color: #a5a0b8 !important;
+    font-family: 'Georgia', 'Times New Roman', serif !important;
 }
 
 .gradio-container {
     max-width: 900px !important;
     margin: 0 auto !important;
-    padding: 0 20px !important;
+    padding: 0 16px !important;
     min-height: 100vh !important;
-    font-family: 'Georgia', 'Times New Roman', serif !important;
 }
 
-/* Hide footer */
 footer { display: none !important; }
 
-/* === TYPOGRAPHY === */
+/* --- Typography --- */
 h1 {
     font-family: 'Georgia', serif !important;
     font-weight: 700 !important;
@@ -477,6 +479,7 @@ h1 {
     color: #feca57 !important;
     margin: 0 0 8px 0 !important;
     letter-spacing: 0.03em !important;
+    line-height: 1.2 !important;
 }
 
 h2 {
@@ -491,10 +494,10 @@ h2 {
 }
 
 h3 { color: #c4b5fd !important; }
-p { color: #a5a0b8 !important; line-height: 1.7 !important; }
 
-/* Labels */
-label, .label-text, .svelte-1gfkn6j {
+p, span, div { color: inherit; }
+
+label, .label-text {
     color: #c4b5fd !important;
     font-size: 0.8em !important;
     font-weight: 500 !important;
@@ -502,8 +505,8 @@ label, .label-text, .svelte-1gfkn6j {
     letter-spacing: 0.06em !important;
 }
 
-/* === BUTTONS === */
-button, .gr-button {
+/* --- Buttons (Gradio 6.x: button.lg.primary) --- */
+button {
     border-radius: 24px !important;
     font-weight: 600 !important;
     letter-spacing: 0.03em !important;
@@ -514,28 +517,25 @@ button, .gr-button {
     border: none !important;
 }
 
-/* Primary buttons: purple gradient */
-.gr-button-primary, button.primary, button[variant="primary"] {
+button.primary, button.lg, button.svelte-xzq5jh {
     background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
     color: #f8f7ff !important;
     box-shadow: 0 4px 20px rgba(124,58,237,0.35) !important;
     border: 1px solid rgba(255,255,255,0.15) !important;
 }
 
-.gr-button-primary:hover, button.primary:hover {
+button.primary:hover {
     filter: brightness(1.15) !important;
     box-shadow: 0 6px 28px rgba(168,85,247,0.55) !important;
     transform: translateY(-2px) !important;
 }
 
-/* Stop button */
-.gr-button-stop, button.stop, button[variant="stop"] {
+button.stop {
     background: linear-gradient(135deg, #dc2626, #991b1b) !important;
     color: #f8f7ff !important;
-    border: 1px solid rgba(255,255,255,0.1) !important;
 }
 
-/* === INPUTS === */
+/* --- Inputs --- */
 textarea, input[type="text"], input[type="number"] {
     background: rgba(15, 8, 30, 0.7) !important;
     border: 1px solid rgba(180, 150, 220, 0.25) !important;
@@ -551,51 +551,39 @@ textarea:focus, input:focus {
     outline: none !important;
 }
 
-/* === SLIDERS === */
 input[type="range"] { accent-color: #a855f7 !important; }
 
-/* === RADIO === */
-fieldset label, .radio-group label {
+/* --- Radio --- */
+fieldset label, .radio-group label, label.svelte-1hf8a14 {
     padding: 10px 20px !important;
     border-radius: 10px !important;
     border: 1px solid rgba(180,150,220,0.2) !important;
     margin: 4px !important;
     background: rgba(20,12,40,0.5) !important;
     color: #c4b5fd !important;
+    cursor: pointer !important;
     transition: all 0.2s !important;
 }
 
-fieldset label.selected, .radio-group input:checked + label,
-input[type="radio"]:checked + label {
-    border-color: #feca57 !important;
-    background: rgba(254,202,87,0.1) !important;
-    color: #feca57 !important;
-    box-shadow: 0 0 16px rgba(254,202,87,0.12) !important;
-}
-
-/* === PANELS / CARDS === */
-.gradio-container > .contain > div > div,
-.prose + div, .gr-group, fieldset, .panel {
-    background: rgba(20, 12, 40, 0.6) !important;
+/* --- Card blocks --- */
+.block, .top-panel, .unpadded_box {
+    background: rgba(20, 12, 40, 0.55) !important;
     backdrop-filter: blur(12px) !important;
     -webkit-backdrop-filter: blur(12px) !important;
     border: 1px solid rgba(180, 150, 220, 0.15) !important;
     border-radius: 16px !important;
-    padding: 20px !important;
-    margin-bottom: 16px !important;
+    padding: 16px 20px !important;
+    margin-bottom: 12px !important;
     box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
 }
 
-/* === JSON === */
-.gr-json, .json-display {
-    border-radius: 12px !important;
-    background: rgba(10, 4, 20, 0.7) !important;
-    color: #a5a0b8 !important;
-    border: 1px solid rgba(180,150,220,0.15) !important;
-    font-family: monospace !important;
-}
+/* --- Images in cards --- */
+img { border-radius: 10px !important; }
 
-/* === STATUS BOX === */
+/* --- Centered empty state --- */
+.unpadded_box:empty { display: none !important; }
+
+/* --- Status box --- */
 #status-box textarea, #status-box input {
     background: rgba(254,202,87,0.06) !important;
     border-color: rgba(254,202,87,0.25) !important;
@@ -603,7 +591,7 @@ input[type="radio"]:checked + label {
     font-style: italic !important;
 }
 
-/* === RITUAL BUTTON (heart glow) === */
+/* --- Ritual button (heart pulse) --- */
 #ritual-btn {
     background: linear-gradient(135deg, #e94560, #ff6b9d) !important;
     font-size: 1.1em !important;
@@ -617,19 +605,24 @@ input[type="radio"]:checked + label {
     50% { box-shadow: 0 8px 44px rgba(233,69,96,0.75); }
 }
 
-/* === IMAGE containers === */
-img { border-radius: 12px !important; }
-
-/* === MARKDOWN === */
-.prose, .md, .markdown { color: #a5a0b8 !important; }
+/* --- Markdown content --- */
+.prose p, .md p, .markdown p { color: #a5a0b8 !important; line-height: 1.7 !important; }
 .prose em, .md em { color: #c4b5fd !important; }
 .prose strong, .md strong { color: #f8f7ff !important; }
 
-/* === RESPONSIVE === */
+/* --- JSON display --- */
+.json-display, pre {
+    background: rgba(10, 4, 20, 0.7) !important;
+    border-radius: 12px !important;
+    padding: 12px !important;
+    color: #a5a0b8 !important;
+}
+
+/* --- Responsive --- */
 @media (max-width: 768px) {
     h1 { font-size: 2em !important; }
     h2 { font-size: 1.3em !important; }
-    .gradio-container { padding: 0 12px !important; }
+    .gradio-container { padding: 0 10px !important; }
 }
 """