Unified font and UI size

static/styles.css

@@ -12,13 +12,34 @@
   --highlight: #FFFBEB;
   --model-a-color: #92B4F4;
   --model-b-color: #F8ADA7;
+  --reference-color: #10B981; /* Green-500 */
+  --reference-light: #F0FDF4; /* Green-50 */
+  --reference-text: #065F46; /* Green-800 */
   --query-background: #F0F7FF;
   --query-border: #D1E3F8;
   --query-text: #2E5AAC;
   --insufficient-alert-bg: #fff0f0;
   --insufficient-alert-border: #f78989;
   --insufficient-alert-text: #b92020;
-  --text-md: 17px; /* Adjusted from 17px to make everything slightly smaller */
+  
+  /* Unified Typography Scale - Smaller */
+  --text-xs: 0.75rem;     /* 12px - Small text, captions */
+  --text-sm: 0.875rem;    /* 14px - Base body text */
+  --text-md: 1rem;        /* 16px - Emphasized body text */
+  --text-lg: 1.125rem;    /* 18px - Large text, small headings */
+  --text-xl: 1.375rem;    /* 22px - Main headings */
+  
+  /* Consistent Line Heights */
+  --leading-tight: 1.3;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.6;
+  
+  /* Consistent Spacing - Proportionally Smaller */
+  --space-xs: 0.25rem;    /* 4px */
+  --space-sm: 0.5rem;     /* 8px */
+  --space-md: 0.625rem;   /* 10px */
+  --space-lg: 0.875rem;   /* 14px */
+  --space-xl: 1.25rem;    /* 20px */
 }
 
 /* Dark Mode */
@@ -36,6 +57,9 @@
     --highlight: #3D3825;
     --model-a-color: #5A85C7;
     --model-b-color: #C47A74;
+    --reference-color: #10B981; /* Keep green in dark mode */
+    --reference-light: #1F2937; /* Dark gray for dark mode */
+    --reference-text: #34D399; /* Light green for dark mode text */
     --query-background: #2A3F5C;
     --query-border: #3A5277;
     --query-text: #A9C2E8;
@@ -48,7 +72,7 @@
 /* Global Styles */
 body, .gradio-container {
   background-color: var(--background-main);
-  font-size: 16px; /* Adjusted base font size */
+  font-size: var(--text-sm); /* Now 14px base */
   overflow-x: hidden !important;
   color: var(--text-dark);
 }
@@ -66,21 +90,21 @@ body, .gradio-container {
   padding-bottom: 0 !important;
 }
 
