Update style.css

style.css

@@ -5,292 +5,438 @@
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
-:root{
-  --bg-base:#000000;
-  --fg-primary:#FFFFFF;
-  --fg-secondary:rgba(255,255,255,.72);
-  --fg-tertiary:rgba(255,255,255,.46);
-
-  /* dark glass */
-  --surface-card:rgba(255,255,255,.045);
-  --surface-card-hover:rgba(255,255,255,.075);
-  --surface-input:rgba(255,255,255,.04);
-
-  --border-subtle:rgba(255,255,255,.08);
-  --border-medium:rgba(255,255,255,.14);
-
-  --radius-sm:10px;
-  --radius-md:14px;
-  --radius-lg:18px;
-  --radius-full:999px;
-
-  --space-xs:.5rem;
-  --space-sm:.75rem;
-  --space-md:1rem;
-  --space-lg:1.5rem;
-  --space-xl:2rem;
-
-  --trans-fast:150ms cubic-bezier(.4,0,.2,1);
-  --trans-base:200ms cubic-bezier(.4,0,.2,1);
-
-  --shadow-soft:0 10px 30px rgba(0,0,0,.35);
-
-  --z-base:1;
-  --z-canvas:0;
-}
-
-html,body{height:100%;overflow-x:hidden}
-body{
-  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
-  background:var(--bg-base);
-  color:var(--fg-primary);
-  line-height:1.6;
-  -webkit-font-smoothing:antialiased;
-  -moz-osx-font-smoothing:grayscale;
-}
-
-/* container */
-.gradio-container{
-  background:var(--bg-base)!important;
-  color:var(--fg-primary)!important;
-  max-width:1050px;
-  margin:0 auto;
-  padding:var(--space-lg);
+:root {
+  /* keep tokens but UI should be dark-glass first */
+  --ultra-blue: #3B82F6;
+  --ultra-blue-bright: #60A5FA;
+  --ultra-blue-deep: #1E40AF;
+  --ultra-blue-glow: rgba(39, 100, 180, 0.35);
+
+  --bg-base: #000000;
+  --bg-elev: rgba(10, 12, 18, 0.82);
+
+  --fg-primary: #FFFFFF;
+  --fg-secondary: rgba(255, 255, 255, 0.72);
+  --fg-tertiary: rgba(255, 255, 255, 0.46);
+
+  /* DARK GLASS SYSTEM */
+  --surface-glass: rgba(0, 0, 0, 0.34);
+  --surface-card: rgba(255, 255, 255, 0.045);
+  --surface-card-hover: rgba(255, 255, 255, 0.075);
+  --surface-input: rgba(255, 255, 255, 0.04);
+
+  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-medium: rgba(255, 255, 255, 0.14);
+
+  /* de-emphasize blue (still usable as accent) */
+  --border-accent: rgba(180, 190, 200, 0.22);
+
+  --space-xs: 0.5rem;
+  --space-sm: 0.75rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 18px;
+  --radius-full: 999px;
+
+  --font-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  --trans-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --trans-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --trans-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  --shadow-soft: 0 10px 30px rgba(0,0,0,0.35);
+  --shadow-glow: 0 0 22px rgba(140, 180, 255, 0.10);
+
+  --z-base: 1;
+  --z-canvas: 0;
 }
+
+html, body { height: 100%; overflow-x: hidden; }
+
+body {
+  font-family: var(--font-body);
+  background: var(--bg-base);
+  color: var(--fg-primary);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.gradio-container {
+  background: var(--bg-base) !important;
+  color: var(--fg-primary) !important;
+  max-width: 1050px;
+  margin: 0 auto;
+  padding: var(--space-lg);
+}
+
 .gradio-container .prose,
-.gradio-container .markdown{ color:var(--fg-secondary)!important; }
-
-/* starfield */
-#quantumField{
-  position:fixed;inset:0;
-  width:100vw;height:100vh;
-  z-index:var(--z-canvas);
-  background:var(--bg-base);
-  pointer-events:none;
-}
-#tq-app{ position:relative; z-index:var(--z-base); padding-top:var(--space-md); }
-
-/* hero */
-.tq-hero{
-  margin:var(--space-md) 0 var(--space-lg);
-  padding:var(--space-lg) var(--space-xl);
-  background:rgba(0,0,0,.38);
-  backdrop-filter:blur(16px) saturate(160%);
-  -webkit-backdrop-filter:blur(12px) saturate(160%);
-  border:1px solid var(--border-subtle);
-  border-radius:var(--radius-lg);
-  box-shadow:var(--shadow-soft);
-}
-.tq-hero__brand{
-  font-weight:750;
-  font-size:1.55rem;
-  letter-spacing:-.02em;
-  background:linear-gradient(135deg,#fff 0%,rgba(210,220,235,.85) 100%);
-  -webkit-background-clip:text;
-  -webkit-text-fill-color:transparent;
-}
-.tq-hero__desc{
-  margin-top:var(--space-sm);
-  color:var(--fg-secondary);
-  font-size:.95rem;
-  line-height:1.7;
-  max-width:70ch;
-}
-
-/* panels */
+.gradio-container .markdown {
+  color: var(--fg-secondary) !important;
+}
+
+/* STARFIELD */
+#quantumField {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: var(--z-canvas);
+  background: var(--bg-base);
+  pointer-events: none;
+}
+
+#tq-app {
+  position: relative;
+  z-index: var(--z-base);
+  padding-top: var(--space-md);
+}
+
+/* HERO */
+.tq-hero {
+  margin: var(--space-md) 0 var(--space-lg) 0;
+  padding: var(--space-lg) var(--space-xl);
+  background: rgba(0,0,0,0.38);
+  backdrop-filter: blur(16px) saturate(160%);
+  -webkit-backdrop-filter: blur(12px) saturate(160%);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-soft);
+}
+
+.tq-hero__brand {
+  font-weight: 750;
+  font-size: 1.55rem;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, var(--fg-primary) 0%, rgba(210,220,235,0.85) 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.tq-hero__desc {
+  margin-top: var(--space-sm);
+  color: var(--fg-secondary);
+  font-size: 0.95rem;
+  line-height: 1.7;
+  max-width: 70ch;
+}
+
+/* BASE PANELS / CARDS — force dark glass (no blue wash) */
 .gradio-container .gr-panel,
 .gradio-container [class*="gr-box"],
 .gradio-container .gr-form,
 .gradio-container .block,
-.gradio-container .wrap{
-  background:var(--surface-card)!important;
-  backdrop-filter:blur(12px)!important;
-  -webkit-backdrop-filter:blur(12px)!important;
-  border:1px solid var(--border-subtle)!important;
-  border-radius:var(--radius-md)!important;
-  padding:var(--space-lg)!important;
-  transition:transform var(--trans-base),
-             box-shadow var(--trans-base),
-             border-color var(--trans-base),
-             background var(--trans-base)!important;
-  box-shadow:0 6px 22px rgba(0,0,0,.22)!important;
+.gradio-container .wrap {
+  background: var(--surface-card) !important;
+  backdrop-filter: blur(12px) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+  border: 1px solid var(--border-subtle) !important;
+  border-radius: var(--radius-md) !important;
+  padding: var(--space-lg) !important;
+  transition: transform var(--trans-base),
+              box-shadow var(--trans-base),
+              border-color var(--trans-base),
+              background var(--trans-base) !important;
+  box-shadow: 0 6px 22px rgba(0,0,0,0.22) !important;
 }
+
 .gradio-container .gr-panel:hover,
 .gradio-container [class*="gr-box"]:hover,
-.gradio-container .gr-form:hover{
-  border-color:rgba(255,255,255,.14)!important;
-  background:var(--surface-card-hover)!important;
-  box-shadow:0 10px 32px rgba(0,0,0,.30)!important;
+.gradio-container .gr-form:hover {
+  border-color: rgba(255,255,255,0.14) !important;
+  background: var(--surface-card-hover) !important;
+  box-shadow: 0 10px 32px rgba(0,0,0,0.30) !important;
 }
 
-/* titles */
-.tq-card-title{ font-weight:650; letter-spacing:-.01em; margin-bottom:.35rem; }
-.tq-card-subtitle{ color:var(--fg-tertiary); font-size:.85rem; margin-bottom:.75rem; }
+/* TITLES */
+.tq-card-title {
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  color: var(--fg-primary);
+  margin-bottom: 0.35rem;
+}
 
-/* inputs */
+.tq-card-subtitle {
+  color: var(--fg-tertiary);
+  font-size: 0.85rem;
+  margin-bottom: 0.75rem;
+}
+
+/* TABS */
+.gradio-container .gr-tab-nav {
+  background: transparent !important;
+  border: none !important;
+  gap: var(--space-sm) !important;
+  padding: 0 !important;
+  margin-bottom: var(--space-lg) !important;
+}
+
+.gradio-container .gr-tab-nav button {
+  padding: 0.55rem 0.95rem !important;
+  font-size: 0.875rem !important;
+  font-weight: 520 !important;
+  color: var(--fg-primary) !important;
+  background: rgba(255, 255, 255, 0.02) !important;
+  border: 1px solid var(--border-medium) !important;
+  border-radius: var(--radius-full) !important;
+  opacity: 0.92 !important;
+  transition: all var(--trans-base) !important;
+}
+
+.gradio-container .gr-tab-nav button:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+  border-color: rgba(255,255,255,0.20) !important;
+}
+
+.gradio-container .gr-tab-nav button.selected,
+.gradio-container .gr-tab-nav button[aria-selected="true"] {
+  background: rgba(255,255,255,0.06) !important;
+  border-color: rgba(255,255,255,0.26) !important;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset !important;
+  opacity: 1 !important;
+}
+
+/* INPUTS */
 .gradio-container input[type="text"],
 .gradio-container input[type="number"],
 .gradio-container textarea,
-.gradio-container select{
-  background:var(--surface-input)!important;
-  border:1px solid rgba(255,255,255,.16)!important;
-  border-radius:var(--radius-md)!important;
-  color:var(--fg-primary)!important;
-  padding:.65rem .85rem!important;
-  font-size:.95rem!important;
+.gradio-container select {
+  background: var(--surface-input) !important;
+  border: 1px solid rgba(255,255,255,0.16) !important;
+  border-radius: var(--radius-md) !important;
+  color: var(--fg-primary) !important;
+  padding: 0.65rem 0.85rem !important;
+  font-size: 0.95rem !important;
+  transition: all var(--trans-base) !important;
 }
+
 .gradio-container input:focus,
 .gradio-container textarea:focus,
-.gradio-container select:focus{
-  outline:none!important;
-  border-color:rgba(255,255,255,.28)!important;
-  box-shadow:0 0 0 3px rgba(255,255,255,.08)!important;
+.gradio-container select:focus {
+  outline: none !important;
+  border-color: rgba(255,255,255,0.28) !important;
+  box-shadow: 0 0 0 3px rgba(255,255,255,0.08) !important;
+}
+
+.gradio-container input[type="range"] {
+  accent-color: rgba(210,220,235,0.75) !important;
 }
 
-/* buttons (neutral, no blue wash) */
+/* BUTTONS — dark glass, subtle accent (not primary-blue) */
 .gradio-container button:not(.gr-tab-nav button),
-.gradio-container .gr-button{
-  padding:.65rem 1.05rem!important;
-  font-size:.95rem!important;
-  font-weight:600!important;
-  color:var(--fg-primary)!important;
-  background:rgba(255,255,255,.04)!important;
-  border:1px solid rgba(255,255,255,.14)!important;
-  border-radius:var(--radius-full)!important;
-  cursor:pointer!important;
-  transition:transform var(--trans-fast),
-             box-shadow var(--trans-base),
-             background var(--trans-base),
-             border-color var(--trans-base)!important;
+.gradio-container .gr-button {
+  padding: 0.65rem 1.05rem !important;
+  font-size: 0.95rem !important;
+  font-weight: 600 !important;
+  letter-spacing: 0.01em !important;
+  color: var(--fg-primary) !important;
+  background: rgba(255,255,255,0.04) !important;
+  border: 1px solid rgba(255,255,255,0.14) !important;
+  border-radius: var(--radius-full) !important;
+  cursor: pointer !important;
+  transition: transform var(--trans-fast),
+              box-shadow var(--trans-base),
+              background var(--trans-base),
+              border-color var(--trans-base) !important;
 }
+
 .gradio-container button:hover:not(.gr-tab-nav button),
-.gradio-container .gr-button:hover{
-  background:rgba(255,255,255,.07)!important;
-  border-color:rgba(255,255,255,.22)!important;
+.gradio-container .gr-button:hover {
+  background: rgba(255,255,255,0.07) !important;
+  border-color: rgba(255,255,255,0.22) !important;
+  box-shadow: 0 0 18px rgba(0,0,0,0.20) !important;
+}
+
+.gradio-container button:active:not(.gr-tab-nav button),
+.gradio-container .gr-button:active { transform: scale(0.985) !important; }
+
+.gradio-container button:disabled,
+.gradio-container .gr-button:disabled {
+  opacity: 0.35 !important;
+  cursor: not-allowed !important;
 }
+
+/* Even if variant="primary" leaks, keep it dark */
 .gradio-container button.primary,
-.gradio-container .gr-button-primary{
-  background:rgba(255,255,255,.06)!important;
-  border-color:rgba(255,255,255,.20)!important;
-}
-
-/* ============================================================
-   GALLERY: HARD-KILL preview panel + modal/lightbox
-   (esta es la parte que elimina la “imagen grande de fondo”)
-   ============================================================ */
-
-/* 1) Mata cualquier preview interno que Gradio meta */
-#down_gallery [class*="preview"],
-#strange_gallery [class*="preview"],
-#down_gallery [data-testid*="preview"],
-#strange_gallery [data-testid*="preview"],
-#down_gallery .preview,
-#strange_gallery .preview{
-  display:none!important;
-  visibility:hidden!important;
-  height:0!important;
-  width:0!important;
-  overflow:hidden!important;
-  pointer-events:none!important;
-}
-
-/* 2) Mata lightbox/modal por si HF lo fuerza */
-[class*="lightbox"],
-[class*="modal"],
-[class*="overlay"],
-[data-testid*="lightbox"],
-[data-testid*="modal"]{
-  /* ojo: esto es agresivo; pero en Spaces suele ser deseable */
-}
-#down_gallery [class*="lightbox"],
-#strange_gallery [class*="lightbox"],
-#down_gallery [class*="modal"],
-#strange_gallery [class*="modal"],
-#down_gallery [class*="overlay"],
-#strange_gallery [class*="overlay"]{
-  display:none!important;
-  visibility:hidden!important;
-  pointer-events:none!important;
-}
-
-/* 3) Filmstrip horizontal */
-#down_gallery, #strange_gallery{ margin-top:12px!important; }
+.gradio-container .gr-button-primary {
+  background: rgba(255,255,255,0.06) !important;
+  border-color: rgba(255,255,255,0.20) !important;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
+}
+
+.gradio-container button.primary:hover,
+.gradio-container .gr-button-primary:hover {
+  filter: brightness(1.06) !important;
+  box-shadow: 0 14px 40px rgba(0,0,0,0.22) !important;
+}
+
+/* IMAGES general */
+.gradio-container img {
+  width: auto !important;
+  height: auto !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+  object-fit: contain !important;
+  display: block !important;
+}
+
+/* IMPORTANT: kill any leftover preview containers if some Gradio version still renders them */
+#down_gallery .gr-gallery-preview,
+#strange_gallery .gr-gallery-preview,
+#down_gallery [data-testid="gallery-preview"],
+#strange_gallery [data-testid="gallery-preview"] {
+  display: none !important;
+  visibility: hidden !important;
+  height: 0 !important;
+  overflow: hidden !important;
+}
+
+/* ===== Gallery (ONLY filmstrip) — NO [class*="gallery"] selectors ===== */
+#down_gallery, #strange_gallery { margin-top: 12px !important; }
 
 #down_gallery .gr-gallery,
-#strange_gallery .gr-gallery{
-  background:rgba(0,0,0,.22)!important;
-  border:1px solid var(--border-subtle)!important;
-  border-radius:var(--radius-md)!important;
-  padding:10px!important;
-  overflow:hidden!important;
+#strange_gallery .gr-gallery {
+  background: rgba(0,0,0,0.22) !important;
+  border: 1px solid var(--border-subtle) !important;
+  border-radius: var(--radius-md) !important;
+  padding: 10px !important;
+  overflow: hidden !important;
 }
 
-/* wrapper scroll */
+/* strip wrapper */
 #down_gallery .gr-gallery > div,
-#strange_gallery .gr-gallery > div{
-  overflow-x:auto!important;
-  overflow-y:hidden!important;
-  scroll-snap-type:x mandatory!important;
-  -webkit-overflow-scrolling:touch!important;
-  padding-bottom:10px!important;
+#strange_gallery .gr-gallery > div {
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  scroll-snap-type: x mandatory !important;
+  -webkit-overflow-scrolling: touch !important;
+  padding-bottom: 10px !important;
 }
 
-/* list & items */
+/* list */
 #down_gallery [role="list"],
-#strange_gallery [role="list"]{
-  display:flex!important;
-  flex-wrap:nowrap!important;
-  gap:12px!important;
-  padding:4px!important;
+#strange_gallery [role="list"] {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  gap: 12px !important;
+  padding: 4px !important;
 }
