:root {
   /* -----------------------------------------
     TV Safe Area
     ----------------------------------------- */

   --safe-x: 5vw;
   --safe-y: 5vh;

   /* -----------------------------------------
     Colors
     ----------------------------------------- */

   --background: #101216;
   --surface: #191c22;
   --surface-hover: #20242c;

   --text-primary: #ffffff;
   --text-secondary: #b7bec9;
   --text-muted: #7f8794;

   --border: rgba(255, 255, 255, 0.1);

   --success: #42d392;

   /* -----------------------------------------
     Responsive Spacing
     ----------------------------------------- */

   --space-xs: clamp(8px, 0.5vw, 16px);
   --space-sm: clamp(12px, 0.8vw, 24px);
   --space-md: clamp(20px, 1.5vw, 48px);
   --space-lg: clamp(28px, 2.5vw, 72px);
   --space-xl: clamp(40px, 4vw, 120px);

   /* -----------------------------------------
     Responsive Radius
     ----------------------------------------- */

   --radius-sm: clamp(8px, 0.5vw, 16px);
   --radius-md: clamp(12px, 0.8vw, 24px);
   --radius-lg: clamp(16px, 1vw, 32px);
}

body {
   display: flex;
   width: 100%;
   min-height: 100dvh;
   overflow: hidden;
}

#main {
   width: clamp(1920px, 100%, 3840px);
   min-height: 100%;
   transform-origin: center center;
   border: 1px solid red;
}