Upload style.css with huggingface_hub

style.css

@@ -971,429 +971,149 @@ kbd {
 }
 
 /* -------------------------------------------------------------
-   Animation Tabs (Tabs 6, 7, 8)
+   Analytical Infotables & Matrix Views
 ------------------------------------------------------------- */
-.nav-tab.tab-anim {
-  border-color: rgba(56, 189, 248, 0.2);
-}
-
-.anim-workspace {
+.infotable-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-dim);
+  border-radius: 12px;
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  overflow: hidden;
 }
 
-.anim-toolbar {
+.infotable-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: var(--bg-card);
-  border: 1px solid var(--border-dim);
-  border-radius: 10px;
-  padding: 10px 16px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border-dim);
+  background: rgba(12, 18, 32, 0.6);
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 12px;
 }
 
-.anim-tool-left {
+.infotable-title-box {
   display: flex;
-  align-items: center;
-  gap: 14px;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.anim-badge-pulse {
-  background: rgba(56, 189, 248, 0.15);
-  color: var(--primary-cyan);
-  border: 1px solid var(--primary-cyan);
-  border-radius: 6px;
-  padding: 4px 10px;
-  font-size: 11px;
+.infotable-title-box h3 {
+  font-size: 15px;
   font-weight: 800;
-  letter-spacing: 0.5px;
-}
-
-.scenario-toggle {
-  display: flex;
-  gap: 6px;
-  background: var(--bg-darker);
-  border: 1px solid var(--border-dim);
-  border-radius: 6px;
-  padding: 2px;
+  color: var(--text-main);
 }
 
-.scen-btn {
-  background: transparent;
-  border: none;
+.infotable-desc {
+  font-size: 12px;
   color: var(--text-muted);
-  padding: 4px 10px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.scen-btn.active {
-  background: var(--border-bright);
-  color: #fff;
+  max-width: 900px;
+  line-height: 1.4;
 }
 
-.anim-controls {
+.table-search-box {
   display: flex;
   align-items: center;
-  gap: 8px;
-}
-
-.btn-anim-play {
-  background: #0284c7;
-  border: 1px solid var(--primary-cyan);
-  color: #fff;
-  padding: 6px 14px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 700;
-  cursor: pointer;
-  box-shadow: 0 0 10px var(--primary-glow);
-  transition: all 0.15s;
 }
 
-.btn-anim-play:hover {
-  background: #0369a1;
-}
-
-.btn-anim-play.playing {
-  background: var(--accent-red);
-  border-color: #fda4af;
+.table-scroll-lg {
+  max-height: 640px;
+  overflow-y: auto;
+  overflow-x: auto;
 }
 
-.btn-anim-sub {
-  background: var(--bg-darker);
-  border: 1px solid var(--border-dim);
-  color: var(--text-muted);
-  padding: 6px 12px;
-  border-radius: 6px;
+.infotable {
+  width: 100%;
+  border-collapse: collapse;
   font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.btn-anim-sub:hover {
-  color: var(--text-main);
-  background: var(--bg-card-hover);
-}
-
-.speed-toggle-group {
-  display: flex;
-  align-items: center;
-  gap: 4px;
+  text-align: left;
 }
 
-.btn-speed-mitosis, .btn-speed-clonal, .btn-speed-kineto {
-  background: var(--bg-darker);
-  border: 1px solid var(--border-dim);
-  color: var(--text-muted);
-  padding: 3px 8px;
-  border-radius: 4px;
+.infotable th {
+  background: #090e18;
+  color: var(--text-dim);
   font-size: 11px;
   font-weight: 700;
-  cursor: pointer;
-}
-
-.btn-speed-mitosis.active, .btn-speed-clonal.active, .btn-speed-kineto.active {
-  background: var(--border-bright);
-  color: var(--primary-cyan);
-  border-color: var(--primary-cyan);
-}
-
-/* Stage Layout */
-.anim-stage-layout {
-  display: grid;
-  grid-template-columns: 1fr 360px;
-  gap: 12px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border-bright);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  white-space: nowrap;
 }
 
-.anim-canvas-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border-dim);
-  border-radius: 12px;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
+.infotable td {
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(30, 45, 74, 0.4);
+  vertical-align: middle;
+  line-height: 1.4;
 }
 
-.stage-overlay-hud {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: var(--bg-darker);
-  border: 1px solid var(--border-dim);
-  border-radius: 8px;
-  padding: 6px 12px;
-  gap: 8px;
-  flex-wrap: wrap;
+.infotable tr:hover {
+  background: var(--bg-card-hover);
 }
 
-.hud-pill {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
+.infotable tr:nth-child(even) {
+  background: rgba(12, 18, 32, 0.4);
 }
 
-.hud-lbl {
-  color: var(--text-dim);
-  font-weight: 700;
+.infotable tr:nth-child(even):hover {
+  background: var(--bg-card-hover);
 }
 
-.hud-val {
-  color: var(--text-main);
+/* Badges for Infotables */
+.badge-tier1 {
+  background: rgba(244, 63, 94, 0.15);
+  color: var(--accent-red);
+  border: 1px solid var(--accent-red);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 10px;
   font-weight: 700;
+  white-space: nowrap;
 }
 
-.canvas-container {
-  position: relative;
-  background: #02040a;
-  border: 1px solid var(--border-bright);
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.anim-canvas {
-  width: 100%;
-  height: auto;
-  aspect-ratio: 940 / 520;
-  display: block;
-}
-
-.anim-timeline-bar {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  background: var(--bg-darker);
-  border: 1px solid var(--border-dim);
-  border-radius: 8px;
-  padding: 8px 12px;
-}
-
-.phase-markers {
-  position: relative;
-  height: 16px;
-}
-
-.pmark {
-  position: absolute;
+.badge-tier2 {
+  background: rgba(56, 189, 248, 0.15);
+  color: var(--primary-cyan);
+  border: 1px solid var(--primary-cyan);
+  border-radius: 4px;
+  padding: 2px 6px;
   font-size: 10px;
   font-weight: 700;
-  color: var(--text-dim);
   white-space: nowrap;
 }
 
-.anim-range {
-  -webkit-appearance: none;
-  width: 100%;
-  height: 6px;
-  background: #1a253c;
-  border-radius: 3px;
-  outline: none;
-  cursor: pointer;
-}
-
-.anim-range::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--primary-cyan);
-  box-shadow: 0 0 10px var(--primary-cyan);
-  cursor: pointer;
-}
-
-/* Telemetry Card */
-.anim-telemetry-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border-dim);
-  border-radius: 12px;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
-}
-
-.tele-body {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.tele-gauge-box {
-  background: var(--bg-darker);
+.badge-tier3 {
+  background: rgba(148, 163, 184, 0.15);
+  color: var(--text-muted);
   border: 1px solid var(--border-dim);
-  border-radius: 8px;
-  padding: 10px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.tele-lbl {
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--text-dim);
-}
-
-.tele-bar-bg {
-  background: #111a2e;
-  height: 8px;
   border-radius: 4px;
-  overflow: hidden;
+  padding: 2px 6px;
+  font-size: 10px;
+  white-space: nowrap;
 }
 
-.tele-bar-fill {
-  height: 100%;
-  background: var(--primary-cyan);
+.badge-patho {
+  background: rgba(251, 191, 36, 0.15);
+  color: var(--accent-gold);
+  border: 1px solid var(--accent-gold);
   border-radius: 4px;
-  transition: width 0.1s linear;
-}
-
-.tele-bar-fill.fill-gold { background: var(--accent-gold); }
-.tele-bar-fill.fill-red { background: var(--accent-red); }
-.tele-bar-fill.fill-green { background: var(--accent-green); }
-
-.tele-val-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: 11px;
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.tele-target {
-  color: var(--text-dim);
-}
-
-.highlight-aneuploid {
-  border-color: rgba(236, 72, 153, 0.3);
-  background: rgba(236, 72, 153, 0.05);
-}
-
-.karyotype-divergence {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-  margin-top: 4px;
-}
-
-.daughter-cell-box {
-  background: var(--bg-card);
-  border: 1px solid var(--border-dim);
-  border-radius: 6px;
-  padding: 6px 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.d-title {
-  font-size: 9px;
+  padding: 2px 6px;
+  font-size: 10px;
   font-weight: 700;
-  color: var(--text-dim);
-  text-transform: uppercase;
-}
-
-.mechanism-callout {
-  background: rgba(56, 189, 248, 0.08);
-  border: 1px solid rgba(56, 189, 248, 0.25);
-  border-radius: 8px;
-  padding: 10px 12px;
-  font-size: 11px;
-  line-height: 1.45;
-  color: #e0f2fe;
-}
-
-/* Clonal Elements */
-.clonal-pie-box {
-  background: var(--bg-darker);
-  border: 1px solid var(--border-dim);
-  border-radius: 8px;
-  padding: 10px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
 }
 
-.clone-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 11px;
-}
-
-.clone-row strong {
-  margin-left: auto;
-}
-
-.clone-color-box {
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
-}
-
-.bg-euploid { background: #38bdf8; }
-.bg-trisomy { background: #f43f5e; }
-.bg-monosomy { background: #fbbf24; }
-.bg-complex { background: #a855f7; }
-
-.subhead-sm {
-  font-size: 11px;
-  font-weight: 800;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  margin-top: 4px;
-}
-
-.tissue-trapping-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.tissue-card {
-  background: var(--bg-darker);
-  border: 1px solid var(--border-dim);
-  border-radius: 6px;
-  padding: 6px 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.t-name {
-  font-size: 11px;
+.badge-mva-match {
+  background: rgba(16, 185, 129, 0.15);
+  color: var(--accent-green);
+  border: 1px solid var(--accent-green);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 10px;
   font-weight: 700;
-  color: var(--text-main);
 }
 
-.t-bar-bg {
-  background: #111a2e;
-  height: 6px;
-  border-radius: 3px;
-  overflow: hidden;
-}
-
-.t-bar-fill {
-  height: 100%;
-  background: var(--accent-pink);
-  border-radius: 3px;
-  transition: width 0.1s linear;
-}
-
-.t-val {
-  font-size: 10px;
-  font-family: var(--font-mono);
-  color: var(--text-dim);
-}