diff --git a/nextjs-app/components/SatsChart.module.css b/nextjs-app/components/SatsChart.module.css
index 741a088..54f9a34 100644
--- a/nextjs-app/components/SatsChart.module.css
+++ b/nextjs-app/components/SatsChart.module.css
@@ -3,7 +3,8 @@
 .container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 2rem;
+  gap: 1.75rem;
+  padding-top: 0.25rem;
 }
 
 /* ── Individual subject column ── */
@@ -12,12 +13,12 @@
 }
 
 .subjectName {
-  font-size: 0.7rem;
-  font-weight: 600;
+  font-size: 0.65rem;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
   color: var(--text-muted, #6d685f);
-  margin-bottom: 0.65rem;
+  margin-bottom: 0.75rem;
 }
 
 .chartArea {
@@ -49,20 +50,20 @@
   top: 0;
   height: calc(100% - 20px);
   width: 1.5px;
-  background: rgba(224, 114, 86, 0.25); /* --accent-coral at 25% */
+  background: rgba(224, 114, 86, 0.35); /* --accent-coral at 35% */
   z-index: 2;
   pointer-events: none;
 }
 
 .natPill {
   position: absolute;
-  top: -8px;
+  top: -10px;
   transform: translateX(-50%);
   background: var(--accent-coral, #e07256);
   color: #fff;
   font-size: 0.55rem;
   font-weight: 700;
-  padding: 0.1rem 0.4rem;
+  padding: 0.1rem 0.35rem;
   border-radius: 4px;
   white-space: nowrap;
   z-index: 3;
@@ -75,14 +76,14 @@
   z-index: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.65rem;
+  gap: 0.35rem;
   padding-top: 0.9rem;
 }
 
 .barRow {
   display: flex;
   flex-direction: column;
-  gap: 0.2rem;
+  gap: 0.18rem;
 }
 
 .barHeader {
@@ -94,13 +95,13 @@
 
 .barTrack {
   width: 100%;
-  height: 22px;
+  height: 14px;
   position: relative;
 }
 
 .bar {
   height: 100%;
-  border-radius: 6px;
+  border-radius: 4px;
   position: relative;
   transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
@@ -114,7 +115,8 @@
 }
 
 .barLabel {
-  font-size: 0.75rem;
+  font-family: var(--font-playfair), 'Playfair Display', Georgia, serif;
+  font-size: 0.78rem;
   font-weight: 700;
   color: var(--text-primary, #1a1612);
   white-space: nowrap;
@@ -125,7 +127,7 @@
 .barLabelSuffix {
   font-weight: 500;
   color: var(--text-muted, #6d685f);
-  font-size: 0.62rem;
+  font-size: 0.6rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
 }
@@ -133,8 +135,8 @@
 /* ── Ruler ── */
 .ruler {
   position: relative;
-  height: 16px;
-  margin-top: 0.5rem;
+  height: 14px;
+  margin-top: 0.3rem;
   border-top: 1px solid var(--border-color, #e5dfd5);
 }
 
@@ -142,13 +144,13 @@
   position: absolute;
   top: 0;
   width: 1px;
-  height: 4px;
+  height: 3px;
   background: var(--border-color, #e5dfd5);
 }
 
 .rulerLabel {
   position: absolute;
-  top: 6px;
+  top: 5px;
   font-size: 0.5rem;
   font-weight: 500;
   color: var(--text-muted, #6d685f);