diff --git a/packages/react/react/src/skins/default/MediaSkinDefault.tsx b/packages/react/react/src/skins/default/MediaSkinDefault.tsx
index fd933e7a..4325cddd 100644
--- a/packages/react/react/src/skins/default/MediaSkinDefault.tsx
+++ b/packages/react/react/src/skins/default/MediaSkinDefault.tsx
@@ -19,7 +19,6 @@ import PlayButton from '../../components/PlayButton';
 import { TimeRange } from '../../components/TimeRange';
 import { VolumeRange } from '../../components/VolumeRange';
 import styles from './styles';
-import twStyles from './styles.module.css';
 
 type SkinProps = PropsWithChildren<{
   className?: string;
@@ -27,7 +26,7 @@ type SkinProps = PropsWithChildren<{
 
 export default function MediaSkinDefault({ children, className = '' }: SkinProps): JSX.Element {
   return (
-    <MediaContainer className={`${twStyles.Container} ${className}`}>
+    <MediaContainer className={`${styles.MediaContainer} ${className}`}>
       {children}
 
       {/* Background gradient to help with controls contrast. */}
diff --git a/packages/react/react/src/skins/default/styles.ts b/packages/react/react/src/skins/default/styles.ts
index 3f5cd18a..6a80186e 100644
--- a/packages/react/react/src/skins/default/styles.ts
+++ b/packages/react/react/src/skins/default/styles.ts
@@ -3,7 +3,7 @@
 // It just makes the billions of Tailwind classes a little easier to read.
 const cn = (...classes: (string | undefined)[]): string => classes.filter(Boolean).join(' ');
 
-export interface MediaSkinStyles {
+export interface MediaDefaultSkinStyles {
   readonly MediaContainer: string;
   readonly Overlay: string;
   readonly Controls: string;
@@ -32,7 +32,7 @@ export interface MediaSkinStyles {
   readonly VolumeRangeThumb: string;
 }
 
-const styles: MediaSkinStyles = {
+const styles: MediaDefaultSkinStyles = {
   MediaContainer: cn(
     'relative @container/root group/root overflow-clip',
     // Base typography