diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index a6fdd618..dd8a8feb 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -4594,15 +4594,9 @@
   }
 
   #app[data-sidebar-state="collapsed"] {
-    margin-left: calc(
-      var(--sidebar-width-collapsed) + var(--sidebar-content-gap)
-    );
-    width: calc(
-      100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap)
-    );
-    max-width: calc(
-      100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap)
-    );
+    margin-left: var(--sidebar-width-collapsed);
+    width: calc(100vw - var(--sidebar-width-collapsed));
+    max-width: calc(100vw - var(--sidebar-width-collapsed));
   }
 
   #app[data-sidebar-state="expanded"] {
@@ -5761,7 +5755,7 @@
     min-height: var(--space-md);
   }
 
-  @media (max-width: calc(theme("screens.md") - var(--breakpoint-edge-offset))) {
+  @media (max-width: 767.98px) {
     .dm-app-shell[data-dm-view="list"] .dm-app-shell__main {
       display: none !important;
     }
@@ -5856,35 +5850,91 @@
     max-block-size: none;
   }
 }
+
 @layer components {
-  /*
-    Responsive grid limit utility
-    Default (Mobile): Limit to 5
-    lg: Limit to 6
-    xl: Limit to 8
-  */
-  .channel-grid-limit > :nth-child(n+6) {
-    display: none !important;
+  .marquee-host {
+    position: relative;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
   }
 
-  @media (min-width: theme('screens.lg')) {
-    .channel-grid-limit > :nth-child(n+6) {
-      display: flex !important; /* Restore visibility for item 6 */
+  .marquee-static {
+    @apply truncate;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+  }
+
+  .marquee-anim {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+    mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
+    -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
+  }
+
+  .marquee-track {
+    display: flex;
+    width: max-content;
+    animation: marquee-scroll linear infinite;
+    animation-duration: var(--marquee-duration, 10s);
+    animation-play-state: paused;
+  }
+
+  .marquee-item {
+    flex-shrink: 0;
+    padding-right: var(--space-xl); /* Gap between loop items */
+  }
+
+  @keyframes marquee-scroll {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-50%); }
+  }
+
+  /* Desktop Hover State */
+  @media (min-width: theme("screens.lg")) {
+    .card:hover .marquee-host.can-marquee .marquee-static {
+      opacity: 0;
     }
-    .channel-grid-limit > :nth-child(n+7) {
-      display: none !important; /* Hide 7+ */
+    .card:hover .marquee-host.can-marquee .marquee-anim {
+      opacity: 1;
+    }
+    .card:hover .marquee-host.can-marquee .marquee-track {
+      animation-play-state: running;
     }
   }
 
-  @media (min-width: theme('screens.xl')) {
-    .channel-grid-limit > :nth-child(n+7) {
-      display: flex !important; /* Restore visibility for item 7 */
+  /* Mobile Active State */
+  @media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) {
+    .card[data-mobile-active="true"] {
+      --video-card-lift-translate-y: var(--motion-video-card-hover-translate);
+      --video-card-backdrop-opacity: 0.425;
+      --video-card-backdrop-translate-y: var(
+        --motion-video-card-backdrop-translate
+      );
+      --video-card-backdrop-scale: 1.12;
+      --video-card-backdrop-blur: var(--blur-video-card-backdrop-strong);
+      @apply shadow-lg;
     }
-    .channel-grid-limit > :nth-child(n+8) {
-        display: flex !important; /* Restore visibility for item 8 */
+
+    .card[data-mobile-active="true"] .video-card__title {
+      color: var(--color-accent);
     }
-    .channel-grid-limit > :nth-child(n+9) {
-      display: none !important; /* Hide 9+ */
+
+    .card[data-mobile-active="true"] .marquee-host.can-marquee .marquee-static {
+      opacity: 0;
+    }
+    .card[data-mobile-active="true"] .marquee-host.can-marquee .marquee-anim {
+      opacity: 1;
+    }
+    .card[data-mobile-active="true"] .marquee-host.can-marquee .marquee-track {
+      animation-play-state: running;
     }
   }
 }