+
+/* tile */
 #down_gallery [role="listitem"],
-#strange_gallery [role="listitem"]{
-  flex:0 0 220px!important;
-  scroll-snap-align:start!important;
-  border-radius:var(--radius-md)!important;
-  overflow:hidden!important;
-  background:rgba(255,255,255,.03)!important;
-  border:1px solid rgba(255,255,255,.10)!important;
-  box-shadow:0 10px 24px rgba(0,0,0,.28)!important;
+#strange_gallery [role="listitem"] {
+  flex: 0 0 220px !important;
+  scroll-snap-align: start !important;
+  border-radius: var(--radius-md) !important;
+  overflow: hidden !important;
+  background: rgba(255,255,255,0.03) !important;
+  border: 1px solid rgba(255,255,255,0.10) !important;
+  box-shadow: 0 10px 24px rgba(0,0,0,0.28) !important;
+  transition: transform var(--trans-base), border-color var(--trans-base), box-shadow var(--trans-base) !important;
+}
+
+#down_gallery [role="listitem"]:hover,
+#strange_gallery [role="listitem"]:hover {
+  transform: translateY(-2px) !important;
+  border-color: rgba(255,255,255,0.18) !important;
+  box-shadow: 0 12px 34px rgba(0,0,0,0.36) !important;
 }
