Upload style.css

style.css

@@ -0,0 +1,249 @@
+/* ===== TwoQuarks skin for Gradio (ported from index.html) ===== */
+*{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);
+  --accent:#8cb4ff;
+}
+
+html,body{height:100%}
+body, .gradio-container{
+  font-family: Inter, ui-sans-serif, system-ui, Arial;
+  background:var(--bg) !important;
+  color:var(--fg) !important;
+  overflow-x:hidden;
+}
+
+/* Starfield canvas like your site */
+#quantumField{
+  position:fixed; inset:0;
+  width:100vw; height:100vh;
+  z-index:0;
+  background:#000;
+  pointer-events:none;
+}
+
+/* Fixed Nav (TwoQuarks style) */
+#tqNav{
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  z-index: 1000;
+  padding: 14px 24px;
+  background: var(--glass);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(255,255,255,.06);
+}
+
+#tqNav .nav-inner{
+  max-width: 1200px;
+  margin: 0 auto;
+  display:flex;
+  align-items:center;
+  gap: 16px;
+}
+
+#tqNav .brand{
+  font-weight: 700;
+  font-size: 1.1rem;
+  letter-spacing: .2px;
+}
+
+#tqNav .nav-links{
+  display:flex;
+  gap:10px;
+  margin-left: 18px;
+  flex-wrap: wrap;
+}
+
+#tqNav .nav-links a{
+  text-decoration:none;
+  color: var(--fg);
+  padding: 8px 12px;
+  border: 1px solid rgba(255,255,255,.12);
+  border-radius: 999px;
+  font-size: .9rem;
+  opacity: .86;
+  transition: .15s ease;
+  white-space: nowrap;
+}
+
+#tqNav .nav-links a:hover{
+  opacity: 1;
+  background: rgba(255,255,255,.06);
+}
+
+#tqNav .spacer{ flex:1; }
+
+#tqNav .menu-btn{
+  width: 40px;
+  height: 40px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  border: 1px solid rgba(255,255,255,.18);
+  border-radius: 12px;
+  cursor: pointer;
+  background: rgba(255,255,255,.02);
+}
+
+#tqNav .menu-btn span{
+  display:block;
+  width:18px;
+  height:2px;
+  background:#fff;
+  position:relative;
+}
+
+#tqNav .menu-btn span::before,
+#tqNav .menu-btn span::after{
+  content:"";
+  position:absolute;
+  left:0;
+  width:18px;
+  height:2px;
+  background:#fff;
+}
+
+#tqNav .menu-btn span::before{ top:-6px; }
+#tqNav .menu-btn span::after{ top: 6px; }
+
+#tqNav .menu{
+  position:absolute;
+  top: 60px;
+  right: 24px;
+  min-width: 220px;
+  padding: 10px;
+  border-radius: 14px;
+  background: var(--glass);
+  backdrop-filter: blur(14px);
+  border: 1px solid rgba(255,255,255,.10);
+  box-shadow: 0 0 30px rgba(0,0,0,.6);
+  display:none;
+}
+
+#tqNav .menu.open{ display:block; }
+
+#tqNav .menu a{
+  display:block;
+  padding: 10px 10px;
+  border-radius: 10px;
+  text-decoration:none;
+  color: var(--fg);
+  opacity: .9;
+}
+
+#tqNav .menu a:hover{
+  background: rgba(255,255,255,.06);
+  opacity: 1;
+}
+
+#tqNav .menu .sep{
+  height:1px;
+  background: rgba(255,255,255,.10);
+  margin: 8px 2px;
+}
+
+/* Make app sit above canvas and below fixed nav */
+#tqApp{
+  position:relative;
+  z-index:1;
+  padding-top: 84px;
+}
+
+/* Hero / header panel (glass) */
+.tq-hero{
+  margin: 10px 0 14px 0;
+  padding: 14px 18px;
+  background: var(--glass);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255,255,255,.06);
+  border-radius: 14px;
+}
+.tq-hero .brand{
+  font-weight:700; letter-spacing:.2px; font-size:1.1rem;
+}
+.tq-hero .desc{
+  margin-top:8px;
+  color: var(--muted);
+  font-size: .98rem;
+  line-height: 1.55;
+}
+
+/* Cards / panels */
+.gradio-container .gr-panel,
+.gradio-container .block,
+.gradio-container .wrap{
+  border:1px solid var(--stroke) !important;
+  background: var(--card) !important;
+  backdrop-filter: blur(8px) !important;
+  border-radius: 12px !important;
+}
+
+/* Hover effect on panels that look like cards */
+.gradio-container .gr-panel:hover{
+  background: var(--card2) !important;
+}
+
+/* Tabs (match pill vibe) */
+.gradio-container .gr-tab-nav{
+  background: transparent !important;
+  border: none !important;
+  gap: 10px !important;
+}
+.gradio-container .gr-tab-nav button{
+  border:1px solid rgba(255,255,255,.12) !important;
+  border-radius:999px !important;
+  padding:8px 12px !important;
+  color: var(--fg) !important;
+  opacity:.86 !important;
+  background: rgba(255,255,255,.00) !important;
+  transition:.18s ease !important;
+}
+.gradio-container .gr-tab-nav button:hover{
+  opacity:1 !important;
+  background: rgba(255,255,255,.06) !important;
+}
+.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;
+}
+
+/* Inputs */
+.gradio-container input,
+.gradio-container textarea{
+  background: rgba(255,255,255,.03) !important;
+  border:1px solid rgba(255,255,255,.14) !important;
+  color: var(--fg) !important;
+  border-radius: 12px !important;
+}
+
+/* Buttons like your .btn */
+.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-radius:999px !important;
+  padding:10px 14px !important;
+  opacity:.92 !important;
+  transition:.15s ease !important;
+}
+.gradio-container button:hover,
+.gradio-container .gr-button:hover{
+  opacity:1 !important;
+  background: rgba(255,255,255,.07) !important;
+}
+
+/* Gallery tweaks */
+.gradio-container .gallery{
+  border-radius: 14px !important;
+}
+
+/* Range accent */
+input[type="range"]{ accent-color: var(--accent); }
+
+/* Optional: hide Gradio footer */
+footer{ display:none !important; }