diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD
index e946f56..0137412 100644
--- a/UI_UPDATE.MD
+++ b/UI_UPDATE.MD
@@ -279,48 +279,27 @@ Always come back and update UI_UPDATE.MD once complete with task and task item.
 
 ### Sub-task 3.1: Grid-Based Layout System
 
-#### 3.1.1: CSS Grid Implementation - COMPLETED 9/29/2025
-- [x] Analyze current flexbox usage
-- [x] Identify CSS Grid opportunities
-- [x] Implement grid-based layout foundation
+#### 3.1.1: CSS Grid Implementation
+- [ ] Analyze current flexbox usage
+- [ ] Identify CSS Grid opportunities
+- [ ] Implement grid-based layout foundation
 
-**Notes:** Added comprehensive CSS Grid utility classes to utilities.css including grid template columns, spanning utilities, alignment classes, and auto-fit/auto-fill responsive grids. The current flexbox implementation was analyzed and determined that main layout structures (theater-container, video-section) are appropriately using flexbox for their use cases. Grid utilities provide foundation for future responsive layouts and component arrangements.
+#### 3.1.2: 12-Column System
+- [ ] Create responsive grid variation classes
+- [ ] Implement grid gap and spacing system
+- [ ] Add grid utility classes for common patterns
 
-#### 3.1.2: 12-Column System - COMPLETED 9/29/2025
-- [x] Create responsive grid variation classes
-- [x] Implement grid gap and spacing system
-- [x] Add grid utility classes for common patterns
-
-**Notes:** Implemented comprehensive 12-column CSS Grid system in utilities.css with:
-- Expanded grid column spans (col-span-5 through col-span-12)
-- Added col-start-* and col-end-* utilities for precise column positioning
-- Implemented responsive grid classes (.sm\:grid-cols-*, .md\:grid-cols-*, etc.) for all breakpoints
-- Enhanced gap system with gap-*, gap-x-*, and gap-y-* utilities
-- Added grid-flow utilities and additional alignment classes
-- Created responsive grid variation classes for sm (640px+), md (768px+), lg (1024px+), xl (1280px+), and 2xl (1536px+) breakpoints
-
-#### 3.1.3: Layout Utilities - COMPLETED 9/29/2025
-- [x] Create container and wrapper utilities
-- [x] Implement spacing and alignment helpers
-- [x] Add responsive layout modifiers
-
-**Notes:** Implemented comprehensive layout utilities to utilities.css with over 190 utility classes including:
-- Container utilities (.container, .container-fluid, .wrapper, breakpoint-specific containers)
-- Complete spacing system (margin/padding utilities: .m-*, .p-*, directional and axis helpers)
-- Display and positioning utilities (.block, .flex, .relative, .absolute, etc.)
-- Width/height utilities (.w-*, .h-*, fractional widths)
-- Border and text alignment utilities
-- Flexbox utilities (direction, wrap, justify, align, flex-items)
-- Responsive layout modifiers across all breakpoints (sm:, md:, lg:, xl:, 2xl:)
+#### 3.1.3: Layout Utilities
+- [ ] Create container and wrapper utilities
+- [ ] Implement spacing and alignment helpers
+- [ ] Add responsive layout modifiers
 
 ### Sub-task 3.2: Advanced Breakpoint Management
 
-#### 3.2.1: Breakpoint Definition - COMPLETED 9/29/2025
-- [x] Establish 6 responsive breakpoints (xs to 2xl)
-- [x] Create breakpoint mixin system
-- [x] Implement breakpoint-based CSS variables
-
-**Notes:** Implemented comprehensive breakpoint system using CSS custom properties. Established 6 mobile-first breakpoints (xs: 320px, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px) in variables.css. Created breakpoint mixin system with custom property utilities (--mq-sm, --mq-md, etc.) and implemented all utility classes using var(--breakpoint-sm) in media queries across utilities.css. Added container max-widths and responsive padding variables for each breakpoint. Modernized all existing responsive utilities to use the new system, including grid, display, text alignment, and dimension utilities.
+#### 3.2.1: Breakpoint Definition
+- [ ] Establish 6 responsive breakpoints (xs to 2xl)
+- [ ] Create breakpoint mixin system
+- [ ] Implement breakpoint-based CSS variables
 
 #### 3.2.2: Responsive Typography
 - [ ] Create fluid typography scaling