+
+/* image in tile */
 #down_gallery [role="listitem"] img,
-#strange_gallery [role="listitem"] img{
-  width:100%!important;
-  height:220px!important;
-  object-fit:contain!important;
-  display:block!important;
-  background:rgba(0,0,0,.40)!important;
+#strange_gallery [role="listitem"] img {
+  width: 100% !important;
+  height: 220px !important;
+  object-fit: contain !important;
+  display: block !important;
+  background: rgba(0,0,0,0.40) !important;
 }
 
-/* scrollbars */
+/* subtle top accent bar, but neutral */
+#down_gallery [role="listitem"]::before,
+#strange_gallery [role="listitem"]::before {
+  content: "";
+  display: block;
+  height: 10px;
+  background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(0,0,0,0));
+}
+
+/* scrollbars inside strip */
 #down_gallery .gr-gallery > div::-webkit-scrollbar,
-#strange_gallery .gr-gallery > div::-webkit-scrollbar{ height:10px!important; }
+#strange_gallery .gr-gallery > div::-webkit-scrollbar { height: 10px !important; }
+
 #down_gallery .gr-gallery > div::-webkit-scrollbar-track,
-#strange_gallery .gr-gallery > div::-webkit-scrollbar-track{
-  background:rgba(255,255,255,.03)!important;
-  border-radius:999px!important;
+#strange_gallery .gr-gallery > div::-webkit-scrollbar-track {
+  background: rgba(255,255,255,0.03) !important;
+  border-radius: 220px !important;
 }
