diff --git a/css/style.css b/css/style.css
index cfe70a9c..dffc482a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -6,16 +6,26 @@
   --color-card-critical: #3f0b13;
   --color-text: #f8fafc;
   --color-muted: #94a3b8;
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-sm: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.1);
   --modal-motion-duration: 160ms;
-  --scrollbar-width: 8px;
+  --scrollbar-width: 0.5rem;
   --scrollbar-track: rgba(255, 255, 255, 0.1);
   --scrollbar-thumb: rgba(255, 255, 255, 0.3);
   --scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
 }
 
+html {
+  font-size: 100%;
+}
+
+@media (min-width: 1024px) {
+  html {
+    font-size: 75%;
+  }
+}
+
 /* Global scrollbar styling */
 * {
   scrollbar-width: thin;
@@ -33,7 +43,7 @@
 
 *::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
-  border-radius: 4px;
+  border-radius: 0.25rem;
 }
 
 *::-webkit-scrollbar-thumb:hover {
@@ -64,14 +74,8 @@ header img {
   max-width: none;
 }
 
-@media (min-width: 1024px) {
-  header img {
-    height: 5rem;
-  }
-}
-
 .container {
-  max-width: 1480px;
+  max-width: 92.5rem;
   margin: 0 auto;
   padding: 1rem;
 }
@@ -79,7 +83,7 @@ header img {
 /* Video Grids */
 #videoList {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   gap: 2rem;
   padding: 1.5rem 0;
 }
@@ -87,7 +91,7 @@ header img {
 /* Subscriptions grid: same pattern as #videoList */
 #subscriptionsVideoList {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   gap: 2rem;
   padding: 1.5rem 0;
 }
@@ -95,20 +99,11 @@ header img {
 /* Now also match for channelVideoList (channel profile) */
 #channelVideoList {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   gap: 2rem;
   padding: 1.5rem 0;
 }
 
-@media (min-width: 1024px) {
-  #videoList,
-  #subscriptionsVideoList,
-  #channelVideoList {
-    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-    gap: 1.5rem;
-  }
-}
-
 /* Video Cards */
 .video-card {
   background-color: var(--color-card);
@@ -124,11 +119,11 @@ header img {
 
 .video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
   background-color: var(--color-card-critical);
-  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35), var(--shadow-md);
+  box-shadow: 0 0 0 0.0625rem rgba(239, 68, 68, 0.35), var(--shadow-md);
 }
 
 .video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"]:hover {
