@instructure/studio-player 1.2.4 → 1.3.1

package/README.md

@@ -128,6 +128,7 @@ After one having correct credentials,
 
 This will download the translated content and put it in the correct folder. Feel free to upload to a branch and make a PR from it.
 
+
 ## E2E Testing
 
 1. **Setup**
@@ -152,3 +153,20 @@ This will download the translated content and put it in the correct folder. Feel
   development Storybook instance.
 - Highly recommended to install [Playwright VS Code](https://marketplace.visualstudio.com/items/?itemName=ms-playwright.playwright) extension,
   also check out [Getting started in VS Code](https://playwright.dev/docs/getting-started-vscode)
+
+
+## YouTube Education Player
+
+In order to use the YouTube Education Player, you need to provide an encrypted payload as `STORYBOOK_YOUTUBE_ENCRYPTED_PAYLOAD` in `.env` file.
+
+### Generating the Encrypted Payload
+1. In tweed `docker.compose.override.yml`, add the `YOUTUBE_EDUCATION_API_KEY` to "YouTube Education (Local)" key from 1password factory reset vault in api namespace.
+2. Enable `youtube_pf_edu` feature flag in tweed if you haven't done yet.
+3. After restarting the containers, you can generate the encrypted payload by running the following command in api rails console:
+   ```ruby
+    Account::Account.first.activate!
+    metadata = TweedMediaManagement::ExternalMetadata.from_url("<YOUTUBE_VIDEO_URL>")
+    media = TweedMediaManagement::Media.create!(user: User::User.first, external_metadata: metadata, title: "some title")
+    YoutubeEducationEncryptor.encrypt_embed_config(media)
+   ```
+4. Copy the generated encrypted payload and set it as `STORYBOOK_YOUTUBE_ENCRYPTED_PAYLOAD` in your `.env` file.

package/dist/StudioPlayer/StudioPlayer.d.ts

@@ -1,2 +1,2 @@
 import { StudioPlayerProps } from './StudioPlayer.types';
-export declare function StudioPlayer({ title, playerRef, src, captions, thumbnail, hideFullScreen, comments, locale, annotations, quizMarkers, interactive, onAnnotationClick, onQuizMarkerClick, onQuizMarkerShow, onInteractivePinClick, onCaptionsDelete, interactiveMenuElements, kebabMenuElements, darkMode, autoLoadCaptionSrc, forceComments, disableCaptionSettings, disableStorage, startAt, crossOrigin, captionOffsetOverride, disableInteractivePinRanges, customOverlay, controlsLayout, hideQuizMarkers, ytPfEduEncryptedPayload, }: StudioPlayerProps): import("react/jsx-runtime").JSX.Element;
+export declare function StudioPlayer({ title, playerRef, src, captions, thumbnail, hideFullScreen, comments, locale, annotations, quizMarkers, interactive, onAnnotationClick, onQuizMarkerClick, onQuizMarkerShow, onInteractivePinClick, onCaptionsDelete, interactiveMenuElements, kebabMenuElements, darkMode, autoLoadCaptionSrc, forceComments, disableCaptionSettings, disableStorage, startAt, crossOrigin, captionOffsetOverride, disableInteractivePinRanges, customOverlay, controlsLayout, hideQuizMarkers, ytPfEduEncryptedPayload, enableSidebar, }: StudioPlayerProps): import("react/jsx-runtime").JSX.Element;

package/dist/StudioPlayer/StudioPlayer.types.d.ts

@@ -43,4 +43,5 @@ export type StudioPlayerProps = {
     controlsLayout?: 'normal' | 'compact';
     hideQuizMarkers?: boolean;
     ytPfEduEncryptedPayload?: string;
+    enableSidebar?: boolean;
 };

package/dist/StudioPlayer/layouts/controls/ControlsLayout.d.ts

@@ -3,6 +3,6 @@ export type ControlsLayoutProps = {
     darkMode: Defined<StudioPlayerProps['darkMode']>;
     playerRef?: Defined<StudioPlayerProps['playerRef']>;
     controlsLayout: Defined<StudioPlayerProps['controlsLayout']>;
-    showCaptionsButton: Defined<StudioPlayerProps['disableCaptionSettings']>;
+    disableCaptionSettings: Defined<StudioPlayerProps['disableCaptionSettings']>;
 };
-export declare function ControlsLayout({ darkMode, playerRef, controlsLayout, showCaptionsButton, }: ControlsLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function ControlsLayout({ darkMode, playerRef, controlsLayout, disableCaptionSettings, }: ControlsLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/StudioPlayer/layouts/index.d.ts

@@ -1,3 +1,4 @@
 export * from './media/AudioLayout';
 export * from './media/VideoLayout';
 export * from './controls/ControlsLayout';
+export * from './main/MainLayout';

package/dist/StudioPlayer/layouts/main/MainLayout.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function MainLayout({ children }: PropsWithChildren<unknown>): import("react/jsx-runtime").JSX.Element;

package/dist/StudioPlayer/store/StudioPlayerMediaStorage.d.ts

@@ -1,5 +1,4 @@
 import { MediaStorage, Src } from '@vidstack/react';
-import { StudioPlayerState } from '../context';
 type StorageData = {
     volume: number;
     muted: boolean;
@@ -34,7 +33,12 @@ export declare class StudioPlayerMediaStorage implements MediaStorage {
     save(): void;
     saveTime: () => void;
     saveTimeThrottled: () => void;
-    initializeState: (startAt?: number) => StudioPlayerState;
+    initializeState: (startAt?: number) => {
+        captionsFontSizeMultiplier: number;
+        captionPositionOnTop: boolean;
+        captionsInvertColors: boolean;
+        commentsEnabled: boolean;
+    };
     saveData: <K extends keyof StorageData>(key: K, value: StorageData[K]) => void;
 }
 export {};

package/dist/StudioPlayer/storyUtils.d.ts

@@ -6,6 +6,7 @@ export declare const commonArgs: {
     thumbnail: string;
     locale: "en";
     disableStorage: boolean;
+    enableSidebar: boolean;
 };
 export declare const withDimensions: ({ width, height, }: {
     width?: number;

package/dist/StudioPlayer/useStudioPlayer.d.ts

@@ -1,7 +1,7 @@
 import { keyShortcuts } from './shortcuts';
 import { StudioPlayerContextType } from './context';
 import { StudioPlayerMediaStorage } from './store/StudioPlayerMediaStorage';
-export declare function useStudioPlayer(hideFullScreen: boolean, forceComments: boolean, disableCaptionSettings: boolean, startAt?: number): {
+export declare function useStudioPlayer(hideFullScreen: boolean, forceComments: boolean, disableStorage: boolean, startAt?: number): {
     contextValue: StudioPlayerContextType;
     shortcuts: typeof keyShortcuts;
     storage: StudioPlayerMediaStorage;

package/dist/StudioPlayer/utils/youtube/caption.d.ts

@@ -0,0 +1,3 @@
+import { CaptionMetaData } from '../../../types';
+export declare const mapYoutubeCaptionLanguageCodes: (captions: CaptionMetaData[]) => CaptionMetaData[];
+export declare const getYoutubeCaptionLanguageCode: (language: string | null) => string | null;

package/dist/StudioPlayer/utils/youtube/postMessage.d.ts

@@ -0,0 +1,3 @@
+import { MediaProviderAdapter } from '@vidstack/react';
+export declare function setCaptionLanguage(iframe: MediaProviderAdapter['iframe'], languageCode?: string | null): void;
+export declare function setCaptionFontSize(iframe: MediaProviderAdapter['iframe'], multiplier: number): void;

package/dist/{en-AyGO5HzS.js → en-BQ1k994-.js}

@@ -1,4 +1,4 @@
-const t = "Action", n = "Add annotation at {{time}}", o = "Add question at {{time}}", e = "Annotations", s = "Auto", c = "Auto ({{quality}})", E = "Back", A = "Captions", a = "Disable Captions", T = "Enable Captions", _ = "Caption Language", O = "Manage Captions", S = "Delete {{language}}", N = "Font Size", P = "Caption Language: {{language}}", C = "Close", L = "Comments", i = "Continue", u = "Decrease Playback Speed", I = "Decrease Volume by {{percent}}%", U = "Down Arrow", l = "Enter Fullscreen", R = "Exit Fullscreen", p = "Increase Playback Speed", r = "Increase Volume by {{percent}}%", D = "Invert Colors", M = "Jump to specific percentage (1-10%, 2-20%, etc)", g = "Jump to Start", d = "Actions for {{title}}", G = "Keyboard Shortcuts", m = "Language", y = "Left Arrow", B = "Main Menu", V = "Mute", b = "Muted", K = "Next Caption Language", Y = "Off", k = "On Top", F = "Open annotation at {{time}}", Q = "Open completed quiz at {{time}}", f = "Open quiz at {{time}}", w = "Pause", W = "Play", q = "Playback Speed", x = "Playback Speed: {{speed}}x", J = "Previous Caption Language", h = "Quality", v = "Quality Menu", z = "Replay", H = "Reset Playback Speed", Z = "Right Arrow", X = "Seek backward: {{seconds}} seconds", j = "Seek forward: {{seconds}} seconds", $ = "Settings", tt = "Shortcut", nt = "Space", ot = "Playback speed menu", et = "Toggle Captions", st = "Toggle Muted", ct = "Toggle Play/Pause", Et = "Up Arrow", At = "Video Settings", at = "Volume", Tt = "Volume: {{volume}}%", _t = {
+const t = "Action", n = "Add annotation at {{time}}", o = "Add question at {{time}}", e = "Annotations", s = "Auto", c = "Auto ({{quality}})", E = "Back", A = "Captions", a = "Disable Captions", T = "Enable Captions", O = "Caption Language", _ = "Manage Captions", S = "Delete {{language}}", N = "Font Size", P = "Caption Language: {{language}}", C = "Close", L = "Comments", i = "Continue", I = "Decrease Playback Speed", u = "Decrease Volume by {{percent}}%", U = "Down Arrow", l = "Enter Fullscreen", R = "Exit Fullscreen", p = "Increase Playback Speed", r = "Increase Volume by {{percent}}%", D = "Invert Colors", M = "Jump to specific percentage (1-10%, 2-20%, etc)", d = "Jump to Start", g = "Actions for {{title}}", G = "Keyboard Shortcuts", m = "Language", y = "Left Arrow", B = "Main Menu", b = "Mute", V = "Muted", K = "Next Caption Language", Y = "Off", k = "On Top", F = "Open annotation at {{time}}", Q = "Open completed quiz at {{time}}", f = "Open quiz at {{time}}", w = "Pause", W = "Play", q = "Playback Speed", x = "Playback Speed: {{speed}}x", J = "Previous Caption Language", h = "Quality", v = "Quality Menu", z = "Replay", H = "Reset Playback Speed", Z = "Right Arrow", X = "Seek backward: {{seconds}} seconds", j = "Seek forward: {{seconds}} seconds", $ = "Settings", tt = "Shortcut", nt = "Close Sidebar", ot = "Open Sidebar", et = "Space", st = "Playback speed menu", ct = "Toggle Captions", Et = "Toggle Muted", At = "Toggle Play/Pause", at = "Up Arrow", Tt = "Video Settings", Ot = "Volume", _t = "Volume: {{volume}}%", St = {
   ACTION: t,
   ADD_ANNOTATION_AT: n,
   ADD_QUESTION_AT: o,
@@ -9,16 +9,16 @@ const t = "Action", n = "Add annotation at {{time}}", o = "Add question at {{tim
   CAPTIONS: A,
   CAPTIONS_DISABLE: a,
   CAPTIONS_ENABLE: T,
-  CAPTIONS_LANGUAGE: _,
-  CAPTIONS_MANAGE: O,
+  CAPTIONS_LANGUAGE: O,
+  CAPTIONS_MANAGE: _,
   CAPTION_DELETE: S,
   CAPTION_FONT_SIZE: N,
   CAPTION_LANGUAGE: P,
   CLOSE: C,
   COMMENTS: L,
   CONTINUE: i,
-  DECREASE_PLAYBACK_SPEED: u,
-  DECREASE_VOLUME: I,
+  DECREASE_PLAYBACK_SPEED: I,
+  DECREASE_VOLUME: u,
   DOWN_ARROW: U,
   ENTER_FULLSCREEN: l,
   EXIT_FULLSCREEN: R,
@@ -26,14 +26,14 @@ const t = "Action", n = "Add annotation at {{time}}", o = "Add question at {{tim
   INCREASE_VOLUME: r,
   INVERT_COLORS: D,
   JUMP_TO_PERCENTAGE: M,
-  JUMP_TO_START: g,
-  KEBAB_MENU: d,
+  JUMP_TO_START: d,
+  KEBAB_MENU: g,
   KEYBOARD_SHORTCUTS: G,
   LANGUAGE: m,
   LEFT_ARROW: y,
   MAIN_MENU: B,
-  MUTE: V,
-  MUTED: b,
+  MUTE: b,
+  MUTED: V,
   NEXT_CAPTION_LANGUAGE: K,
   OFF: Y,
   ON_TOP: k,
@@ -54,15 +54,17 @@ const t = "Action", n = "Add annotation at {{time}}", o = "Add question at {{tim
   SEEK_FORWARD: j,
   SETTINGS: $,
   SHORTCUT: tt,
-  SPACE: nt,
-  SPEED_MENU: ot,
-  TOGGLE_CAPTIONS: et,
-  TOGGLE_MUTED: st,
-  TOGGLE_PLAY_PAUSE: ct,
-  UP_ARROW: Et,
-  VIDEO_SETTINGS: At,
-  VOLUME: at,
-  VOLUME_VALUE: Tt
+  SIDEBAR_CLOSE: nt,
+  SIDEBAR_OPEN: ot,
+  SPACE: et,
+  SPEED_MENU: st,
+  TOGGLE_CAPTIONS: ct,
+  TOGGLE_MUTED: Et,
+  TOGGLE_PLAY_PAUSE: At,
+  UP_ARROW: at,
+  VIDEO_SETTINGS: Tt,
+  VOLUME: Ot,
+  VOLUME_VALUE: _t
 };
 export {
   t as ACTION,
@@ -75,16 +77,16 @@ export {
   A as CAPTIONS,
   a as CAPTIONS_DISABLE,
   T as CAPTIONS_ENABLE,
-  _ as CAPTIONS_LANGUAGE,
-  O as CAPTIONS_MANAGE,
+  O as CAPTIONS_LANGUAGE,
+  _ as CAPTIONS_MANAGE,
   S as CAPTION_DELETE,
   N as CAPTION_FONT_SIZE,
   P as CAPTION_LANGUAGE,
   C as CLOSE,
   L as COMMENTS,
   i as CONTINUE,
-  u as DECREASE_PLAYBACK_SPEED,
-  I as DECREASE_VOLUME,
+  I as DECREASE_PLAYBACK_SPEED,
+  u as DECREASE_VOLUME,
   U as DOWN_ARROW,
   l as ENTER_FULLSCREEN,
   R as EXIT_FULLSCREEN,
@@ -92,14 +94,14 @@ export {
   r as INCREASE_VOLUME,
   D as INVERT_COLORS,
   M as JUMP_TO_PERCENTAGE,
-  g as JUMP_TO_START,
-  d as KEBAB_MENU,
+  d as JUMP_TO_START,
+  g as KEBAB_MENU,
   G as KEYBOARD_SHORTCUTS,
   m as LANGUAGE,
   y as LEFT_ARROW,
   B as MAIN_MENU,
-  V as MUTE,
-  b as MUTED,
+  b as MUTE,
+  V as MUTED,
   K as NEXT_CAPTION_LANGUAGE,
   Y as OFF,
   k as ON_TOP,
@@ -120,14 +122,16 @@ export {
   j as SEEK_FORWARD,
   $ as SETTINGS,
   tt as SHORTCUT,
-  nt as SPACE,
-  ot as SPEED_MENU,
-  et as TOGGLE_CAPTIONS,
-  st as TOGGLE_MUTED,
-  ct as TOGGLE_PLAY_PAUSE,
-  Et as UP_ARROW,
-  At as VIDEO_SETTINGS,
-  at as VOLUME,
-  Tt as VOLUME_VALUE,
-  _t as default
+  nt as SIDEBAR_CLOSE,
+  ot as SIDEBAR_OPEN,
+  et as SPACE,
+  st as SPEED_MENU,
+  ct as TOGGLE_CAPTIONS,
+  Et as TOGGLE_MUTED,
+  At as TOGGLE_PLAY_PAUSE,
+  at as UP_ARROW,
+  Tt as VIDEO_SETTINGS,
+  Ot as VOLUME,
+  _t as VOLUME_VALUE,
+  St as default
 };

package/dist/index-DCgbkzO4.css

@@ -0,0 +1 @@
+._annotation-overlay_1kxzn_1{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-user-select:none;user-select:none;z-index:1;background-color:#000c;display:flex;flex-direction:column;justify-content:center;align-items:center}._media-buffering-indicator_1fwjr_1{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;z-index:1;background-color:#00000080;transition:opacity .2s ease}[data-media-player][data-buffering] ._media-buffering-spinner_1fwjr_17{pointer-events:none;animation:_media-buffering-spin_1fwjr_17 1s linear infinite}._media-buffering-track_1fwjr_22{color:#f5f5f5;opacity:.25}._media-buffering-track-fill_1fwjr_27{color:var(--media-brand, #f5f5f5);opacity:.75}[data-media-player][data-buffering] ._media-buffering-indicator_1fwjr_1{opacity:1}@keyframes _media-buffering-spin_1fwjr_17{to{transform:rotate(360deg)}}._controls-overlay_1hs9n_1{display:flex;position:absolute;gap:.5rem;padding:1rem;top:0;right:0;bottom:0;left:0;justify-content:end;pointer-events:none}._keyboard-shortcuts-overlay_1hs9n_11{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000000b3;color:#fff;padding:1.5rem;-webkit-user-select:none;user-select:none;overflow-y:auto;display:flex;flex-direction:column;align-items:center;z-index:1}._keyboard-shortcuts-overlay_1hs9n_11 header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}:is(._keyboard-shortcuts-overlay_1hs9n_11 header) h2{font-size:1rem;font-weight:500;margin:0}@container player (width > 400px) and (height > 300px){:is(._keyboard-shortcuts-overlay_1hs9n_11 header) h2{font-size:1.5rem}}._keyboard-shortcuts-overlay_1hs9n_11 table{width:100%;max-width:54rem;padding:0;border-collapse:collapse}@container player (width > 400px) and (height > 300px){._keyboard-shortcuts-overlay_1hs9n_11 table{padding:2rem}}:is(._keyboard-shortcuts-overlay_1hs9n_11 table) tr{border-bottom:1px solid rgba(232 234 236 / .2)}:is(._keyboard-shortcuts-overlay_1hs9n_11 table) tbody tr:last-child{border-bottom:none}:is(._keyboard-shortcuts-overlay_1hs9n_11 table) th,:is(._keyboard-shortcuts-overlay_1hs9n_11 table) td{text-align:left;font-size:.75rem;line-height:1.5}@container player (width > 400px) and (height > 300px){:is(._keyboard-shortcuts-overlay_1hs9n_11 table) th,:is(._keyboard-shortcuts-overlay_1hs9n_11 table) td{font-size:.875rem}}@container player (width >= 720px) and (height > 300px){:is(._keyboard-shortcuts-overlay_1hs9n_11 table) th,:is(._keyboard-shortcuts-overlay_1hs9n_11 table) td{font-size:1rem}}._keyboard-shortcuts-overlay_1hs9n_11 ._screen-reader-content_1hs9n_76{width:.0625rem;height:.0625rem;margin:-.0625rem;padding:0;position:absolute;top:0;inset-inline-start:0;overflow:hidden;clip:rect(0 0 0 0);border:0}._controls-button_1hs9n_90{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-2);border:1px solid #d7dade;background:var(--controls-layout-bg-color)}._controls-button_1hs9n_90:focus-visible{outline:var(--focus-ring)}._keyboard-shortcuts-button_1hs9n_106{opacity:0;margin-right:auto}._keyboard-shortcuts-button_1hs9n_106:focus-visible{opacity:1;pointer-events:auto}._kebab-menu-button_1hs9n_116{opacity:1;pointer-events:auto;transition:opacity;transition-duration:0s;transition-timing-function:linear;transition-delay:0s;cursor:pointer;color:inherit}._kebab-menu-button_1hs9n_116 svg{flex-shrink:0}._kebab-menu-button_1hs9n_116:hover{background-color:var(--media-button-icon-hover-color, #e0e0e0)}._kebab-menu_1hs9n_116{display:flex;flex-direction:column;min-width:200px;pointer-events:auto;background-color:var(--settings-menu-bg-color, white);border-radius:var(--radius-2);padding-top:.25rem;padding-bottom:.25rem;z-index:1000;filter:drop-shadow(0 .125rem .1875rem rgba(0 0 0 / .5))}._kebab-menu-item_1hs9n_150{font-family:inherit;font-size:1rem;height:36px;text-rendering:geometricprecision;display:flex;align-items:center;gap:.5rem;padding:0 11px;border:none;outline:none;background-color:transparent;cursor:pointer;color:inherit;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._kebab-menu-item_1hs9n_150:hover,._kebab-menu-item_1hs9n_150:focus{color:var(--settings-media-hover-color, white);background-color:var(--settings-media-hover-bg-color, rgb(43 122 188))}[data-media-player][data-playing]:not([data-hover]) ._kebab-menu-button_1hs9n_116:not(:focus-visible,[aria-expanded=true]),[data-media-player][data-fullscreen][data-playing]:not([data-controls]) ._kebab-menu-button_1hs9n_116:not(:focus-visible,[aria-expanded=true]){opacity:0;transition-duration:.2s}._close-button_1hs9n_189{background-color:transparent;border:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;width:2.25rem;height:2.25rem}._arrow_1hs9n_203{fill:#fff}._captions_guhpx_1{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:var(--captions-flex-direction, column);align-items:center;padding:var(--spacing-3);transition:padding-bottom .1s ease-in-out;transition-delay:.3s}[data-fullscreen][data-controls]:not(:has([data-pins])) ._captions_guhpx_1{transition-delay:0s;padding-bottom:calc(var(--spacing-3) + var(--captions-fullscreen-offset))}._captions_guhpx_1[aria-hidden=true]{display:none}._captions_guhpx_1 [data-part=cue]{color:var(--captions-color, white);text-align:center;max-width:50ch;line-height:1.5;font-size:calc(clamp(.875rem,4cqh,2rem) * var(--captions-font-size-multiplier, 1));padding:0 var(--spacing-2);background-color:var(--captions-background-color, rgba(22 22 22 / .75));border-radius:var(--radius-2);white-space:pre-wrap}._comments-overlay_z1669_1{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--spacing-3);display:flex;align-items:end;pointer-events:none;transition:padding .1s ease-in-out;transition-delay:0s}._comments-container_z1669_12{display:flex;flex-direction:column;gap:.25rem;width:15rem;margin-right:3.4375rem}@container player (width >= 460px){._comments-container_z1669_12{width:23.4375rem}}@media (hover: none) and (orientation: portrait) and (max-width: 720px){[data-fullscreen] ._comments-overlay_z1669_1{justify-content:end}}[data-fullscreen][data-controls]:not(:has([data-pins])) ._comments-overlay_z1669_1{padding-bottom:calc(var(--spacing-3) + var(--comments-fullscreen-offset));transition-delay:.3s}._comment_z1669_1{display:grid;grid-template-areas:"avatar text";grid-template-columns:auto 1fr;align-items:center;padding:var(--spacing-1);gap:var(--spacing-1);border-radius:var(--radius-2);background-color:var(--comments-background-color);cursor:pointer;border:1px solid #666;pointer-events:auto}@container player (height > 540px){._comment_z1669_1{grid-template-areas:"text text" "avatar name"}}._comment-text_z1669_55{grid-area:text;color:var(--comments-color);font-size:var(--comments-font-size-small);line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;-webkit-user-select:none;user-select:none}@container player (height >= 400px){._comment-text_z1669_55{-webkit-line-clamp:2;line-clamp:2;font-size:var(--comments-font-size-large)}}._comment-author-avatar_z1669_75{grid-area:avatar;box-sizing:border-box;display:inline-block;object-fit:cover;width:var(--comments-avatar-size-xss);height:var(--comments-avatar-size-xss);border-radius:50%;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:#fff;contain:paint}@container player (height >= 400px){._comment-author-avatar_z1669_75{width:var(--comments-avatar-size-s);height:var(--comments-avatar-size-s)}}@container player (height > 540px){._comment-author-avatar_z1669_75{width:var(--comments-avatar-size-xs);height:var(--comments-avatar-size-xs)}}._comment-author-name_z1669_99{grid-area:name;color:var(--comments-author-color);font-size:var(--comments-font-size-large);font-weight:700;line-height:1.5;display:none}@container player (height > 540px){._comment-author-name_z1669_99{display:inline}}._settings-menu_1iutx_1{display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem;background-color:var(--settings-menu-bg-color, white);padding-top:.25rem;padding-bottom:.25rem;border-radius:var(--radius-2);width:294px;z-index:1000;overflow:auto;max-height:80%;filter:drop-shadow(0 .125rem .1875rem rgba(0 0 0 / .5))}._settings-menu_1iutx_1:focus-visible{outline:2px solid var(--settings-menu-focus-color, #0078d4)}@container player (width > 400px) and (height > 300px){._settings-menu_1iutx_1{font-size:1rem;line-height:1.5rem}}@container player (height <= 300px){._settings-menu_1iutx_1{max-height:calc(100% - 56px)}}@container player (width < 300px){._settings-menu_1iutx_1{max-width:calc(100% - 8px)}}._menu-heading_1iutx_37{display:block;margin:0 var(--spacing-2);padding-top:var(--spacing-2);padding-bottom:.5625rem;border-bottom:.0625rem solid #c7cdd1;font-weight:700}._check-icon_1iutx_48,._trash-icon_1iutx_49{width:1.25rem;height:1.25rem}._check-icon_1iutx_48{visibility:hidden}._trash-icon_1iutx_49{color:var(--warning-color)}._menu-item-multiline-label-wrapper_1iutx_62{display:flex;flex-direction:column;text-align:start}._menu-item-secondary-label_1iutx_68{display:block;color:var(--secondary-text-color);font-size:.875rem}._menu-item-label_1iutx_74{display:block}._menu-item_1iutx_62{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;outline:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;padding:6px 11px;gap:var(--spacing-2);cursor:pointer;font-size:inherit;line-height:inherit;font-family:inherit;color:inherit}._menu-item_1iutx_62:hover,._menu-item_1iutx_62:focus-visible{color:var(--settings-media-hover-color, white);background-color:var(--settings-media-hover-bg-color, rgb(43 122 188))}:is(._menu-item_1iutx_62:hover,._menu-item_1iutx_62:focus-visible) ._trash-icon_1iutx_49{color:var(--settings-media-hover-color)}._menu-item_1iutx_62[aria-checked=true] ._check-icon_1iutx_48{visibility:visible}._menu-item_1iutx_62:hover ._menu-item-secondary-label_1iutx_68{color:var(--secondary-text-hover-color)}._menu-back-button_1iutx_115{display:flex;align-items:center;gap:var(--spacing-1);padding:6px 11px;color:var(--settings-submenu-color, #2d3b45);font-size:inherit;line-height:inherit;font-family:inherit;cursor:pointer;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;outline:none;border:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._menu-back-button_1iutx_115:hover,._menu-back-button_1iutx_115:focus{color:var(--settings-media-hover-color, white);background-color:var(--settings-media-hover-bg-color, rgb(43 122 188))}._arrow_1iutx_141{fill:#fff}._menu-hint_1wiu5_1{color:var(--settings-media-submenu-hint-color, #9ea6ad)}._menu-button_1wiu5_5{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-1);padding:.375rem .6875rem;color:var(--settings-submenu-color, #2d3b45);font-size:inherit;line-height:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;outline:none;border:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-family:inherit}._menu-button_1wiu5_5:hover,._menu-button_1wiu5_5:focus{color:var(--settings-media-hover-color, white);background-color:var(--settings-media-hover-bg-color, rgb(43 122 188))}._menu-button_1wiu5_5:hover ._menu-hint_1wiu5_1,._menu-button_1wiu5_5:focus ._menu-hint_1wiu5_1{color:var(--settings-media-hover-color, white)}._menu-label_1wiu5_37{flex-grow:1;text-align:left}._menu-icon_1wiu5_42{width:1.125rem;height:1.125rem}._switch-track_7nhpo_1{position:relative;background-color:#e8e8e8;width:2.625rem;height:1.75rem;border-radius:.875rem;will-change:background-color;transition:background-color .2s;box-shadow:#d7dade 0 0 0 .0625rem inset;margin:-.25rem 0}@container player (width > 400px) and (height > 300px){._switch-track_7nhpo_1{margin:-.125rem 0}}._switch-thumb_7nhpo_17{background-color:#fff;width:1.5rem;height:1.5rem;border-radius:.75rem;transform:translate(.125rem,.125rem);box-shadow:#e8eaec 0 0 0 .0625rem inset;will-change:transform;transition:transform .2s;display:flex;align-items:center;justify-content:center}._switch-icon_7nhpo_31{width:.875rem;height:.875rem;color:var(--settings-submenu-color)}._switch-body_7nhpo_37{display:flex;align-items:center;border:none;background-color:transparent;text-align:left;font-family:inherit;gap:var(--spacing-1);padding:.375rem .6875rem;color:var(--settings-submenu-color);font-size:inherit;line-height:inherit;cursor:pointer;outline:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._switch-body_7nhpo_37[aria-checked=true] ._switch-track_7nhpo_1{background-color:#03893d}._switch-body_7nhpo_37[aria-checked=true] ._switch-icon_7nhpo_31{color:#03893d}._switch-body_7nhpo_37[aria-checked=true] ._switch-thumb_7nhpo_17{transform:translate(1rem,.125rem)}._switch-body_7nhpo_37:hover,._switch-body_7nhpo_37:focus-visible{color:var(--settings-media-hover-color);background-color:var(--settings-media-hover-bg-color)}[aria-checked=true]:is(._switch-body_7nhpo_37:hover,._switch-body_7nhpo_37:focus-visible) ._switch-track_7nhpo_1{background-color:#e8e8e8}._switch-label_7nhpo_78{flex-grow:1}._menu-icon_7nhpo_82{width:1.125rem;height:1.125rem}._feedback-overlay_14jdq_1{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;padding:var(--spacing-4);flex-direction:column;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;pointer-events:none}._feedback-message_14jdq_14{font-weight:300;position:absolute;top:10%;display:flex;justify-content:center;align-items:center;padding:var(--spacing-2);background-color:var(--feedback-message-bg-color, black);color:var(--feedback-message-color, white);border-radius:var(--radius-2);font-size:1rem;line-height:1.5;opacity:.75}._feedback-icon_14jdq_30{box-sizing:border-box;display:inline-flex;color:var(--feedback-icon-color, white);padding:var(--spacing-3);width:4.5rem;height:4.5rem;background-color:var(--feedback-icon-bg-color, black);border-radius:var(--radius-rounded);animation:_feedback-icon-animation_14jdq_1 .2s linear;animation-fill-mode:forwards;will-change:transform,opacity}._feedback-icon_14jdq_30:has(.right){align-self:end}._feedback-icon_14jdq_30:has(.left){align-self:start}._feedback-icon_14jdq_30>svg{width:100%;height:100%}@keyframes _feedback-icon-animation_14jdq_1{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:.5}}@media (max-width: 425px){[data-fullscreen] ._full-screen-button_1xm32_2{display:none}}[data-media-player][data-view-type=audio] ._full-screen-button_1xm32_2{display:none}._gestures-container_1fn3b_1{display:contents}._gesture_1fn3b_1{position:absolute;top:0;right:0;bottom:0;left:0}[data-fullscreen] ._gesture_1fn3b_1{top:3.625rem}button._play-pause-button_vj8da_1{border:none;background:none}@keyframes _appear_13a1y_1{0%{width:0;margin-left:0}to{width:400px;margin-left:1.5rem}}._studio-player-sidebar_13a1y_13{width:400px;margin-left:1.5rem;display:flex;align-items:center;justify-content:center;overflow-y:auto;border-radius:var(--radius-3);border:1px solid var(--sidebar-border-color);background:var(--settings-menu-bg-color);animation:_appear_13a1y_1 .3s ease-out;transition:width .3s ease-out,margin-left .3s ease-out}._studio-player-sidebar_13a1y_13[data-open=false]{width:0;margin-left:0}._small-layout-overlay_cmaq3_1{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;visibility:hidden;align-items:center;justify-content:center}@container player (max-width: 425px){._small-layout-overlay_cmaq3_1{visibility:visible}}._small-layout-button_cmaq3_14{width:5rem;height:5rem;background-color:#1616164d;display:flex;align-items:center;justify-content:center;border-radius:50%}._small-layout-icon-play_cmaq3_24,._small-layout-icon-pause_cmaq3_30{width:3rem;height:3rem;color:#fff}._small-layout-timestamp_cmaq3_36{position:absolute;left:0;bottom:0;margin:.5rem;display:flex;background:#000c;color:#fff;padding:.375rem .75rem;border-radius:var(--radius-2)}._full-screen-close-icon_cmaq3_49{display:none}[data-fullscreen] ._full-screen-close-icon_cmaq3_49{background-color:transparent;border:none;display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;padding:1.25rem;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none}[data-fullscreen][data-playing] ._full-screen-close-icon_cmaq3_49,[data-media-player][data-playing] ._small-layout-button_cmaq3_14,[data-media-player][data-playing] ._small-layout-timestamp_cmaq3_36{animation:_fade-out_cmaq3_1 1s;animation-delay:.5s;animation-fill-mode:forwards}@keyframes _fade-out_cmaq3_1{0%{opacity:1}to{opacity:0}}._time-indicator_1uygf_1{display:flex;color:#586874;-webkit-user-select:none;user-select:none}[data-fullscreen] ._time-indicator_1uygf_1,[data-darkmode=true] ._time-indicator_1uygf_1{color:#fff}._comment-markers_2yz4f_1{display:flex;position:relative;width:100%;height:.375rem;-webkit-user-select:none;user-select:none;pointer-events:none;margin-top:.375rem}._comment-marker_2yz4f_1{position:absolute;height:100%;width:.375rem;background-color:var(--comments-indicator-color);border-radius:50%}[data-darkmode=true] ._comment-marker_2yz4f_1,[data-fullscreen] ._comment-marker_2yz4f_1{background-color:var(--comments-indicator-color-darkmode)}._timeline-wrapper_2yz4f_24,._timeline-wrapper-compact_2yz4f_25{position:relative;display:flex;flex-direction:column;align-items:center;grid-area:slider}._timeline-wrapper_2yz4f_24{padding:0 var(--spacing-1)}._timeline-wrapper-compact_2yz4f_25{padding:0 var(--spacing-3)}._timeline-wrapper-compact_2yz4f_25:has(._comment-markers_2yz4f_1){margin-top:-.375rem}._timeline-wrapper-compact_2yz4f_25 ._comment-markers_2yz4f_1{margin-top:0}@container player (width > 400px) and (height > 300px){._timeline-wrapper-compact_2yz4f_25{padding:0 var(--spacing-3)}}._track_2yz4f_53{width:100%;height:.25rem;will-change:height;position:relative;background-color:var(--timeline-track-bg-color, #ccd0d2);border-radius:var(--radius-1);contain:strict;transition:height .15s,border-radius .15s}._thumb_2yz4f_66{position:absolute;width:1.125rem;height:1.125rem;background-color:var(--timeline-thumb-color, #2b7abc);border-radius:var(--radius-rounded);cursor:pointer;opacity:0;transform:translate(-50%) translateZ(0);transition:opacity .15s ease-in;left:var(--slider-fill);will-change:left}._root_2yz4f_80{display:inline-flex;width:100%;height:1.25rem;position:relative;align-items:center;contain:layout style;outline:none;cursor:pointer;user-select:none;touch-action:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._root_2yz4f_80[data-active] ._track_2yz4f_53{border-radius:var(--radius-2);height:.625rem}._root_2yz4f_80[data-focus] ._track_2yz4f_53{outline:var(--focus-ring);outline-offset:1px;border-radius:2px}._root_2yz4f_80[data-active] ._thumb_2yz4f_66{opacity:1}._track-inner_2yz4f_110{position:absolute;will-change:width;height:100%}._progress_2yz4f_116{z-index:0;width:var(--slider-progress, 0%);background-color:var(--timeline-track-progress-bg-color, #adb2b6)}._track-fill_2yz4f_122{z-index:1;width:var(--slider-fill, 0%);background-color:var(--timeline-track-fill-bg-color, #2b7abc)}:is([data-fullscreen] ._root_2yz4f_80,[data-darkmode=true] ._root_2yz4f_80) ._track_2yz4f_53{background-color:#333}:is([data-fullscreen] ._root_2yz4f_80,[data-darkmode=true] ._root_2yz4f_80) ._progress_2yz4f_116{background-color:#666}._pins_2yz4f_139{display:flex;position:relative;height:2rem;width:100%;-webkit-user-select:none;user-select:none;margin-top:.25rem}._pin-button_2yz4f_148{display:flex;background-color:transparent;border:none;padding:0;position:absolute;transform:translate(-50%);cursor:pointer;transition:transform .2s ease-out;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._pin-button_2yz4f_148:hover,._pin-button_2yz4f_148:focus-visible{transform:translate(-50%) scale(1.25);z-index:1}._pin-button_2yz4f_148:focus-visible{outline:var(--focus-ring);border-radius:var(--radius-2)}._annotation-pin_2yz4f_174{fill:var(--pin-color-1);stroke:var(--pin-color-2)}._annotation-pin_2yz4f_174:focus-visible{outline:var(--focus-ring)}._quiz-pin_2yz4f_183{fill:var(--pin-color-2);stroke:var(--controls-layout-bg-color)}._quiz-pin_2yz4f_183:focus-visible{outline:var(--focus-ring)}._annotation-pin-child_2yz4f_192{fill:var(--pin-color-3)}._quiz-pin-child_2yz4f_196{fill:#fff;font-size:.875rem}._interactive-pin-container_2yz4f_201{position:absolute;top:0;right:0;bottom:0;left:0;padding:0 var(--spacing-2);pointer-events:none}._interactive-pin-wrapper_2yz4f_208{position:relative;width:100%;height:100%}._interactive-pin-icon_2yz4f_214{transform-box:fill-box;transform-origin:center;transition:transform .2s ease-out}._interactive-pin-icon_2yz4f_214[data-open=true]{transform:rotate(45deg)}._interactive-pin_2yz4f_201{filter:drop-shadow(0 3px 6px rgba(0 0 0 / .16)) drop-shadow(0 3px 6px rgba(0 0 0 / .1))}._interactive-pin_2yz4f_201>._bg_2yz4f_228{fill:var(--timeline-thumb-color)}._interactive-pin_2yz4f_201>._symbol_2yz4f_232{stroke:var(--controls-layout-bg-color)}._interactive-pin-button_2yz4f_237{position:absolute;cursor:pointer;transform:translate(-50%);background-color:transparent;border:none;padding:0;display:flex;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;pointer-events:auto;top:-8px}:is(._interactive-pin-button_2yz4f_237:hover,._interactive-pin-button_2yz4f_237:focus-visible) ._interactive-pin_2yz4f_201>._bg_2yz4f_228{fill:#225f92}._interactive-pin-button_2yz4f_237:focus-visible{outline:var(--focus-ring);border-radius:var(--radius-2)}._interactive-pin-menu_2yz4f_266{box-sizing:border-box;display:flex;flex-direction:column;gap:.25rem;background-color:var(--settings-menu-bg-color, white);padding:.75rem .5rem;border-radius:var(--radius-2);width:200px;z-index:1000;pointer-events:auto;filter:drop-shadow(0 .125rem .1875rem rgba(0 0 0 / .5))}._interactive-pin-menu_2yz4f_266:focus-visible{outline:var(--focus-ring)}._interactive-pin-menu-item_2yz4f_287{-webkit-user-select:none;user-select:none;font-family:inherit;font-size:1rem;text-rendering:geometricprecision;display:flex;align-items:center;gap:.25rem;color:var(--pin-color-3);padding:.375rem .625rem;border-radius:var(--radius-2);border:1px solid #d7dade;background-color:var(--pin-color-1);cursor:pointer}._interactive-pin-menu-item_2yz4f_287:hover{background-color:#e8eaec}._interactive-pin-menu-item_2yz4f_287:focus-visible{outline:var(--focus-ring)}._arrow_2yz4f_313{fill:#fff}._tooltip_2yz4f_317{background-color:var(--tooltip-bg-color);color:#fff;padding:.375rem .75rem;border-radius:var(--radius-2);font-size:.875rem;pointer-events:none}._tooltip-arrow_2yz4f_326{fill:var(--tooltip-bg-color)}._wrapper_trdhg_1{display:flex;align-items:center}._track_trdhg_6{width:100%;height:.25rem;will-change:height;background-color:var(--volume-track-bg-color, #ccd0d2);border-radius:var(--radius-1);contain:strict;transition:height .15s,border-radius .15s}._thumb_trdhg_18{position:absolute;width:.875rem;height:.875rem;background-color:var(--volume-thumb-bg-color, #2d3b45);border-radius:var(--radius-rounded);cursor:pointer;opacity:0;transform:translate(-50%) translateZ(0);transition:opacity .15s ease-in;left:var(--slider-fill);will-change:left}._track-fill_trdhg_32{width:var(--slider-fill, 0%);will-change:width;height:100%;background-color:var(--volume-track-fill-bg-color, #2d3b45)}:is([data-fullscreen],[data-darkmode=true]) ._track_trdhg_6{background-color:#666}:is([data-fullscreen],[data-darkmode=true]) ._track-fill_trdhg_32,:is([data-fullscreen],[data-darkmode=true]) ._thumb_trdhg_18{background-color:#f5f5f5}._root_trdhg_51{display:inline-flex;height:1.25rem;align-items:center;contain:layout style;cursor:pointer;user-select:none;touch-action:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:0;will-change:width,margin;transition:all .15s;box-sizing:border-box}@media (max-width: 425px) and (hover: none){._root_trdhg_51{display:none}}._root_trdhg_51[data-active] ._track_trdhg_6{border-radius:.125rem;height:.3125rem}._root_trdhg_51[data-focus]{outline:none}._root_trdhg_51[data-focus] ._track_trdhg_6{outline:var(--focus-ring);outline-offset:1px;border-radius:2px}._root_trdhg_51[data-active] ._thumb_trdhg_18{opacity:1}._wrapper_trdhg_1:hover [data-media-volume-slider],[data-media-volume-slider][data-active]{margin-left:.5rem;width:4rem}._root_narhv_1{background-color:var(--controls-layout-bg-color, #f5f5f5);padding:var(--controls-layout-padding-small);box-sizing:border-box;display:grid;align-items:center;border-bottom-left-radius:var(--radius-3);border-bottom-right-radius:var(--radius-3)}@container player (width > 400px) and (height > 300px){._root_narhv_1{padding:var(--controls-layout-padding-medium)}}[data-fullscreen] ._root_narhv_1{border-bottom-left-radius:0;border-bottom-right-radius:0}._normal_narhv_22{grid-template-columns:auto 1fr auto;grid-template-areas:"slider slider slider" "left-controls indicators right-controls"}@container player (width > 400px) and (height > 300px){._normal_narhv_22{padding-top:0}}._compact_narhv_33{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"left-controls slider right-controls"}@container player (width > 425px){._compact_narhv_33{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"left-controls indicators slider right-controls"}}[data-fullscreen] ._root_narhv_1,._root_narhv_1[data-darkmode=true]{background-color:#000;padding:var(--controls-layout-padding-large)}[data-fullscreen] ._root_narhv_1[data-controls-layout=normal]{padding-top:var(--controls-layout-padding-small)}[data-fullscreen] ._root_narhv_1:not(:has([data-pins])){position:fixed;bottom:0;width:100%;opacity:0;transition:opacity .3s ease-in-out}[data-fullscreen][data-controls] ._root_narhv_1,[data-fullscreen]:has([role=dialog]) ._root_narhv_1{opacity:1}._left-controls_narhv_66{display:flex;grid-area:left-controls}@container player (width > 400px) and (height > 300px){._left-controls_narhv_66{gap:.5rem}}._right-controls_narhv_75{display:flex;grid-area:right-controls}@container player (width > 400px) and (height > 300px){._right-controls_narhv_75{gap:.5rem}}._indicators_narhv_84{grid-area:indicators;font-size:1rem;overflow:hidden;display:none;margin-left:.25rem}@container player (width > 425px){._indicators_narhv_84{display:block}}@container (height > 300px){._indicators_narhv_84{margin-left:1rem}}.studio-player-main-layout{--volume-track-bg-color: #ccd0d2;--volume-track-fill-bg-color: #2d3b45;--volume-thumb-bg-color: #2d3b45;--feedback-message-bg-color: black;--feedback-message-color: white;--feedback-icon-color: white;--feedback-icon-bg-color: black;--timeline-track-bg-color: #ccd0d2;--timeline-track-progress-bg-color: #adb2b6;--timeline-track-fill-bg-color: #2b7abc;--timeline-progress-bg-color: #adb2b6;--timeline-thumb-color: #2b7abc;--settings-menu-bg-color: white;--settings-submenu-color: #2d3b45;--settings-media-hover-color: white;--settings-media-hover-bg-color: rgb(43 122 188);--settings-media-submenu-hint-color: var(--settings-submenu-color);--captions-background-color: rgba(22 22 22 / .75);--captions-color: white;--comments-background-color: rgba(0 0 0 / .8);--comments-color: white;--comments-font-size-small: .75rem;--comments-font-size-normal: .875rem;--comments-font-size-large: 1rem;--comments-author-color: white;--comments-indicator-color: #64707a;--comments-indicator-color-darkmode: #868686;--comments-avatar-size-xss: 1.25rem;--comments-avatar-size-xs: 1.875rem;--comments-avatar-size-s: 2.5rem;--controls-layout-bg-color: #f5f5f5;--controls-layout-padding-small: .25rem;--controls-layout-padding-medium: .5rem;--controls-layout-padding-large: .75rem;--sidebar-border-color: #d7dade;--media-button-icon-color: #2d3b45;--media-button-icon-hover-color: #e0e0e0;--focus-outline-color: #2b7abc;--spacing-1: .5rem;--spacing-2: .625rem;--spacing-3: 1rem;--spacing-4: 2rem;--radius-1: .0625rem;--radius-2: .25rem;--radius-3: .625rem;--radius-rounded: 50%;--media-button-area-size-small: 2rem;--media-button-area-size-medium: 2.5rem;--media-button-icon-size-small: 1rem;--media-button-icon-size-medium: 1.25rem;--action-buttons-color: #0374b5;--action-buttons-hover-color: #235f93;--action-buttons-border-color: #025483;--warning-color: #e62429;--pin-color-1: #f2f4f4;--pin-color-2: #586874;--pin-color-3: #273540;--pin-light-color: #9ea6ad;--tooltip-bg-color: #334451;--focus-ring: 2px solid var(--focus-outline-color);--secondary-text-color: #586874;--secondary-text-hover-color: #F2F4F4;display:flex;height:100%}[data-media-player]{outline:none;position:relative;font-family:Lato,sans-serif;display:grid;container:player / size;width:100%;height:100%;grid-template-rows:1fr auto;overflow:hidden}[data-media-player]:focus-visible{outline:var(--focus-ring)}[data-media-provider]{display:flex;position:relative;background-color:#000;contain:paint;border-top-left-radius:var(--radius-3);border-top-right-radius:var(--radius-3)}[data-media-provider] video,[data-media-provider] iframe{width:100%;height:100%;object-fit:contain;position:absolute}[data-fullscreen] [data-media-provider]{border-top-left-radius:0;border-top-right-radius:0}.audio-layout-wrapper{display:flex;align-items:center;justify-content:center;position:relative;background-color:var(--controls-layout-bg-color);width:100%;border-top-left-radius:var(--radius-3);border-top-right-radius:var(--radius-3)}.controls-button{background-color:transparent;border:none;border-radius:var(--radius-2);cursor:pointer;margin:0;display:flex;align-items:center;justify-content:center;transition:background-color .2s;width:var(--media-button-area-size-small);height:var(--media-button-area-size-small)}.controls-button[data-hover],.controls-button:hover{background-color:var(--media-button-icon-hover-color, #e0e0e0)}.controls-button:focus-visible,.controls-button[data-focus]{outline:var(--focus-ring)}.controls-button-icon{color:var(--media-button-icon-color);min-width:var(--media-button-icon-size-small);min-height:var(--media-button-icon-size-small)}@container player (width > 400px) and (height > 300px){.controls-button-icon{min-width:var(--media-button-icon-size-medium);min-height:var(--media-button-icon-size-medium)}}[data-fullscreen] .controls-button{width:var(--media-button-area-size-medium);height:var(--media-button-area-size-medium)}[data-fullscreen]:not([data-controls]){cursor:none}:is([data-fullscreen],[data-darkmode=true]) .controls-button-icon{color:#fff}:is([data-fullscreen],[data-darkmode=true]) .controls-button[data-hover],:is([data-fullscreen],[data-darkmode=true]) .controls-button:hover{background-color:#ffffff26}.icon-rotate{transition:transform .2s ease-out}.controls-button[aria-expanded=true] .icon-rotate{transform:rotate(60deg);transition:transform .1s ease-in}.vds-blocker{top:0;right:0;bottom:0;left:0;position:absolute;pointer-events:none}