Update style.css

style.css

@@ -4,7 +4,7 @@
 :root{
   --bg:#000; --fg:#fff; --muted:rgba(255,255,255,.55);
   --card:rgba(255,255,255,.04); --card2:rgba(255,255,255,.08);
-  --stroke:rgba(255,255,255,.10); --glass:rgba(0,0,0,.28);
+  --stroke:rgba(255,255,255,.10); --glass:rgba(0,0,0,.21);
   --accent:#8cb4ff;
 }
 
@@ -20,38 +20,38 @@ body, .gradio-container{
 #quantumField{
   position:fixed; inset:0;
   width:100vw; height:100vh;
-  z-index:-10; background:#000;
+  z-index:-6; background:#000;
 }
 
 /*  Nav */
 #tqNav{
   position: fixed;
   top: 0; left: 0; right: 0;
-  z-index: 1000;
+  z-index: 999;
   padding: 12px 22px;
   background: var(--glass);
-  backdrop-filter: blur(12px);
+  backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255,255,255,.06);
 }
 
 #tqNav .nav-inner{
-  max-width: 840px;
+  max-width: 860px;
   margin: 0 auto;
   display:flex;
   align-items:center;
-  gap: 14px;
+  gap: 12px;
 }
 
 #tqNav .brand{
-  font-weight: 700;
+  font-weight: 600;
   font-size: 1.1rem;
-  letter-spacing: .2px;
+  letter-spacing: .22px;
 }
 
 #tqNav .nav-links{
   display:flex;
   gap:10px;
-  margin-left: 18px;
+  margin-left: 14px;
   flex-wrap: wrap;
 }
 
@@ -62,7 +62,7 @@ body, .gradio-container{
   border: 1px solid rgba(255,255,255,.12);
   border-radius: 999px;
   font-size: .9rem;
-  opacity: .86;
+  opacity: .76;
   transition: .15s ease;
   white-space: nowrap;
 }
@@ -75,8 +75,8 @@ body, .gradio-container{
 #tqNav .spacer{ flex:1; }
 
 #tqNav .menu-btn{
-  width: 40px;
-  height: 40px;
+  width: 25px;
+  height: 25px;
   display:flex;
   align-items:center;
   justify-content:center;
@@ -88,9 +88,9 @@ body, .gradio-container{
 
 #tqNav .menu-btn span{
   display:block;
-  width:18px;
-  height:2px;
-  background:#fff;
+  width:16px;
+  height:4px;
+  background:#000;
   position:relative;
 }
 
@@ -100,8 +100,8 @@ body, .gradio-container{
   position:absolute;
   left:0;
   width:16px;
-  height:2px;
-  background:#fff;
+  height:4px;
+  background:#000;
 }
 
 #tqNav .menu-btn span::before{ top:-6px; }
@@ -115,9 +115,9 @@ body, .gradio-container{
   padding: 10px;
   border-radius: 12px;
   background: var(--glass);
-  backdrop-filter: blur(14px);
+  backdrop-filter: blur(12px);
   border: 1px solid rgba(255,255,255,.10);
-  box-shadow: 0 0 30px rgba(0,0,0,.6);
+  box-shadow: 0 0 28px rgba(0,0,0,.6);
   display:none;
 }
 
@@ -129,12 +129,12 @@ body, .gradio-container{
   border-radius: 10px;
   text-decoration:none;
   color: var(--fg);
-  opacity: .9;
+  opacity: .85;
 }
 
 #tqNav .menu a:hover{
   background: rgba(255,255,255,.06);
-  opacity: 1;
+  opacity: 0.89;
 }
 
 #tqNav .menu .sep{
@@ -155,18 +155,18 @@ body, .gradio-container{
   margin: 10px 0 14px 0;
   padding: 14px 18px;
   background: var(--glass);
-  backdrop-filter: blur(12px);
+  backdrop-filter: blur(10px);
   border: 1px solid rgba(255,255,255,.06);
-  border-radius: 12px;
+  border-radius: 10x;
 }
 .tq-hero .brand{
-  font-weight:600; letter-spacing:.2px; font-size:1.1rem;
+  font-weight:600; letter-spacing:.22px; font-size:1.1rem;
 }
 .tq-hero .desc{
   margin-top:8px;
   color: var(--muted);
   font-size: .98rem;
-  line-height: 1.45;
+  line-height: 1.35;
 }
 
 /* Cards / panels */
@@ -195,7 +195,7 @@ body, .gradio-container{
   border-radius:999px !important;
   padding:8px 12px !important;
   color: var(--fg) !important;
-  opacity:.86 !important;
+  opacity:.76 !important;
   background: rgba(255,255,255,.00) !important;
   transition:.18s ease !important;
 }
@@ -205,15 +205,15 @@ body, .gradio-container{
 }
 .gradio-container .gr-tab-nav button.selected{
   opacity: 1 !important;
-  border-color: rgba(140,180,255,.55) !important;
-  box-shadow: 0 0 0 1px rgba(140,180,255,.14) inset !important;
+  border-color: rgba(255,255,255,.35) !important;
+  box-shadow: 0 0 0 1px rgba(200,200,200,.12) inset !important;
 }
 
 /* Inputs */
 .gradio-container input,
 .gradio-container textarea{
   background: rgba(255,255,255,.03) !important;
-  border:1px solid rgba(255,255,255,.14) !important;
+  border:1px solid rgba(255,255,255,.12) !important;
   color: var(--fg) !important;
   border-radius: 10px !important;
 }
@@ -237,7 +237,7 @@ body, .gradio-container{
 
 /* Gallery tweaks */
 .gradio-container .gallery{
-  border-radius: 12px !important;
+  border-radius: 9px !important;
 }
 
 /* Range accent */