diff --git a/static/css/utilities.css b/static/css/utilities.css
index 6d7c0ef..2df17a7 100644
--- a/static/css/utilities.css
+++ b/static/css/utilities.css
@@ -1,813 +1,341 @@
-/* =================================================================
-   CSS GRID UTILITIES
-   ================================================================= */
-
-/* Grid containers */
-.grid {
-    display: grid;
-}
-
-.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
-
-/* Grid column span utilities (1-12 columns for 12-column system) */
-.col-span-1 { grid-column: span 1 / span 1; }
-.col-span-2 { grid-column: span 2 / span 2; }
-.col-span-3 { grid-column: span 3 / span 3; }
-.col-span-4 { grid-column: span 4 / span 4; }
-.col-span-5 { grid-column: span 5 / span 5; }
-.col-span-6 { grid-column: span 6 / span 6; }
-.col-span-7 { grid-column: span 7 / span 7; }
-.col-span-8 { grid-column: span 8 / span 8; }
-.col-span-9 { grid-column: span 9 / span 9; }
-.col-span-10 { grid-column: span 10 / span 10; }
-.col-span-11 { grid-column: span 11 / span 11; }
-.col-span-12 { grid-column: span 12 / span 12; }
-
-/* Starting column utilities for offset positioning */
-.col-start-1 { grid-column-start: 1; }
-.col-start-2 { grid-column-start: 2; }
-.col-start-3 { grid-column-start: 3; }
-.col-start-4 { grid-column-start: 4; }
-.col-start-5 { grid-column-start: 5; }
-.col-start-6 { grid-column-start: 6; }
-.col-start-7 { grid-column-start: 7; }
-.col-start-8 { grid-column-start: 8; }
-.col-start-9 { grid-column-start: 9; }
-.col-start-10 { grid-column-start: 10; }
-.col-start-11 { grid-column-start: 11; }
-.col-start-12 { grid-column-start: 12; }
-
-/* Ending column utilities */
-.col-end-1 { grid-column-end: 1; }
-.col-end-2 { grid-column-end: 2; }
-.col-end-3 { grid-column-end: 3; }
-.col-end-4 { grid-column-end: 4; }
-.col-end-5 { grid-column-end: 5; }
-.col-end-6 { grid-column-end: 6; }
-.col-end-7 { grid-column-end: 7; }
-.col-end-8 { grid-column-end: 8; }
-.col-end-9 { grid-column-end: 9; }
-.col-end-10 { grid-column-end: 10; }
-.col-end-11 { grid-column-end: 11; }
-.col-end-12 { grid-column-end: 12; }
-
-/* Grid row spans */
-.row-span-1 { grid-row: span 1 / span 1; }
-.row-span-2 { grid-row: span 2 / span 2; }
-.row-span-3 { grid-row: span 3 / span 3; }
-.row-span-4 { grid-row: span 4 / span 4; }
-
-/* Grid flow direction */
-.grid-flow-row { grid-auto-flow: row; }
-.grid-flow-col { grid-auto-flow: column; }
-.grid-flow-dense { grid-auto-flow: dense; }
-.grid-flow-row-dense { grid-auto-flow: row dense; }
-.grid-flow-col-dense { grid-auto-flow: column dense; }
-
-/* Grid alignment */
-.place-items-center {
-    place-items: center;
-}
-
-.items-start { align-items: start; }
-.items-end { align-items: end; }
-.items-center { align-items: center; }
-.items-baseline { align-items: baseline; }
-.items-stretch { align-items: stretch; }
-
-.justify-start { justify-content: start; }
-.justify-end { justify-content: end; }
-.justify-center { justify-content: center; }
-.justify-between { justify-content: space-between; }
-.justify-around { justify-content: space-around; }
-.justify-evenly { justify-content: space-evenly; }
-
-.justify-items-start { justify-items: start; }
-.justify-items-end { justify-items: end; }
-.justify-items-center { justify-items: center; }
-.justify-items-stretch { justify-items: stretch; }
-
-.place-content-center {
-    place-content: center;
-}
-
-.place-content-start { place-content: start; }
-.place-content-end { place-content: end; }
-.place-content-stretch { place-content: stretch; }
-
-/* Grid gap and spacing system */
-.gap-1 { gap: var(--spacing-1); }
-.gap-2 { gap: var(--spacing-2); }
-.gap-3 { gap: var(--spacing-3); }
-.gap-4 { gap: var(--spacing-4); }
-.gap-5 { gap: var(--spacing-5); }
-.gap-6 { gap: var(--spacing-6); }
-.gap-8 { gap: var(--spacing-8); }
-.gap-10 { gap: var(--spacing-10); }
-.gap-12 { gap: var(--spacing-12); }
-.gap-16 { gap: var(--spacing-16); }
-
-/* Horizontal gap utilities */
-.gap-x-1 { column-gap: var(--spacing-1); }
-.gap-x-2 { column-gap: var(--spacing-2); }
-.gap-x-3 { column-gap: var(--spacing-3); }
-.gap-x-4 { column-gap: var(--spacing-4); }
-.gap-x-5 { column-gap: var(--spacing-5); }
-.gap-x-6 { column-gap: var(--spacing-6); }
-
-/* Vertical gap utilities */
-.gap-y-1 { row-gap: var(--spacing-1); }
-.gap-y-2 { row-gap: var(--spacing-2); }
-.gap-y-3 { row-gap: var(--spacing-3); }
-.gap-y-4 { row-gap: var(--spacing-4); }
-.gap-y-5 { row-gap: var(--spacing-5); }
-.gap-y-6 { row-gap: var(--spacing-6); }
-
-/* Auto-fit and auto-fill responsive grids */
-.grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
-.grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
-
-.grid-auto-fit-sm {
-    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-}
-
-.grid-auto-fill-md {
-    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
-}
-
-.grid-auto-fit-lg {
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-}
+/* Utility classes and animations */
 
 /* =================================================================
-   RESPONSIVE WIDTH/HEIGHT UTILITIES - Using Breakpoint Custom Properties
+   KEYFRAME ANIMATIONS
    ================================================================= */
 
