Update style.css

style.css

@@ -5,417 +5,292 @@
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
-: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;
+: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);
 }
-
-.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) 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;
-}
-
-
+.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 .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,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,.22)!important;
 }
-
 .gradio-container .gr-panel:hover,
 .gradio-container [class*="gr-box"]:hover,
-.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: -0.01em;
-  color: var(--fg-primary);
-  margin-bottom: 0.35rem;
-}
-
-.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-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-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;
-}
+/* 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; }
 
-.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 */
+/* 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,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 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 input:focus,
 .gradio-container textarea:focus,
-.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;
+.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;
 }
 
-/* BUTTONS — dark glass, subtle accent (not primary-blue) */
+/* buttons (neutral, no blue wash) */
 .gradio-container button:not(.gr-tab-nav button),
-.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 .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 button:hover:not(.gr-tab-nav button),
-.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 .gr-button:hover{
+  background:rgba(255,255,255,.07)!important;
+  border-color:rgba(255,255,255,.22)!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,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;
-}
-
-/* ===== Gallery (ONLY filmstrip) — NO [class*="gallery"] selectors ===== */
-#down_gallery, #strange_gallery { margin-top: 12px !important; }
+.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; }
 
 #down_gallery .gr-gallery,
-#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;
+#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;
 }
 
-/* strip wrapper */
+/* wrapper scroll */
 #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 */
+/* list & items */
 #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,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;
+#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;
 }
-
-/* 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,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,.40)!important;
 }
 
-/* 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 */
+/* scrollbars */
 #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,0.03) !important;
-  border-radius: 999px !important;
+#strange_gallery .gr-gallery > div::-webkit-scrollbar-track{
+  background:rgba(255,255,255,.03)!important;
+  border-radius:999px!important;
 }
-
 #down_gallery .gr-gallery > div::-webkit-scrollbar-thumb,
-#strange_gallery .gr-gallery > div::-webkit-scrollbar-thumb {
-  background: rgba(255,255,255,0.10) !important;
-  border-radius: 999px !important;
-  border: 1px solid rgba(255,255,255,0.08) !important;
+#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;
 }
-
 #down_gallery .gr-gallery > div::-webkit-scrollbar-thumb:hover,
-#strange_gallery .gr-gallery > div::-webkit-scrollbar-thumb:hover {
-  background: rgba(255,255,255,0.16) !important;
+#strange_gallery .gr-gallery > div::-webkit-scrollbar-thumb:hover{
+  background:rgba(255,255,255,.16)!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; }
+/* 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; }
 }
 
-/* kill Gradio footer */
-footer, .gradio-container footer { display: none !important; }
+/* kill gradio footer */
+footer, .gradio-container footer{ display:none!important; }