-  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45), var(--shadow-lg);
+  box-shadow: 0 0 0 0.0625rem rgba(239, 68, 68, 0.45), var(--shadow-lg);
 }
 
 .video-card--enter {
@@ -139,7 +134,7 @@ header img {
 @keyframes video-card-fade-in {
   from {
     opacity: 0;
-    transform: translateY(8px);
+    transform: translateY(0.5rem);
   }
   to {
     opacity: 1;
@@ -218,7 +213,7 @@ header img {
 }
 
 .video-card:hover {
-  transform: translateY(-4px);
+  transform: translateY(-0.25rem);
   box-shadow: var(--shadow-lg);
 }
 
@@ -248,17 +243,6 @@ header img {
   margin-bottom: 0.75rem;
 }
 
-@media (min-width: 1024px) {
-  .video-card .details {
-    padding: 1rem 1rem 1.125rem;
-  }
-
-  .video-card h3 {
-    font-size: 1rem;
-    margin-bottom: 0.5rem;
-  }
-}
-
 /* Modal Player */
 #playerModal {
   position: fixed;
@@ -269,15 +253,15 @@ header img {
   flex-direction: column;
   overflow-y: auto;
   overscroll-behavior: contain;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px); /* For Safari support */
+  backdrop-filter: blur(0.625rem);
+  -webkit-backdrop-filter: blur(0.625rem); /* For Safari support */
 }
 
 #nostrFormModal,
 #profileModal,
 #uploadModal {
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px); /* For Safari */
+  backdrop-filter: blur(0.625rem);
+  -webkit-backdrop-filter: blur(0.625rem); /* For Safari */
 }
 
 /* If you ever want to show it, add ".flex" class dynamically */
@@ -298,7 +282,7 @@ header img {
 @keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(1.25rem);
   }
   to {
     opacity: 1;
@@ -411,7 +395,7 @@ textarea {
   width: 100%;
   padding: 0.75rem;
   background-color: var(--color-bg);
-  border: 1px solid rgb(255 255 255 / 0.1);
+  border: 0.0625rem solid rgb(255 255 255 / 0.1);
   border-radius: 0.5rem;
   color: var(--color-text);
   transition: border-color 0.2s;
@@ -421,7 +405,7 @@ input:focus,
 textarea:focus {
   outline: none;
   border-color: var(--color-primary);
-  ring: 2px var(--color-primary);
+  ring: 0.125rem var(--color-primary);
 }
 
 /* -------------------------------------------
@@ -440,12 +424,12 @@ button:not(.icon-button) {
 
 button:not(.icon-button):hover {
   background-color: var(--color-secondary);
-  transform: translateY(-1px);
+  transform: translateY(-0.0625rem);
 }
 
 button:not(.icon-button):focus {
   outline: none;
-  ring: 2px var(--color-primary);
+  ring: 0.125rem var(--color-primary);
 }
 */
 
@@ -490,7 +474,7 @@ button:not(.icon-button):focus {
 }
 
 footer {
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
   margin-top: 4rem;
   padding-top: 2rem;
 }
@@ -521,12 +505,12 @@ footer a:hover {
 }
 
 #disclaimerModal .modal-content {
-  width: min(960px, calc(100% - 2rem));
-  max-height: min(90vh, 820px);
+  width: min(60rem, calc(100% - 2rem));
+  max-height: min(90vh, 51.25rem);
   display: flex;
   flex-direction: column;
   background-color: var(--color-bg);
-  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.45);
+  box-shadow: 0 1.5625rem 3.125rem -0.75rem rgb(0 0 0 / 0.45);
 }
 
 #disclaimerModal .modal-header {
@@ -542,7 +526,7 @@ footer a:hover {
 #disclaimerModal .modal-footer {
   padding: 1.25rem 1.5rem 1.75rem;
   background-color: #1a2234;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
 }
 
 /* Responsive Adjustments for Disclaimer Modal */
@@ -613,7 +597,7 @@ footer a:hover {
 /* Video info cards */
 .video-info .bg-gray-800\/50 {
   background-color: rgb(31 41 55 / 0.5);
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(0.25rem);
 }
 
 /* Circular Icon Buttons */
@@ -639,7 +623,7 @@ footer a:hover {
 .icon-button:focus,
 .icon-button:active {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.6);
+  box-shadow: 0 0 0 0.1875rem rgba(220, 38, 38, 0.6);
 }
 
 .icon-image {
@@ -726,14 +710,14 @@ footer a:hover {
 
 .sidebar-dropup-panel {
   background-color: #1f2937; /* gray-800 */
-  border: 1px solid rgba(148, 163, 184, 0.25);
+  border: 0.0625rem solid rgba(148, 163, 184, 0.25);
   border-radius: 0.75rem;
-  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.45);
+  box-shadow: 0 1.125rem 2.1875rem rgba(15, 23, 42, 0.45);
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   pointer-events: none;
-  transform: translateY(16px);
+  transform: translateY(1rem);
   transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
 }
 
@@ -742,7 +726,7 @@ footer a:hover {
 }
 
 .sidebar-dropup-panel--expanded {
-  max-height: 640px;
+  max-height: 40rem;
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0);
@@ -751,7 +735,7 @@ footer a:hover {
 .sidebar-dropup-trigger {
   align-items: center;
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(14, 116, 144, 0.35));
-  border: 1px solid rgba(148, 163, 184, 0.35);
+  border: 0.0625rem solid rgba(148, 163, 184, 0.35);
   border-radius: 9999px;
   color: #f8fafc;
   display: flex;
@@ -764,9 +748,9 @@ footer a:hover {
 .sidebar-dropup-trigger:hover,
 .sidebar-dropup-trigger:focus {
   border-color: rgba(148, 163, 184, 0.6);
-  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
+  box-shadow: 0 0.75rem 1.875rem rgba(37, 99, 235, 0.25);
   outline: none;
-  transform: translateY(-1px);
+  transform: translateY(-0.0625rem);
 }
 
 .sidebar-dropup-trigger__content {
@@ -790,7 +774,7 @@ footer a:hover {
 .edit-field-button:focus {
   background-color: #334155;
   color: #f8fafc;
-  transform: translateY(-1px);
+  transform: translateY(-0.0625rem);
 }
 
 .locked-input {