-/* Responsive Width - Small and up */
-@media (min-width: var(--breakpoint-sm)) {
-    .sm\:w-full { width: 100%; }
-    .sm\:w-auto { width: auto; }
-    .sm\:w-1\/2 { width: 50%; }
-    .sm\:w-1\/3 { width: 33.333333%; }
-    .sm\:w-2\/3 { width: 66.666667%; }
-    .sm\:w-1\/4 { width: 25%; }
-    .sm\:w-3\/4 { width: 75%; }
-}
-
-/* Responsive Width - Medium and up */
-@media (min-width: var(--breakpoint-md)) {
-    .md\:w-full { width: 100%; }
-    .md\:w-auto { width: auto; }
-    .md\:w-1\/2 { width: 50%; }
-    .md\:w-1\/3 { width: 33.333333%; }
-    .md\:w-2\/3 { width: 66.666667%; }
-    .md\:w-1\/4 { width: 25%; }
-    .md\:w-3\/4 { width: 75%; }
-}
-
-/* Responsive Width - Large and up */
-@media (min-width: var(--breakpoint-lg)) {
-    .lg\:w-full { width: 100%; }
-    .lg\:w-auto { width: auto; }
-    .lg\:w-1\/2 { width: 50%; }
-    .lg\:w-1\/3 { width: 33.333333%; }
-    .lg\:w-2\/3 { width: 66.666667%; }
-    .lg\:w-1\/4 { width: 25%; }
-    .lg\:w-3\/4 { width: 75%; }
-}
-
-/* Responsive Width - Extra Large and up */
-@media (min-width: var(--breakpoint-xl)) {
-    .xl\:w-full { width: 100%; }
-    .xl\:w-auto { width: auto; }
-    .xl\:w-1\/2 { width: 50%; }
-    .xl\:w-1\/3 { width: 33.333333%; }
-    .xl\:w-2\/3 { width: 66.666667%; }
-    .xl\:w-1\/4 { width: 25%; }
-    .xl\:w-3\/4 { width: 75%; }
-}
-
-/* Responsive Width - 2XL and up */
-@media (min-width: var(--breakpoint-2xl)) {
-    .2xl\:w-full { width: 100%; }
-    .2xl\:w-auto { width: auto; }
-    .2xl\:w-1\/2 { width: 50%; }
-    .2xl\:w-1\/3 { width: 33.333333%; }
-    .2xl\:w-2\/3 { width: 66.666667%; }
-    .2xl\:w-1\/4 { width: 25%; }
-    .2xl\:w-3\/4 { width: 75%; }
-}
-
-/* Responsive Height - Small and up */
-@media (min-width: var(--breakpoint-sm)) {
-    .sm\:h-full { height: 100%; }
-    .sm\:h-auto { height: auto; }
-    .sm\:h-screen { height: 100vh; }
-    .sm\:h-1\/2 { height: 50%; }
-    .sm\:h-1\/3 { height: 33.333333%; }
-    .sm\:h-2\/3 { height: 66.666667%; }
-}
-
-/* Responsive Height - Medium and up */
-@media (min-width: var(--breakpoint-md)) {
-    .md\:h-full { height: 100%; }
-    .md\:h-auto { height: auto; }
-    .md\:h-screen { height: 100vh; }
-    .md\:h-1\/2 { height: 50%; }
-    .md\:h-1\/3 { height: 33.333333%; }
-    .md\:h-2\/3 { height: 66.666667%; }
-}
-
-/* Responsive Height - Large and up */
-@media (min-width: var(--breakpoint-lg)) {
-    .lg\:h-full { height: 100%; }
-    .lg\:h-auto { height: auto; }
-    .lg\:h-screen { height: 100vh; }
-    .lg\:h-1\/2 { height: 50%; }
-    .lg\:h-1\/3 { height: 33.333333%; }
-    .lg\:h-2\/3 { height: 66.666667%; }
-}
-
-/* Responsive Height - Extra Large and up */
-@media (min-width: var(--breakpoint-xl)) {
-    .xl\:h-full { height: 100%; }
-    .xl\:h-auto { height: auto; }
-    .xl\:h-screen { height: 100vh; }
-    .xl\:h-1\/2 { height: 50%; }
-    .xl\:h-1\/3 { height: 33.333333%; }
-    .xl\:h-2\/3 { height: 66.666667%; }
-}
-
-/* Responsive Height - 2XL and up */
-@media (min-width: var(--breakpoint-2xl)) {
-    .2xl\:h-full { height: 100%; }
-    .2xl\:h-auto { height: auto; }
-    .2xl\:h-screen { height: 100vh; }
-    .2xl\:h-1\/2 { height: 50%; }
-    .2xl\:h-1\/3 { height: 33.333333%; }
-    .2xl\:h-2\/3 { height: 66.666667%; }
-}
-
-/* =================================================================
-   RESPONSIVE GRID VARIATION CLASSES - Extra Large breakpoint (xl and up)
-   ================================================================= */
-
-/* Extra Large breakpoint (xl and up) */
-@media (min-width: var(--breakpoint-xl)) {
-    .xl\:grid {
-        display: grid;
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-20px);
     }
-
-    .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
-    .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-    .xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
-    .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
-    .xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
-    .xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
-    .xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
-    .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
-
-    .xl\:col-span-1 { grid-column: span 1 / span 1; }
-    .xl\:col-span-2 { grid-column: span 2 / span 2; }
-    .xl\:col-span-3 { grid-column: span 3 / span 3; }
-    .xl\:col-span-4 { grid-column: span 4 / span 4; }
-    .xl\:col-span-5 { grid-column: span 5 / span 5; }
-    .xl\:col-span-6 { grid-column: span 6 / span 6; }
-    .xl\:col-span-7 { grid-column: span 7 / span 7; }
-    .xl\:col-span-8 { grid-column: span 8 / span 8; }
-    .xl\:col-span-9 { grid-column: span 9 / span 9; }
-    .xl\:col-span-10 { grid-column: span 10 / span 10; }
-    .xl\:col-span-11 { grid-column: span 11 / span 11; }
-    .xl\:col-span-12 { grid-column: span 12 / span 12; }
-}
-
-/* =================================================================
-   RESPONSIVE GRID VARIATION CLASSES - 2XL breakpoint (2xl and up)
-   ================================================================= */
-
-/* 2XL breakpoint (2xl and up) */
-@media (min-width: var(--breakpoint-2xl)) {
-    .2xl\:grid {
-        display: grid;
+    to {
+        opacity: 1;
+        transform: translateX(0);
     }
+}
 
-    .2xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-    .2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    .2xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-    .2xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-    .2xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
-    .2xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-    .2xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
-    .2xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
-    .2xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
-    .2xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
-    .2xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
-    .2xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.8;
+    }
+}
 