+
 #down_gallery .gr-gallery > div::-webkit-scrollbar-thumb,
-#strange_gallery .gr-gallery > div::-webkit-scrollbar-thumb{
-  background:rgba(255,255,255,.10)!important;
-  border-radius:999px!important;
-  border:1px solid rgba(255,255,255,.08)!important;
+#strange_gallery .gr-gallery > div::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.10) !important;
+  border-radius: 220px !important;
+  border: 1px solid rgba(255,255,255,0.08) !important;
 }
+
 #down_gallery .gr-gallery > div::-webkit-scrollbar-thumb:hover,
-#strange_gallery .gr-gallery > div::-webkit-scrollbar-thumb:hover{
-  background:rgba(255,255,255,.16)!important;
+#strange_gallery .gr-gallery > div::-webkit-scrollbar-thumb:hover {
+  background: rgba(255,255,255,0.16) !important;
 }
 
-/* mobile */
-@media (max-width:768px){
-  .gradio-container{ padding:var(--space-md); }
-  .tq-hero{ padding:var(--space-md) var(--space-lg); }
-  .tq-hero__brand{ font-size:1.25rem; }
-  #down_gallery [role="listitem"],
-  #strange_gallery [role="listitem"]{ flex-basis:200px!important; }
-  #down_gallery [role="listitem"] img,
-  #strange_gallery [role="listitem"] img{ height:200px!important; }
+/* labels, descriptions */
+.gradio-container label,
+.gradio-container .gr-label {
+  color: var(--fg-secondary) !important;
+  font-size: 0.875rem !important;
+  font-weight: 550 !important;
+  margin-bottom: var(--space-xs) !important;
+}
+
+.gradio-container .gr-description,
+.gradio-container .gr-info {
+  color: var(--fg-tertiary) !important;
+  font-size: 0.82rem !important;
+  line-height: 1.55 !important;
+}
+
+/* code blocks */
+.gradio-container pre,
+.gradio-container code {
+  font-family: var(--font-mono) !important;
+  background: rgba(255,255,255,0.04) !important;
+  border: 1px solid rgba(255,255,255,0.10) !important;
+  border-radius: var(--radius-sm) !important;
+  padding: 0.35rem 0.55rem !important;
+  color: rgba(210,220,235,0.92) !important;
+}
+
+/* progress */
+.gradio-container .gr-loading { color: rgba(210,220,235,0.80) !important; }
+.gradio-container .progress-bar {
+  background: rgba(210,220,235,0.60) !important;
+  box-shadow: 0 0 12px rgba(210,220,235,0.10) !important;
+}
+
+/* global scrollbars */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: var(--radius-sm); }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }
+
+@media (max-width: 768px) {
+  :root { --space-lg: 1rem; --space-xl: 1.5rem; }
+  .gradio-container { padding: var(--space-md); }
+  .tq-hero { padding: var(--space-md) var(--space-lg); }
+  .tq-hero__brand { font-size: 1.25rem; }
+  #down_gallery [role="listitem"], #strange_gallery [role="listitem"] { flex-basis: 200px !important; }
+  #down_gallery [role="listitem"] img, #strange_gallery [role="listitem"] img { height: 200px !important; }
 }
 
-/* kill gradio footer */
-footer, .gradio-container footer{ display:none!important; }
+/* kill Gradio footer */
+footer, .gradio-container footer { display: none !important; }