-/* Increase markdown text size */
+/* Unified Typography */
 .gradio-markdown p, 
 .gradio-markdown li,
 .gradio-markdown ul,
 .gradio-markdown ol {
-  font-size: var(--text-md) !important; /* Use the variable for markdown text */
-  line-height: 1.5 !important;
-  margin-bottom: 0.5em !important;
+  font-size: var(--text-sm) !important;
+  line-height: var(--leading-normal) !important;
+  margin-bottom: var(--space-sm) !important;
 }
 
 /* Special styles for intro instruction text */
 .gradio-markdown p:has(em):has(strong) {
-  font-size: 1.3em !important; /* Slightly reduced from 1.4em */
-  line-height: 1.5 !important;
-  margin-bottom: 8px !important;
+  font-size: var(--text-md) !important;
+  line-height: var(--leading-normal) !important;
+  margin-bottom: var(--space-sm) !important;
 }
 
 .gradio-row {
@@ -94,16 +118,16 @@ body, .gradio-container {
 
 .tab-nav {
   background-color: var(--background-light) !important;
-  padding: 5px 10px !important;
+  padding: var(--space-sm) var(--space-md) !important;
   border-radius: 8px 8px 0 0 !important;
   border-bottom: 1px solid var(--border-light) !important;
 }
 
 .tab-nav button {
-  font-size: 1.15em !important; /* Reduced from 1.2em */
+  font-size: var(--text-md) !important;
   font-weight: 600 !important;
-  padding: 10px 25px !important;
-  margin: 0 6px !important;
+  padding: var(--space-md) var(--space-xl) !important;
+  margin: 0 var(--space-sm) !important;
   border-radius: 6px 6px 0 0 !important;
   border: none !important;
   background-color: transparent !important;
@@ -126,21 +150,24 @@ body, .gradio-container {
   border: none !important;
 }
 
-/* Common Typography */
+/* Unified Headings */
 h1 {
-  font-size: 1.7em !important; /* Reduced from 1.8em */
+  font-size: var(--text-xl) !important;
   color: var(--primary) !important;
-  margin: 10px 0 5px 0 !important;
+  margin: var(--space-md) 0 var(--space-sm) 0 !important;
   padding: 0 !important;
+  line-height: var(--leading-tight) !important;
+  font-weight: 700 !important;
 }
 
 h3, 
 .section-heading {
-  font-size: 1.25em !important; /* Reduced from 1.3em */
+  font-size: var(--text-lg) !important;
   font-weight: 600 !important;
-  margin: 5px 0 2px 0 !important;
+  margin: var(--space-sm) 0 var(--space-xs) 0 !important;
   padding: 0 !important;
   color: var(--text-dark) !important;
+  line-height: var(--leading-tight) !important;
 }
 
 .orange-title {
@@ -150,14 +177,14 @@ h3,
 
 /* Common Dividers */
 hr {
-  margin: 5px 0 !important;
+  margin: var(--space-sm) 0 !important;
   border: none !important;
   height: 1px !important;
   background-color: var(--border-light) !important;
 }
 
 .results-reveal-area hr {
-  margin: 25px 0 20px 0 !important;
+  margin: var(--space-xl) 0 var(--space-lg) 0 !important;
   width: 100% !important;
 }
 
@@ -167,14 +194,14 @@ hr {
   display: flex !important;
   align-items: center !important;
   overflow: visible !important;
-  min-height: 45px !important; /* Reduced from 48px */
+  min-height: 40px !important;
   white-space: normal !important;
 }
 
 #query-title-row h3 {
   margin: 0 !important;
   padding: 0 !important;
-  line-height: 1.3 !important;
+  line-height: var(--leading-tight) !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
   white-space: normal !important;
@@ -186,13 +213,13 @@ hr {
 #query-container {
   display: flex !important;
   align-items: stretch !important;
-  gap: 10px !important; /* Reduced from 12px */
+  gap: var(--space-md) !important;
   overflow: visible !important;
 }
 
 .query-box-row {
   background-color: var(--query-background) !important;
-  padding: 12px 16px !important; /* Reduced from 14px 18px */
+  padding: var(--space-md) var(--space-lg) !important;
   border-radius: 6px !important;
   border: 1px solid var(--query-border) !important;
   margin: 0 !important;
@@ -201,7 +228,7 @@ hr {
   max-width: 70% !important;
   overflow: visible !important;
   display: flex !important;
-  min-height: 55px !important; /* Reduced from 60px */
+  min-height: 48px !important;
   height: auto !important;
 }
 
@@ -213,18 +240,18 @@ hr {
   overflow: visible !important;
   width: 100% !important;
   display: block !important;
-  text-align: left !important; /* Default left alignment for regular questions */
+  text-align: left !important;
 }
 
 .empty-query {
-  text-align: center !important; /* Center alignment only for the initial question */
+  text-align: center !important;
 }
 
 .query-text p {
-  font-size: 1.25em !important; /* Reduced from 1.3em */
+  font-size: var(--text-lg) !important;
   font-weight: 600 !important;
   color: var(--query-text) !important;
-  line-height: 1.4 !important;
+  line-height: var(--leading-normal) !important;
   margin: 0 !important;
   padding: 0 !important;
   background-color: transparent !important;
@@ -237,37 +264,40 @@ hr {
   overflow: visible !important;
 }
 
-/* Buttons */
+/* Unified Button Styles */
 .query-button, 
-.context-toggle-button {
+.context-toggle-button,
+.reference-toggle-button {
   background-color: var(--background-light) !important;
   color: var(--text-medium) !important;
   border: 1px solid var(--border-light) !important;
   border-radius: 6px !important;
   font-weight: 500 !important;
   transition: all 0.2s ease !important;
-  font-size: 1.05em !important; /* Reduced from 1.1em */
+  font-size: var(--text-sm) !important;
+  line-height: var(--leading-tight) !important;
 }
 
 .query-button {
-  padding: 0 20px !important; /* Reduced from 0 24px */
+  padding: 0 var(--space-lg) !important;
   flex: 0 0 auto !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  min-height: 55px !important; /* Reduced from 60px */
+  min-height: 48px !important;
   white-space: nowrap !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
 }
 
-.context-toggle-button {
-  padding: 5px 10px !important; /* Reduced from 6px 12px */
-  font-size: 0.95em !important; /* Reduced from 1.0em */
-  height: 32px !important; /* Reduced from 36px */
+.context-toggle-button,
+.reference-toggle-button {
+  padding: var(--space-sm) var(--space-md) !important;
+  font-size: var(--text-xs) !important;
+  height: 28px !important;
   line-height: 1 !important;
   width: auto !important;
   min-width: 0 !important;
-  max-width: 160px !important; /* Reduced from 180px */
+  max-width: 140px !important;
   margin: 0 !important;
   cursor: pointer !important;
 }
@@ -279,28 +309,43 @@ hr {
   border-color: var(--primary) !important;
 }
 
+/* Reference Toggle Button - specific styling */
+.reference-toggle-button:hover {
+  background-color: var(--reference-light) !important;
+  color: var(--reference-color) !important;
+  border-color: var(--reference-color) !important;
+}
+
+.reference-toggle-button.showing-reference {
+  background-color: var(--reference-light) !important;
+  color: var(--reference-color) !important;
+  border-color: var(--reference-color) !important;
+  font-weight: 600 !important;
+}
+
 /* Action Buttons */
 #submit-button,
 #try-another-btn {
   background-color: var(--primary) !important;
   color: white !important;
-  padding: 12px 30px !important; /* Reduced from 14px 36px */
+  padding: var(--space-md) var(--space-xl) !important;
   border-radius: 6px !important;
   font-weight: 600 !important;
-  font-size: 1.2em !important; /* Reduced from 1.25em */
+  font-size: var(--text-md) !important;
+  line-height: var(--leading-tight) !important;
   transition: all 0.2s ease !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
   border: none !important;
 }
 
 #submit-button {
-  margin-top: 15px !important; /* Reduced from 18px */
+  margin-top: var(--space-lg) !important;
 }
 
 #try-another-btn {
   width: 100% !important;
   max-width: 100% !important;
-  margin: 10px auto !important; /* Reduced from 12px */
+  margin: var(--space-md) auto !important;
   display: block !important;
 }
 
@@ -311,10 +356,10 @@ hr {
 }
 
 .control-buttons button {
-  margin: 0 10px !important; /* Reduced from 0 12px */
-  font-size: 1.05em !important; /* Reduced from 1.1em */
+  margin: 0 var(--space-md) !important;
+  font-size: var(--text-sm) !important;
   border-radius: 6px !important;
-  padding: 8px 16px !important; /* Reduced from 10px 19px */
+  padding: var(--space-sm) var(--space-lg) !important;
   transition: all 0.2s ease !important;
 }
 
@@ -323,7 +368,8 @@ hr {
   background-color: transparent !important;
   font-style: normal !important;
   color: var(--text-medium) !important;
-  font-size: 1.05em !important; /* Reduced from 1.1em */
+  font-size: var(--text-sm) !important;
+  line-height: var(--leading-normal) !important;
 }
 
 .context-topic {
@@ -338,21 +384,27 @@ hr {
 .topic-label {
   font-weight: 600 !important;
   color: var(--text-medium) !important;
-  margin-right: 6px !important; /* Reduced from 7px */
+  margin-right: var(--space-sm) !important;
 }
 
-#context-header-row {
+#context-header-row,
+#model-comparison-header {
   display: flex !important;
   justify-content: space-between !important;
   align-items: center !important;
 }
 
+#model-comparison-header {
+  margin-bottom: var(--space-lg) !important;
+}
+
 .context-title {
   margin: 0 !important;
   padding: 0 !important;
-  font-size: 1.25em !important; /* Reduced from 1.3em */
+  font-size: var(--text-lg) !important;
   font-weight: 600 !important;
   color: var(--text-dark) !important;
+  line-height: var(--leading-tight) !important;
 }
 
 .context-items-container {
@@ -363,11 +415,11 @@ hr {
 .context-item {
   border: 1px solid var(--border-light);
   background-color: var(--background-light);
-  padding: 12px; /* Reduced from 14px */
+  padding: var(--space-md);
   border-radius: 6px;
-  margin-bottom: 8px; /* Reduced from 10px */
-  font-size: 1.05em; /* Reduced from 1.1em */
-  line-height: 1.5;
+  margin-bottom: var(--space-sm);
+  font-size: var(--text-md);
+  line-height: var(--leading-normal);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 }
 
@@ -378,9 +430,10 @@ hr {
 .chunk-header {
   font-weight: 600;
   color: var(--query-text);
-  margin-bottom: 8px; /* Reduced from 10px */
-  padding-bottom: 5px; /* Reduced from 6px */
+  margin-bottom: var(--space-sm);
+  padding-bottom: var(--space-sm);
   border-bottom: 1px solid var(--query-border);
+  font-size: var(--text-sm);
 }
 
 .highlight {
@@ -396,29 +449,31 @@ hr {
   border: 2px solid var(--insufficient-alert-border);
   background-color: var(--insufficient-alert-bg);
   color: var(--insufficient-alert-text);
-  padding: 12px; /* Reduced from 14px */
+  padding: var(--space-md);
   border-radius: 6px;
-  margin-bottom: 12px; /* Reduced from 14px */
-  font-size: 1.05em; /* Reduced from 1.1em */
+  margin-bottom: var(--space-md);
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
 }
 
 .insufficient-alert strong {
   display: inline-flex !important;
   align-items: center !important;
-  margin-bottom: 5px; /* Reduced from 6px */
-  font-size: 1.15em !important; /* Reduced from 1.2em */
+  margin-bottom: var(--space-sm) !important;
+  font-size: var(--text-md) !important;
   font-weight: 600 !important;
 }
 
 .insufficient-alert strong svg {
-  margin-right: 8px !important; /* Reduced from 10px */
-  width: 1.1em !important; /* Reduced from 1.2em */
-  height: 1.1em !important; /* Reduced from 1.2em */
+  margin-right: var(--space-sm) !important;
+  width: 1.1em !important;
+  height: 1.1em !important;
 }
 
 .insufficient-alert p {
   margin: 0;
-  font-size: 1.05em; /* Reduced from 1.1em */
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
 }
 
 /* Summary Cards */
@@ -428,7 +483,7 @@ hr {
 }
 
 #summary-containers {
-  margin-top: 10px !important; /* Reduced from 12px */
+  margin-top: var(--space-md) !important;
 }
 
 #main-interface-area > div:nth-child(7) > div {
@@ -444,10 +499,10 @@ hr {
 }
 
 #main-interface-area > p:first-of-type {
-  font-size: var(--text-md) !important;
-  margin: 0 0 8px 0 !important; /* Reduced from 0 0 10px 0 */
+  font-size: var(--text-sm) !important;
+  margin: 0 0 var(--space-sm) 0 !important;
   padding: 0 !important;
-  line-height: 1.4 !important;
+  line-height: var(--leading-normal) !important;
   color: var(--text-medium) !important;
 }
 
@@ -457,11 +512,11 @@ hr {
   background-color: var(--background-light) !important;
   box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
   margin: 0 !important;
-  padding: 12px !important; /* Reduced from 14px */
+  padding: var(--space-md) !important;
   display: flex !important;
   flex-direction: column !important;
   height: auto !important;
-  min-height: 200px !important; /* Reduced from 220px */
+  min-height: 180px !important;
   overflow: visible !important;
 }
 
@@ -473,6 +528,24 @@ hr {
   border-left: 3px solid var(--model-b-color) !important;
 }
 
+/* Reference Answer Card */
+.reference-card {
+  border-left: 3px solid var(--reference-color) !important;
+  background-color: var(--reference-light) !important;
+  margin-top: var(--space-lg) !important;
+}
+
+.reference-card .gr-input-label {
+  color: var(--reference-text) !important;
+  font-weight: 600 !important;
+}
+
+/* Reference Section */
+#reference-section {
+  margin-top: var(--space-lg) !important;
+  transition: all 0.3s ease !important;
+}
+
 .summary-card .gr-form,
 .summary-card .gr-form > div {
   margin: 0 !important;
@@ -484,18 +557,19 @@ hr {
 
 .summary-card .gr-input-label,
 .feedback-section .gr-input-label {
-  font-size: 1.15em !important; /* Reduced from 1.2em */
+  font-size: var(--text-md) !important;
   font-weight: 600 !important;
   color: var(--text-dark) !important;
+  line-height: var(--leading-tight) !important;
 }
 
 .summary-card .gr-input-label {
-  margin: 0 0 5px 0 !important; /* Reduced from 0 0 6px 0 */
+  margin: 0 0 var(--space-sm) 0 !important;
   padding: 0 !important;
 }
 
 .feedback-section .gr-input-label {
-  margin-bottom: 0.6em !important; /* Reduced from 0.72em */
+  margin-bottom: var(--space-md) !important;
 }
 
 .summary-card .gr-textbox {
@@ -510,10 +584,10 @@ hr {
   background-color: transparent !important;
   border: none !important;
   color: var(--text-dark) !important;
-  font-size: 1.15em !important; /* Reduced from 1.2em */
-  line-height: 1.4 !important;
+  font-size: var(--text-md) !important;
+  line-height: var(--leading-normal) !important;
   height: auto !important;
-  min-height: 160px !important; /* Reduced from 180px */
+  min-height: 140px !important;
   padding: 0 !important;
   margin: 0 !important;
   width: 100% !important;
@@ -521,19 +595,20 @@ hr {
   overflow-y: visible !important;
 }
 
-/* Voting Section */
+/* Unified Voting Section */
 .vote-button {
   flex-grow: 1;
-  margin: 0 5px 5px 5px !important; /* Reduced from 0 6px 6px 6px */
-  font-size: 1.1em !important; /* Reduced from 1.15em */
-  padding: 12px 16px !important; /* Reduced from 14px 18px */
+  margin: 0 var(--space-sm) var(--space-sm) var(--space-sm) !important;
+  font-size: var(--text-sm) !important;
+  padding: var(--space-md) var(--space-lg) !important;
   border-radius: 6px !important;
   transition: all 0.2s ease !important;
   background-color: var(--background-light) !important;
   border: 1px solid var(--border-light) !important;
-  min-height: 55px !important; /* Reduced from 60px */
+  min-height: 48px !important;
   font-weight: 500 !important;
   color: var(--text-dark) !important;
+  line-height: var(--leading-tight) !important;
 }
 
 .vote-button:hover:not(.vote-button-neither) {
@@ -570,27 +645,28 @@ hr {
 
 /* Feedback Section */
 .feedback-section {
-  padding: 3px 0 !important; /* Reduced from 4px 0 */
+  padding: var(--space-xs) 0 !important;
   background-color: transparent !important;
-  margin: 3px 0 !important; /* Reduced from 4px 0 */
-  font-size: 1.05em; /* Reduced from 1.1em */
+  margin: var(--space-xs) 0 !important;
+  font-size: var(--text-sm);
   border: none !important;
   box-shadow: none !important;
 }
 
 .feedback-section .gr-check-radio {
-  font-size: 1.1em !important; /* Reduced from 1.15em */
+  font-size: var(--text-sm) !important;
 }
 
 .feedback-section .gr-check-radio span { 
-  font-size: 1.1em !important; /* Reduced from 1.15em */
+  font-size: var(--text-sm) !important;
   color: var(--text-dark) !important;
+  line-height: var(--leading-normal) !important;
 }
 
 .feedback-section input[type="checkbox"] {
-  width: 18px !important; /* Reduced from 20px */
-  height: 18px !important; /* Reduced from 20px */
-  margin-right: 6px !important; /* Reduced from 7px */
+  width: 16px !important;
+  height: 16px !important;
+  margin-right: var(--space-sm) !important;
 }
 
 .feedback-section input[type="checkbox"]:checked {
@@ -601,22 +677,24 @@ hr {
 
 /* Model Reveal */
 .model-reveal {
-  font-size: 1.15em !important; /* Reduced from 1.2em */
+  font-size: var(--text-md) !important;
   text-align: center !important;
   font-weight: 600 !important;
   background-color: transparent !important;
   padding: 0 !important;
   border: none !important;
+  line-height: var(--leading-tight) !important;
 }
 
 .model-reveal span {
-  font-size: 1.3em !important; /* Reduced from 1.4em */
+  font-size: var(--text-lg) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 100% !important;
-  padding: 25px 16px !important; /* Reduced from 30px 18px */
-  min-height: 55px !important; /* Reduced from 60px */
+  padding: var(--space-xl) var(--space-lg) !important;
+  min-height: 48px !important;
+  line-height: var(--leading-tight) !important;
 }
 
 .model-a-reveal span {
@@ -629,7 +707,7 @@ hr {
 
 /* DataFrames and Tables */
 .gr-dataframe table {
-  font-size: 1.05em !important; 
+  font-size: var(--text-sm) !important; 
   border-collapse: separate !important;
   border-spacing: 0 !important;
   overflow: hidden !important;
@@ -637,9 +715,11 @@ hr {
 
 .gr-dataframe th, 
 .gr-dataframe td {
-  padding: 8px 10px !important; 
+  padding: var(--space-sm) var(--space-md) !important; 
   border: none !important;
   border-bottom: 1px solid var(--border-light) !important;
+  font-size: var(--text-sm) !important;
+  line-height: var(--leading-normal) !important;
 }
 
 .gr-dataframe th {
@@ -649,7 +729,7 @@ hr {
 }
 
 .gradio-container .prose {
-  line-height: 1.4 !important;
+  line-height: var(--leading-normal) !important;
   margin: 0 !important;
   padding: 0 !important;
 }
@@ -661,7 +741,7 @@ hr {
   border-spacing: 0 !important;
   border: none !important;
   width: 100% !important;
-  margin: 16px 0 !important; /* Reduced from 19px 0 */
+  margin: var(--space-lg) 0 !important;
   overflow: hidden !important;
 }
 
@@ -675,6 +755,7 @@ hr {
   display: inline-flex !important;
   align-items: center !important;
   font-weight: 500 !important;
+  font-size: var(--text-md) !important;
 }
 
 .model-link:hover {
@@ -684,7 +765,7 @@ hr {
 
 .external-icon {
   display: inline-block !important;
-  margin-left: 5px !important; /* Reduced from 6px */
+  margin-left: var(--space-sm) !important;
   opacity: 0.6 !important;
   transition: opacity 0.2s !important;
 }
@@ -693,9 +774,37 @@ hr {
   opacity: 1 !important;
 }
 
+.form-link {
+  color: var(--text-dark) !important;
+  text-decoration: none !important;
+  border-bottom: 1px dotted var(--border-light) !important;
+  transition: color 0.2s, border-color 0.2s !important;
+  padding: 2px 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  font-weight: 500 !important;
+}
+
+.form-link:hover {
+  color: #FF5500 !important;
+  border-color: #FF5500 !important;
+}
+
+.form-link::after {
+  content: " ↗";
+  display: inline-block !important;
+  margin-left: 5px !important;
+  opacity: 0.6 !important;
+  transition: opacity 0.2s !important;
+}
+
+.form-link:hover::after {
+  opacity: 1 !important;
+}
+
 /* Special styling for the Elo ratings info box */
 #leaderboard-info {
-  margin: 16px 0 !important; /* Reduced from 18px 0 */
+  margin: var(--space-lg) 0 !important;
   padding: 0 !important;
   background-color: rgba(255, 236, 224, 0.5) !important;
   border: none !important;
@@ -703,42 +812,43 @@ hr {
 
 #leaderboard-info > div {
   margin: 0 !important;
-  padding: 12px 16px !important; /* REDUCED from 18px - less padding top/bottom for grey box */
+  padding: var(--space-md) var(--space-lg) !important;
   background-color: var(--background-light) !important;
   border: none !important;
 }
 
 #leaderboard-info h3 {
   margin-top: 0 !important;
-  margin-bottom: 10px !important; /* Reduced from 12px */
+  margin-bottom: var(--space-md) !important;
   color: var(--primary) !important;
-  font-size: 1.3em !important; /* Reduced from 1.35em */
+  font-size: var(--text-lg) !important;
+  line-height: var(--leading-tight) !important;
 }
 
 #leaderboard-info p {
-  margin-bottom: 8px !important; /* Reduced from 10px */
-  line-height: 1.5 !important;
+  margin-bottom: var(--space-sm) !important;
+  line-height: var(--leading-normal) !important;
   font-size: var(--text-md) !important;
 }
 
 #leaderboard-info ul {
-  margin-bottom: 10px; /* Reduced from 12px */
-  padding-left: 20px; /* Reduced from 24px */
+  margin-bottom: var(--space-md);
+  padding-left: var(--space-lg);
 }
 
 #leaderboard-info li {
-  margin-bottom: 4px; /* Reduced from 5px */
-  line-height: 1.4;
+  margin-bottom: var(--space-xs);
+  line-height: var(--leading-normal);
   font-size: var(--text-md) !important;
 }
 
-/* Leaderboard Table Specific Styles - Adjusted size */
+/* Leaderboard Table Specific Styles */
 .leaderboard-table {
   width: 100% !important;
   border-collapse: separate !important;
   border-spacing: 0 !important;
-  font-size: 1.05em !important; /* Reduced from 1.1em */
-  margin-top: 16px !important; /* Reduced from 18px */
+  font-size: var(--text-md) !important;
+  margin-top: var(--space-lg) !important;
   overflow: hidden !important;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
   border-radius: 8px !important;
@@ -758,9 +868,10 @@ hr {
   border: none !important;
   border-bottom: 1px solid var(--border-light) !important;
   text-align: left !important;
-  padding: 10px 12px !important; /* Reduced from 12px 14px */
+  padding: var(--space-md) !important;
   background-color: var(--background-main) !important;
   font-size: var(--text-md) !important;
+  line-height: var(--leading-normal) !important;
 }
 
 /* Header row styling */
@@ -768,8 +879,8 @@ hr {
   background-color: #FFF1E6 !important;
   color: var(--text-dark) !important;
   font-weight: 600 !important;
-  font-size: 1.05em !important; /* Reduced from 1.1em */
-  padding: 12px !important; /* Reduced from 14px */
+  font-size: var(--text-md) !important;
+  padding: var(--space-md) !important;
   border: none !important;
   border-bottom: 1px solid var(--border-light) !important;
 }
@@ -793,7 +904,7 @@ hr {
 
 .leaderboard-table .confidence-value {
   color: var(--text-medium) !important;
-  font-size: 0.9em !important;
+  font-size: var(--text-xs) !important;
   font-weight: normal !important;
 }
 
@@ -812,18 +923,20 @@ hr {
 /* Blockquote styling */
 .gradio-container .prose blockquote,
 .gradio-container-5-28-0 .prose blockquote {
-  margin: 3px 0 !important; /* Reduced from 4px 0 */
-  border-left: 12px solid var(--border-color-primary) !important; /* Reduced from 14px */
-  padding-left: calc(var(--size-2) * 1.1) !important; /* Reduced */
+  margin: var(--space-xs) 0 !important;
+  border-left: 12px solid var(--border-color-primary) !important;
+  padding-left: calc(var(--size-2) * 1.1) !important;
   font-style: normal !important;
   color: var(--text-dark) !important;
+  font-size: var(--text-sm) !important;
+  line-height: var(--leading-normal) !important;
 }
 
 /* Spacing for Markdown content */
 span.svelte-7ddecg p {
-  line-height: 1.7 !important; /* Reduced from 1.8 */
+  line-height: var(--leading-relaxed) !important;
   margin-top: 0 !important;
-  margin-bottom: 0.5em !important; /* Reduced from 0.6em */
+  margin-bottom: var(--space-sm) !important;
 }
 
 .html-container.svelte-phx28p.padding {
@@ -837,14 +950,14 @@ html {
 
 /* For the query section scroll margin */
 #query-section {
-  scroll-margin-top: 20px; /* Reduced from 24px */
+  scroll-margin-top: var(--space-lg);
 }
 
-/* FAQ Section Styles - Improved left alignment */
+/* FAQ Section Styles */
 #faq-toggle-row {
   width: 100% !important;
-  margin-top: 8px !important; /* Reduced from 10px */
-  margin-bottom: 8px !important; /* Reduced from 10px */
+  margin-top: var(--space-sm) !important;
+  margin-bottom: var(--space-sm) !important;
   padding-left: 0 !important;
   margin-left: 0 !important;
   text-align: left !important;
@@ -857,8 +970,8 @@ html {
   color: var(--primary) !important;
   background-color: transparent !important;
   border: none !important;
-  padding: 6px 0 !important; /* Reduced from 8px 0 */
-  font-size: 1.1em !important; /* Reduced from 1.15em */
+  padding: var(--space-sm) 0 !important;
+  font-size: var(--text-md) !important;
   font-weight: 500 !important;
   text-align: left !important;
   justify-content: flex-start !important;
@@ -871,6 +984,7 @@ html {
   width: auto !important;
   display: inline-flex !important;
   align-items: center !important;
+  line-height: var(--leading-tight) !important;
 }
 
 /* Hover effect for FAQ toggle - just underline */
@@ -882,37 +996,37 @@ html {
 #faq-content {
   background-color: var(--background-light) !important;
   border-radius: 6px !important;
-  padding: 10px 16px !important; /* REDUCED from 16px 20px - less padding for the FAQ content box */
-  margin-top: 5px !important; /* Reduced from 6px */
-  margin-bottom: 15px !important; /* Reduced from 18px */
+  padding: var(--space-md) var(--space-lg) !important;
+  margin-bottom: var(--space-lg) !important;
   border: 1px solid var(--border-light) !important;
   width: 70% !important;
 }
 
 .faq-text {
   color: var(--text-medium) !important;
-  font-size: 1.05em !important; /* Reduced from 1.1em */
+  font-size: var(--text-sm) !important;
+  line-height: var(--leading-normal) !important;
 }
 
 .faq-text p {
-  margin-bottom: 12px !important; /* Reduced from 14px */
-  line-height: 1.5 !important; /* Reduced from 1.6 */
+  margin-bottom: var(--space-md) !important;
+  line-height: var(--leading-normal) !important;
   color: var(--text-medium) !important;
   font-size: var(--text-md) !important;
 }
 
 .faq-text ul {
-  margin-top: 8px !important; /* Reduced from 10px */
-  margin-bottom: 10px !important; /* Reduced from 12px */
-  padding-left: 25px !important; /* Reduced from 30px */
+  margin-top: var(--space-sm) !important;
+  margin-bottom: var(--space-md) !important;
+  padding-left: var(--space-xl) !important;
   list-style-type: circle !important;
 }
 
 .faq-text li {
-  margin-bottom: 8px !important; /* Reduced from 10px */
+  margin-bottom: var(--space-sm) !important;
   color: var(--text-medium) !important;
   font-size: var(--text-md) !important;
-  line-height: 1.5 !important;
+  line-height: var(--leading-normal) !important;
 }
 
 /* Empty State and Initial State Styles */
@@ -920,8 +1034,9 @@ html {
   color: var(--text-medium) !important;
   font-style: italic !important;
   text-align: center !important;
-  padding: 20px !important; /* Reduced from 24px */
-  font-size: 1.15em !important; /* Reduced from 1.2em */
+  padding: var(--space-lg) !important;
+  font-size: var(--text-md) !important;
+  line-height: var(--leading-normal) !important;
 }
 
 /* Get a Question Button - initially more prominent */
@@ -929,11 +1044,12 @@ html {
   background-color: var(--primary) !important;
   color: white !important;
   font-weight: 600 !important;
-  padding: 10px 20px !important; /* Reduced from 12px 24px */
+  padding: var(--space-md) var(--space-lg) !important;
   border-radius: 6px !important;
   transition: all 0.2s ease !important;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
-  font-size: 1.25em !important; /* Reduced from 1.3em */
+  font-size: var(--text-lg) !important;
+  line-height: var(--leading-tight) !important;
 }
 
 .initial-button:hover {
@@ -949,6 +1065,55 @@ html {
   display: block !important;
 }
 
+/* Reference Answer Styles - Direct spacing control */
+#reference-toggle-row {
+  margin-top: var(--space-md) !important;
+}
+
+#reference-toggle-row .faq-toggle-button {
+  font-size: var(--text-md) !important;
+  padding: var(--space-sm) 0 !important;
+  margin: 0 !important;
+}
+
+#reference-content {
+  margin-top: calc(-1 * var(--space-md)) !important;
+  margin-bottom: 0px !important;
+}
+
+/* When reference content is visible, add a tiny bit more space under toggle */
+#reference-content[style="block"] {
+  margin-top: 0px !important;
+}
+
+/* Reduce any default spacing on the reference content row */
+div[id="reference-content"] {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+/* Specific styling for reference answer text */
+#reference-content .faq-text,
+#reference-content .faq-text p {
+  background-color: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  border-radius: 0 !important;
+  margin: 0 !important;
+  box-shadow: none !important;
+  color: var(--text-dark) !important;
+  font-size: var(--text-md) !important;
+  line-height: var(--leading-normal) !important;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  #reference-content .faq-text {
+    background-color: transparent !important;
+    color: var(--text-dark) !important;
+  }
+}
+
 /* Responsive Styles */
 @media screen and (max-width: 768px) {
   #query-container {
@@ -958,7 +1123,7 @@ html {
   .query-box-row {
     flex: 1 1 100% !important;
     max-width: 100% !important;
-    margin-bottom: 10px !important; /* Reduced from 12px */
+    margin-bottom: var(--space-md) !important;
   }
   
   .query-button {
@@ -966,28 +1131,44 @@ html {
   }
 
   .vote-button {
-    font-size: 1.05em !important; /* Reduced from 1.08em */
-    padding: 10px 8px !important; /* Reduced from 12px 10px */
+    font-size: var(--text-md) !important;
+    padding: var(--space-md) var(--space-sm) !important;
   }
 
   .summary-card {
-    margin-bottom: 15px !important; /* Reduced from 18px */
+    margin-bottom: var(--space-lg) !important;
   }
 
   #main-interface-area > div:nth-child(7) > div {
     flex-direction: column !important;
   }
+
+  /* Reference card responsiveness */
+  .reference-card {
+    margin-bottom: var(--space-lg) !important;
+  }
+
+  #model-comparison-header {
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    gap: var(--space-md) !important;
+  }
 }
 
 @media screen and (max-width: 480px) {
   #main-interface-area > div:nth-child(10) > div {
     display: grid !important;
     grid-template-columns: 1fr 1fr !important;
-    gap: 8px !important; /* Reduced from 10px */
+    gap: var(--space-sm) !important;
   }
 
   .vote-button {
     margin: 0 !important;
-    padding: 8px 5px !important; /* Reduced from 10px 6px */
+    padding: var(--space-sm) var(--space-xs) !important;
+  }
+
+  .reference-toggle-button {
+    max-width: 100% !important;
+    font-size: var(--text-xs) !important;
   }
 }