Update style.css

style.css

@@ -1,10 +1,10 @@
-/* ===== TwoQuarks skin for Gradio (ported from index.html) ===== */
+/* ===== TwoQuarks skin for Gradio ===== */
 *{margin:0;padding:0;box-sizing:border-box}
 
 :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,.38);
+  --stroke:rgba(255,255,255,.10); --glass:rgba(0,0,0,.28);
   --accent:#8cb4ff;
 }
 
@@ -16,32 +16,30 @@ body, .gradio-container{
   overflow-x:hidden;
 }
 
-/* Starfield canvas like your site */
+/* Starfield canvas */
 #quantumField{
   position:fixed; inset:0;
   width:100vw; height:100vh;
-  z-index:0;
-  background:#000;
-  pointer-events:none;
+  z-index:-10; background:#000;
 }
 
-/* Fixed Nav (TwoQuarks style) */
+/*  Nav */
 #tqNav{
   position: fixed;
   top: 0; left: 0; right: 0;
   z-index: 1000;
-  padding: 14px 24px;
+  padding: 12px 22px;
   background: var(--glass);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(255,255,255,.06);
 }
 
 #tqNav .nav-inner{
-  max-width: 1200px;
+  max-width: 840px;
   margin: 0 auto;
   display:flex;
   align-items:center;
-  gap: 16px;
+  gap: 14px;
 }
 
 #tqNav .brand{
@@ -83,7 +81,7 @@ body, .gradio-container{
   align-items:center;
   justify-content:center;
   border: 1px solid rgba(255,255,255,.18);
-  border-radius: 12px;
+  border-radius: 10px;
   cursor: pointer;
   background: rgba(255,255,255,.02);
 }
@@ -101,7 +99,7 @@ body, .gradio-container{
   content:"";
   position:absolute;
   left:0;
-  width:18px;
+  width:16px;
   height:2px;
   background:#fff;
 }
@@ -115,7 +113,7 @@ body, .gradio-container{
   right: 24px;
   min-width: 220px;
   padding: 10px;
-  border-radius: 14px;
+  border-radius: 12px;
   background: var(--glass);
   backdrop-filter: blur(14px);
   border: 1px solid rgba(255,255,255,.10);
@@ -159,16 +157,16 @@ body, .gradio-container{
   background: var(--glass);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255,255,255,.06);
-  border-radius: 14px;
+  border-radius: 12px;
 }
 .tq-hero .brand{
-  font-weight:700; letter-spacing:.2px; font-size:1.1rem;
+  font-weight:600; letter-spacing:.2px; font-size:1.1rem;
 }
 .tq-hero .desc{
   margin-top:8px;
   color: var(--muted);
   font-size: .98rem;
-  line-height: 1.55;
+  line-height: 1.45;
 }
 
 /* Cards / panels */
@@ -178,7 +176,7 @@ body, .gradio-container{
   border:1px solid var(--stroke) !important;
   background: var(--card) !important;
   backdrop-filter: blur(8px) !important;
-  border-radius: 12px !important;
+  border-radius: 10px !important;
 }
 
 /* Hover effect on panels that look like cards */
@@ -208,7 +206,7 @@ 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,.20) inset !important;
+  box-shadow: 0 0 0 1px rgba(140,180,255,.14) inset !important;
 }
 
 /* Inputs */
@@ -217,18 +215,18 @@ body, .gradio-container{
   background: rgba(255,255,255,.03) !important;
   border:1px solid rgba(255,255,255,.14) !important;
   color: var(--fg) !important;
-  border-radius: 12px !important;
+  border-radius: 10px !important;
 }
 
-/* Buttons like your .btn */
+/* Buttons */
 .gradio-container button,
 .gradio-container .gr-button{
   color: var(--fg) !important;
-  border:1px solid rgba(255,255,255,.14) !important;
-  background: rgba(255,255,255,.03) !important;
+  border:1px solid rgba(255,255,255,.11) !important;
+  background: rgba(255,255,255,.06) !important;
   border-radius:999px !important;
-  padding:10px 14px !important;
-  opacity:.92 !important;
+  padding:10px 12px !important;
+  opacity:.72 !important;
   transition:.15s ease !important;
 }
 .gradio-container button:hover,
@@ -239,7 +237,7 @@ body, .gradio-container{
 
 /* Gallery tweaks */
 .gradio-container .gallery{
-  border-radius: 14px !important;
+  border-radius: 12px !important;
 }
 
 /* Range accent */