-    .2xl\:col-span-1 { grid-column: span 1 / span 1; }
-    .2xl\:col-span-2 { grid-column: span 2 / span 2; }
-    .2xl\:col-span-3 { grid-column: span 3 / span 3; }
-    .2xl\:col-span-4 { grid-column: span 4 / span 4; }
-    .2xl\:col-span-5 { grid-column: span 5 / span 5; }
-    .2xl\:col-span-6 { grid-column: span 6 / span 6; }
-    .2xl\:col-span-7 { grid-column: span 7 / span 7; }
-    .2xl\:col-span-8 { grid-column: span 8 / span 8; }
-    .2xl\:col-span-9 { grid-column: span 9 / span 9; }
-    .2xl\:col-span-10 { grid-column: span 10 / span 10; }
-    .2xl\:col-span-11 { grid-column: span 11 / span 11; }
-    .2xl\:col-span-12 { grid-column: span 12 / span 12; }
+@keyframes blink {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes bounce {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.2);
+    }
+}
+
+@keyframes slideOut {
+    to {
+        opacity: 0;
+        transform: translateX(100%);
+    }
 }
 
 /* =================================================================
-   LAYOUT UTILITIES
+   SCROLLBAR STYLING
    ================================================================= */
 
-/* Container and Wrapper Utilities */
-.container {
+.chat-messages::-webkit-scrollbar {
+    width: var(--spacing-2);
+}
+
+.chat-messages::-webkit-scrollbar-track {
+    background: var(--bg-darker);
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+    background: var(--dodgers-blue-500);
+    border-radius: var(--border-radius-sm);
+    opacity: 0.6;
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover {
+    opacity: 1;
+}
+
+/* =================================================================
+   VIDEO.JS OVERRIDES
+   ================================================================= */
+
+/* Video player container */
+#video-player {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
-    max-width: var(--container-max-width, 1200px);
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: var(--container-padding, var(--spacing-4));
-    padding-right: var(--container-padding, var(--spacing-4));
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
 }
 
-.container-fluid {
-    width: 100%;
-    padding-left: var(--spacing-4);
-    padding-right: var(--spacing-4);
+/* Video.js skin overrides */
+.video-js {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: 100% !important;
 }
 
-.wrapper {
-    width: 100%;
+/* Override VideoJS fluid behavior to prevent overflow */
+.video-js.vjs-fluid {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: 100% !important;
+    padding-top: 0 !important;
 }
 
-/* Breakpoint-specific containers - Using responsive container system */
-@media (min-width: var(--breakpoint-sm)) {
-    .container-sm {
-        max-width: var(--container-sm);
-    }
+/* Ensure the actual video element is properly constrained */
+.video-js video {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: 100% !important;
+    object-fit: contain !important;
 }
 
-@media (min-width: var(--breakpoint-md)) {
-    .container-md {
-        max-width: var(--container-md);
-    }
-}
-
-@media (min-width: var(--breakpoint-lg)) {
-    .container-lg {
-        max-width: var(--container-lg);
-    }
-}
-
-@media (min-width: var(--breakpoint-xl)) {
-    .container-xl {
-        max-width: var(--container-xl);
-    }
-}
-
-@media (min-width: var(--breakpoint-2xl)) {
-    .container-2xl {
-        max-width: var(--container-2xl);
-    }
+/* Control bar styling */
+.video-js .vjs-control-bar {
+    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
 }
 
 /* =================================================================
-   SPACING AND ALIGNMENT HELPERS
+   FOCUSABLE ELEMENTS (Accessibility)
    ================================================================= */
 
-/* Margin Utilities */
-/* Auto margins for centering */
-.mx-auto { margin-left: auto; margin-right: auto; }
-.my-auto { margin-top: auto; margin-bottom: auto; }
-.m-auto { margin: auto; }
-
-/* Margin scale */
-.m-0 { margin: 0; }
-.m-1 { margin: var(--spacing-1); }
-.m-2 { margin: var(--spacing-2); }
-.m-3 { margin: var(--spacing-3); }
-.m-4 { margin: var(--spacing-4); }
-.m-5 { margin: var(--spacing-5); }
-.m-6 { margin: var(--spacing-6); }
-.m-8 { margin: var(--spacing-8); }
-.m-10 { margin: var(--spacing-10); }
-.m-12 { margin: var(--spacing-12); }
-.m-16 { margin: var(--spacing-16); }
-
-/* Directional margins */
-.mt-0 { margin-top: 0; }
-.mt-1 { margin-top: var(--spacing-1); }
-.mt-2 { margin-top: var(--spacing-2); }
-.mt-3 { margin-top: var(--spacing-3); }
-.mt-4 { margin-top: var(--spacing-4); }
-.mt-5 { margin-top: var(--spacing-5); }
-.mt-6 { margin-top: var(--spacing-6); }
-
-.mb-0 { margin-bottom: 0; }
-.mb-1 { margin-bottom: var(--spacing-1); }
-.mb-2 { margin-bottom: var(--spacing-2); }
-.mb-3 { margin-bottom: var(--spacing-3); }
-.mb-4 { margin-bottom: var(--spacing-4); }
-.mb-5 { margin-bottom: var(--spacing-5); }
-.mb-6 { margin-bottom: var(--spacing-6); }
-
-.ml-0 { margin-left: 0; }
-.ml-1 { margin-left: var(--spacing-1); }
-.ml-2 { margin-left: var(--spacing-2); }
-.ml-3 { margin-left: var(--spacing-3); }
-.ml-4 { margin-left: var(--spacing-4); }
-.ml-5 { margin-left: var(--spacing-5); }
-.ml-6 { margin-left: var(--spacing-6); }
-
-.mr-0 { margin-right: 0; }
-.mr-1 { margin-right: var(--spacing-1); }
-.mr-2 { margin-right: var(--spacing-2); }
-.mr-3 { margin-right: var(--spacing-3); }
-.mr-4 { margin-right: var(--spacing-4); }
-.mr-5 { margin-right: var(--spacing-5); }
-.mr-6 { margin-right: var(--spacing-6); }
-
-/* X and Y margins */
-.mx-0 { margin-left: 0; margin-right: 0; }
-.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
-.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
-.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }
-.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
-.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }
-
-.my-0 { margin-top: 0; margin-bottom: 0; }
-.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
-.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
-.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
-.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
-.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
-
-/* Padding Utilities */
-.p-0 { padding: 0; }
-.p-1 { padding: var(--spacing-1); }
-.p-2 { padding: var(--spacing-2); }
-.p-3 { padding: var(--spacing-3); }
-.p-4 { padding: var(--spacing-4); }
-.p-5 { padding: var(--spacing-5); }
-.p-6 { padding: var(--spacing-6); }
-.p-8 { padding: var(--spacing-8); }
-.p-10 { padding: var(--spacing-10); }
-.p-12 { padding: var(--spacing-12); }
-.p-16 { padding: var(--spacing-16); }
-
-/* Directional padding */
-.pt-0 { padding-top: 0; }
-.pt-1 { padding-top: var(--spacing-1); }
-.pt-2 { padding-top: var(--spacing-2); }
-.pt-3 { padding-top: var(--spacing-3); }
-.pt-4 { padding-top: var(--spacing-4); }
-.pt-5 { padding-top: var(--spacing-5); }
-.pt-6 { padding-top: var(--spacing-6); }
-
-.pb-0 { padding-bottom: 0; }
-.pb-1 { padding-bottom: var(--spacing-1); }
-.pb-2 { padding-bottom: var(--spacing-2); }
-.pb-3 { padding-bottom: var(--spacing-3); }
-.pb-4 { padding-bottom: var(--spacing-4); }
-.pb-5 { padding-bottom: var(--spacing-5); }
-.pb-6 { padding-bottom: var(--spacing-6); }
-
-.pl-0 { padding-left: 0; }
-.pl-1 { padding-left: var(--spacing-1); }
-.pl-2 { padding-left: var(--spacing-2); }
-.pl-3 { padding-left: var(--spacing-3); }
-.pl-4 { padding-left: var(--spacing-4); }
-.pl-5 { padding-left: var(--spacing-5); }
-.pl-6 { padding-left: var(--spacing-6); }
-
-.pr-0 { padding-right: 0; }
-.pr-1 { padding-right: var(--spacing-1); }
-.pr-2 { padding-right: var(--spacing-2); }
-.pr-3 { padding-right: var(--spacing-3); }
-.pr-4 { padding-right: var(--spacing-4); }
-.pr-5 { padding-right: var(--spacing-5); }
-.pr-6 { padding-right: var(--spacing-6); }
-
-/* X and Y padding */
-.px-0 { padding-left: 0; padding-right: 0; }
-.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
-.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
-.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
-.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
-.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
-
-.py-0 { padding-top: 0; padding-bottom: 0; }
-.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
-.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
-.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
-.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
-.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
+/* Focus ring utility - can be used on any focusable element */
+.focus-ring:focus {
+    outline: 2px solid var(--dodgers-blue-500);
+    outline-offset: 2px;
+}
 
 /* =================================================================
-   DISPLAY AND POSITIONING UTILITIES
+   VISIBLE ONLY TO SCREEN READERS
    ================================================================= */
 
-/* Display Utilities */
-.block { display: block; }
-.inline { display: inline; }
-.inline-block { display: inline-block; }
-.none { display: none; }
-.flex { display: flex; }
-
-/* Position Utilities */
-.relative { position: relative; }
-.absolute { position: absolute; }
-.fixed { position: fixed; }
-.sticky { position: sticky; }
-
-/* Width Utilities */
-.w-full { width: 100%; }
-.w-auto { width: auto; }
-.w-1\/2 { width: 50%; }
-.w-1\/3 { width: 33.333333%; }
-.w-2\/3 { width: 66.666667%; }
-.w-1\/4 { width: 25%; }
-.w-2\/4 { width: 50%; }
-.w-3\/4 { width: 75%; }
-.w-1\/5 { width: 20%; }
-.w-2\/5 { width: 40%; }
-.w-3\/5 { width: 60%; }
-.w-4\/5 { width: 80%; }
-
-/* Height Utilities */
-.h-full { height: 100%; }
-.h-auto { height: auto; }
-.h-screen { height: 100vh; }
-.h-1\/2 { height: 50%; }
-.h-1\/3 { height: 33.333333%; }
-.h-2\/3 { height: 66.666667%; }
-.h-1\/4 { height: 25%; }
-.h-2\/4 { height: 50%; }
-.h-3\/4 { height: 75%; }
-
-/* =================================================================
-   RESPONSIVE WIDTH/HEIGHT UTILITIES - Using Breakpoint Custom Properties
-   ================================================================= */
-
-/* Responsive Width - Small and up */
-@media (min-width: var(--breakpoint-sm)) {
-    .sm\:w-full { width: 100%; }
-    .sm\:w-auto { width: auto; }
-    .sm\:w-1\/2 { width: 50%; }
-    .sm\:w-1\/3 { width: 33.333333%; }
-    .sm\:w-2\/3 { width: 66.666667%; }
-    .sm\:w-1\/4 { width: 25%; }
-    .sm\:w-3\/4 { width: 75%; }
-}
-
-/* Responsive Width - Medium and up */
-@media (min-width: var(--breakpoint-md)) {
-    .md\:w-full { width: 100%; }
-    .md\:w-auto { width: auto; }
-    .md\:w-1\/2 { width: 50%; }
-    .md\:w-1\/3 { width: 33.333333%; }
-    .md\:w-2\/3 { width: 66.666667%; }
-    .md\:w-1\/4 { width: 25%; }
-    .md\:w-3\/4 { width: 75%; }
-}
-
-/* Responsive Width - Large and up */
-@media (min-width: var(--breakpoint-lg)) {
-    .lg\:w-full { width: 100%; }
-    .lg\:w-auto { width: auto; }
-    .lg\:w-1\/2 { width: 50%; }
-    .lg\:w-1\/3 { width: 33.333333%; }
-    .lg\:w-2\/3 { width: 66.666667%; }
-    .lg\:w-1\/4 { width: 25%; }
-    .lg\:w-3\/4 { width: 75%; }
-}
-
-/* Responsive Width - Extra Large and up */
-@media (min-width: var(--breakpoint-xl)) {
-    .xl\:w-full { width: 100%; }
-    .xl\:w-auto { width: auto; }
-    .xl\:w-1\/2 { width: 50%; }
-    .xl\:w-1\/3 { width: 33.333333%; }
-    .xl\:w-2\/3 { width: 66.666667%; }
-    .xl\:w-1\/4 { width: 25%; }
-    .xl\:w-3\/4 { width: 75%; }
-}
-
-/* Responsive Width - 2XL and up */
-@media (min-width: var(--breakpoint-2xl)) {
-    .2xl\:w-full { width: 100%; }
-    .2xl\:w-auto { width: auto; }
-    .2xl\:w-1\/2 { width: 50%; }
-    .2xl\:w-1\/3 { width: 33.333333%; }
-    .2xl\:w-2\/3 { width: 66.666667%; }
-    .2xl\:w-1\/4 { width: 25%; }
-    .2xl\:w-3\/4 { width: 75%; }
-}
-
-/* Responsive Height - Small and up */
-@media (min-width: var(--breakpoint-sm)) {
-    .sm\:h-full { height: 100%; }
-    .sm\:h-auto { height: auto; }
-    .sm\:h-screen { height: 100vh; }
-    .sm\:h-1\/2 { height: 50%; }
-    .sm\:h-1\/3 { height: 33.333333%; }
-    .sm\:h-2\/3 { height: 66.666667%; }
-}
-
-/* Responsive Height - Medium and up */
-@media (min-width: var(--breakpoint-md)) {
-    .md\:h-full { height: 100%; }
-    .md\:h-auto { height: auto; }
-    .md\:h-screen { height: 100vh; }
-    .md\:h-1\/2 { height: 50%; }
-    .md\:h-1\/3 { height: 33.333333%; }
-    .md\:h-2\/3 { height: 66.666667%; }
-}
-
-/* Responsive Height - Large and up */
-@media (min-width: var(--breakpoint-lg)) {
-    .lg\:h-full { height: 100%; }
-    .lg\:h-auto { height: auto; }
-    .lg\:h-screen { height: 100vh; }
-    .lg\:h-1\/2 { height: 50%; }
-    .lg\:h-1\/3 { height: 33.333333%; }
-    .lg\:h-2\/3 { height: 66.666667%; }
-}
-
-/* Responsive Height - Extra Large and up */
-@media (min-width: var(--breakpoint-xl)) {
-    .xl\:h-full { height: 100%; }
-    .xl\:h-auto { height: auto; }
-    .xl\:h-screen { height: 100vh; }
-    .xl\:h-1\/2 { height: 50%; }
-    .xl\:h-1\/3 { height: 33.333333%; }
-    .xl\:h-2\/3 { height: 66.666667%; }
-}
-
-/* Responsive Height - 2XL and up */
-@media (min-width: var(--breakpoint-2xl)) {
-    .2xl\:h-full { height: 100%; }
-    .2xl\:h-auto { height: auto; }
-    .2xl\:h-screen { height: 100vh; }
-    .2xl\:h-1\/2 { height: 50%; }
-    .2xl\:h-1\/3 { height: 33.333333%; }
-    .2xl\:h-2\/3 { height: 66.666667%; }
-}
-
-/* Border Utilities */
-.border { border: 1px solid var(--color-border-primary); }
-.border-t { border-top: 1px solid var(--color-border-primary); }
-.border-b { border-bottom: 1px solid var(--color-border-primary); }
-.border-l { border-left: 1px solid var(--color-border-primary); }
-.border-r { border-right: 1px solid var(--color-border-primary); }
-
-/* Text Alignment */
-.text-left { text-align: left; }
-.text-center { text-align: center; }
-.text-right { text-align: right; }
-.text-justify { text-align: justify; }
-
-/* =================================================================
-   RESPONSIVE LAYOUT MODIFIERS
-   ================================================================= */
-
-/* Responsive Display - Using Breakpoint Custom Properties */
-@media (min-width: var(--breakpoint-sm)) {
-    .sm\:block { display: block; }
-    .sm\:inline { display: inline; }
-    .sm\:inline-block { display: inline-block; }
-    .sm\:flex { display: flex; }
-    .sm\:none { display: none; }
-}
-
-@media (min-width: var(--breakpoint-md)) {
-    .md\:block { display: block; }
-    .md\:inline { display: inline; }
-    .md\:inline-block { display: inline-block; }
-    .md\:flex { display: flex; }
-    .md\:none { display: none; }
-}
-
-@media (min-width: var(--breakpoint-lg)) {
-    .lg\:block { display: block; }
-    .lg\:inline { display: inline; }
-    .lg\:inline-block { display: inline-block; }
-    .lg\:flex { display: flex; }
-    .lg\:none { display: none; }
-}
-
-@media (min-width: var(--breakpoint-xl)) {
-    .xl\:block { display: block; }
-    .xl\:inline { display: inline; }
-    .xl\:inline-block { display: inline-block; }
-    .xl\:flex { display: flex; }
-    .xl\:none { display: none; }
-}
-
-@media (min-width: var(--breakpoint-2xl)) {
-    .2xl\:block { display: block; }
-    .2xl\:inline { display: inline; }
-    .2xl\:inline-block { display: inline-block; }
-    .2xl\:flex { display: flex; }
-    .2xl\:none { display: none; }
-}
-
-/* Responsive Text Alignment - Using Breakpoint Custom Properties */
-@media (min-width: var(--breakpoint-sm)) {
-    .sm\:text-left { text-align: left; }
-    .sm\:text-center { text-align: center; }
-    .sm\:text-right { text-align: right; }
-}
-
-@media (min-width: var(--breakpoint-md)) {
-    .md\:text-left { text-align: left; }
-    .md\:text-center { text-align: center; }
-    .md\:text-right { text-align: right; }
-}
-
-@media (min-width: var(--breakpoint-lg)) {
-    .lg\:text-left { text-align: left; }
-    .lg\:text-center { text-align: center; }
-    .lg\:text-right { text-align: right; }
-}
-
-@media (min-width: var(--breakpoint-xl)) {
-    .xl\:text-left { text-align: left; }
-    .xl\:text-center { text-align: center; }
-    .xl\:text-right { text-align: right; }
-}
-
-@media (min-width: var(--breakpoint-2xl)) {
-    .2xl\:text-left { text-align: left; }
-    .2xl\:text-center { text-align: center; }
-    .2xl\:text-right { text-align: right; }
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
 }
 
 /* =================================================================
    FLEXBOX UTILITIES
    ================================================================= */
 
-/* Flex Direction */
-.flex-row { flex-direction: row; }
-.flex-row-reverse { flex-direction: row-reverse; }
-.flex-col { flex-direction: column; }
-.flex-col-reverse { flex-direction: column-reverse; }
+.flex {
+    display: flex;
+}
 
-/* Flex Wrap */
-.flex-wrap { flex-wrap: wrap; }
-.flex-nowrap { flex-wrap: nowrap; }
-.flex-wrap-reverse { flex-wrap: wrap-reverse; }
+.flex-col {
+    flex-direction: column;
+}
 
-/* Flex Items */
-.flex-1 { flex: 1 1 0%; }
-.flex-auto { flex: 1 1 auto; }
-.flex-initial { flex: 0 1 auto; }
-.flex-none { flex: none; }
+.items-center {
+    align-items: center;
+}
 
-/* Flex Grow and Shrink */
-.flex-grow { flex-grow: 1; }
-.flex-grow-0 { flex-grow: 0; }
-.flex-shrink { flex-shrink: 1; }
-.flex-shrink-0 { flex-shrink: 0; }
+.justify-center {
+    justify-content: center;
+}
 
-/* Justify Content */
-.justify-start { justify-content: start; }
-.justify-end { justify-content: end; }
-.justify-center { justify-content: center; }
-.justify-between { justify-content: space-between; }
-.justify-around { justify-content: space-around; }
-.justify-evenly { justify-content: space-evenly; }
+.justify-between {
+    justify-content: space-between;
+}
 
-/* Align Items */
-.items-start { align-items: start; }
-.items-end { align-items: end; }
-.items-center { align-items: center; }
-.items-baseline { align-items: baseline; }
-.items-stretch { align-items: stretch; }
+.gap-2 {
+    gap: var(--spacing-2);
+}
 
-/* Align Self */
-.self-auto { align-self: auto; }
-.self-start { align-self: start; }
-.self-end { align-self: end; }
-.self-center { align-self: center; }
-.self-stretch { align-self: stretch; }
-.self-baseline { align-self: baseline; }
+.gap-4 {
+    gap: var(--spacing-4);
+}
 
-/* Align Content */
-.content-start { align-content: start; }
-.content-end { align-content: end; }
-.content-center { align-content: center; }
-.content-between { align-content: space-between; }
-.content-around { align-content: space-around; }
-.content-stretch { align-content: stretch; }
+/* =================================================================
+   SPACING UTILITIES
+   ================================================================= */
+
+.p-4 {
+    padding: var(--spacing-4);
+}
+
+.px-4 {
+    padding-left: var(--spacing-4);
+    padding-right: var(--spacing-4);
+}
+
+.py-4 {
+    padding-top: var(--spacing-4);
+    padding-bottom: var(--spacing-4);
+}
+
+.m-4 {
+    margin: var(--spacing-4);
+}
+
+.mx-4 {
+    margin-left: var(--spacing-4);
+    margin-right: var(--spacing-4);
+}
+
+.my-4 {
+    margin-top: var(--spacing-4);
+    margin-bottom: var(--spacing-4);
+}
+
+/* =================================================================
+   TEXT UTILITIES
+   ================================================================= */
+
+.text-sm {
+    font-size: var(--font-size-sm);
+}
+
+.text-base {
+    font-size: var(--font-size-base);
+}
+
+.text-lg {
+    font-size: var(--font-size-lg);
+}
+
+.text-center {
+    text-align: center;
+}
+
+.font-semibold {
+    font-weight: var(--font-weight-semibold);
+}
+
+.font-bold {
+    font-weight: var(--font-weight-bold);
+}
+
+/* =================================================================
+   BACKGROUND UTILITIES
+   ================================================================= */
+
+.bg-primary {
+    background-color: var(--dodgers-blue-500);
+}
+
+.bg-secondary {
+    background-color: var(--dodgers-red-500);
+}
+
+.bg-accent {
+    background-color: var(--dodgers-gold-500);
+}
+
+/* =================================================================
+   COLOR UTILITY CLASSES
+   ================================================================= */
+
+.text-primary {
+    color: var(--text-primary);
+}
+
+.text-secondary {
+    color: var(--text-secondary);
+}
+
+.text-muted {
+    color: var(--text-muted);
+}
+
+.text-accent {
+    color: var(--dodgers-gold-500);
+}
+
+.text-error {
+    color: var(--dodgers-red-500);
+}
+
+.text-success {
+    color: var(--dodgers-blue-500);
+}
+
+/* =================================================================
+   BG-NEUTRAL UTILITIES
+   ================================================================= */
+
+.bg-white {
+    background-color: white;
+}
+
+.bg-black {
+    background-color: black;
+}
+
+.bg-gray-50 {
+    background-color: var(--gray-50);
+}
+
+.bg-gray-100 {
+    background-color: var(--gray-100);
+}
+
+.bg-gray-200 {
+    background-color: var(--gray-200);
+}
+
+.bg-gray-800 {
+    background-color: var(--gray-800);
+}
+
+.bg-gray-900 {
+    background-color: var(--gray-900);
+   MOBILE RESPONSIVE OVERRIDES
+   ================================================================= */
+
+@media (max-width: 768px) {
+    .chat-section {
+        width: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+        z-index: var(--z-modal);
+    }
+
+    .video-header {
+        padding: var(--spacing-3) var(--spacing-4);
+    }
+
+    .logo {
+        font-size: var(--font-size-base);
+    }
+
+    .stream-stats {
+        gap: var(--spacing-3);
+    }
+
+    .quality-selector {
+        display: none;
+    }
+}
diff --git a/static/css/variables.css b/static/css/variables.css
index 246ddc0..b163c6d 100644
--- a/static/css/variables.css
+++ b/static/css/variables.css
@@ -245,57 +245,24 @@
     --elevation-6: var(--shadow-dodgers-xl);
 
     /* =================================================================
-       BREAKPOINT VARIABLES - Comprehensive Responsive System
+       BREAKPOINT VARIABLES
        ================================================================= */
 
-    /* Mobile-first breakpoints (includes xs where content starts) */
-    --breakpoint-xs: 320px;    /* Extra small devices (320px and up) */
-    --breakpoint-sm: 640px;    /* Small devices (640px and up) */
-    --breakpoint-md: 768px;    /* Medium devices (768px and up) */
-    --breakpoint-lg: 1024px;   /* Large devices (1024px and up) */
-    --breakpoint-xl: 1280px;   /* Extra large devices (1280px and up) */
-    --breakpoint-2xl: 1536px;  /* 2X large devices (1536px and up) */
+    /* Mobile-first breakpoints */
+    --breakpoint-xs: 320px;
+    --breakpoint-sm: 640px;
+    --breakpoint-md: 768px;
+    --breakpoint-lg: 1024px;
+    --breakpoint-xl: 1280px;
+    --breakpoint-2xl: 1536px;
 
-    /* Container max-widths at each breakpoint */
-    --container-xs: 320px;
-    --container-sm: 640px;
-    --container-md: 768px;
-    --container-lg: 1024px;
-    --container-xl: 1280px;
-    --container-2xl: 1536px;
-
-    /* Content padding that scales with breakpoints */
-    --container-padding-xs: var(--spacing-2);
-    --container-padding-sm: var(--spacing-4);
-    --container-padding-md: var(--spacing-6);
-    --container-padding-lg: var(--spacing-8);
-    --container-padding-xl: var(--spacing-10);
-    --container-padding-2xl: var(--spacing-12);
-
-    /* =================================================================
-       BREAKPOINT MIXIN SYSTEM & UTILITIES
-       ================================================================= */
-
-    /* Media query helpers using custom properties */
-    --mq-xs: (min-width: var(--breakpoint-xs));
-    --mq-sm: (min-width: var(--breakpoint-sm));
-    --mq-md: (min-width: var(--breakpoint-md));
-    --mq-lg: (min-width: var(--breakpoint-lg));
-    --mq-xl: (min-width: var(--breakpoint-xl));
-    --mq-2xl: (min-width: var(--breakpoint-2xl));
-
-    /* Max-width media queries for desktop-first approach */
-    --mq-xs-max: (max-width: calc(var(--breakpoint-sm) - 1px));
-    --mq-sm-max: (max-width: calc(var(--breakpoint-md) - 1px));
-    --mq-md-max: (max-width: calc(var(--breakpoint-lg) - 1px));
-    --mq-lg-max: (max-width: calc(var(--breakpoint-xl) - 1px));
-    --mq-xl-max: (max-width: calc(var(--breakpoint-2xl) - 1px));
-
-    /* Combined breakpoint utilities */
-    --mq-sm-only: (min-width: var(--breakpoint-sm)) and (max-width: calc(var(--breakpoint-md) - 1px));
-    --mq-md-only: (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 1px));
-    --mq-lg-only: (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-xl) - 1px));
-    --mq-xl-only: (min-width: var(--breakpoint-xl)) and (max-width: calc(var(--breakpoint-2xl) - 1px));
+    /* Media query mixins (these will be used in component CSS) */
+    /* xs: 0px and up */
+    /* sm: 640px and up */
+    /* md: 768px and up */
+    /* lg: 1024px and up */
+    /* xl: 1280px and up */
+    /* 2xl: 1536px and up */
 
     /* =================================================================
        Z-INDEX SCALE
diff --git a/assets/js/api.js b/static/js/api.js
similarity index 100%
rename from assets/js/api.js
rename to static/js/api.js
diff --git a/assets/js/app.js b/static/js/app.js
similarity index 100%
rename from assets/js/app.js
rename to static/js/app.js
diff --git a/assets/js/chat.js b/static/js/chat.js
similarity index 100%
rename from assets/js/chat.js
rename to static/js/chat.js
diff --git a/assets/js/ui-controls.js b/static/js/ui-controls.js
similarity index 100%
rename from assets/js/ui-controls.js
rename to static/js/ui-controls.js
diff --git a/assets/js/video-player.js b/static/js/video-player.js
similarity index 100%
rename from assets/js/video-player.js
rename to static/js/video-player.js