@mottosports/motto-video-player 1.0.1-rc.16 → 1.0.1-rc.17

package/dist/index.js

@@ -31,10 +31,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BigPlayIcon: () => BigPlayIcon,
   CreativeWork: () => CreativeWork,
   Event: () => Event,
   Player: () => Player,
   QueryProvider: () => QueryProvider,
+  SkipBackIcon: () => SkipBackIcon,
+  SkipForwardIcon: () => SkipForwardIcon,
   Video: () => Video,
   queryClient: () => queryClient
 });
@@ -64,10 +67,1075 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/index.css
-styleInject('/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif,\n      system-ui,\n      sans-serif,\n      "Apple Color Emoji",\n      "Segoe UI Emoji",\n      "Segoe UI Symbol",\n      "Noto Color Emoji";\n    --font-mono:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      "Liberation Mono",\n      "Courier New",\n      monospace;\n    --color-red-600: oklch(57.7% 0.245 27.325);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --text-5xl: 3rem;\n    --text-5xl--line-height: 1;\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-wide: 0.025em;\n    --tracking-widest: 0.1em;\n    --radius-md: 0.375rem;\n    --radius-2xl: 1rem;\n    --animate-spin: spin 1s linear infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --aspect-video: 16 / 9;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html,\n  :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b,\n  strong {\n    font-weight: bolder;\n  }\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub,\n  sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol,\n  ul,\n  menu {\n    list-style: none;\n  }\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    display: block;\n    vertical-align: middle;\n  }\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n  button,\n  input,\n  select,\n  optgroup,\n  textarea,\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit,\n  ::-webkit-datetime-edit-year-field,\n  ::-webkit-datetime-edit-month-field,\n  ::-webkit-datetime-edit-day-field,\n  ::-webkit-datetime-edit-hour-field,\n  ::-webkit-datetime-edit-minute-field,\n  ::-webkit-datetime-edit-second-field,\n  ::-webkit-datetime-edit-millisecond-field,\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button,\n  input:where([type=button], [type=reset], [type=submit]),\n  ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=until-found])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-4 {\n    left: calc(var(--spacing) * 4);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .m-6 {\n    margin: calc(var(--spacing) * 6);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-3 {\n    margin-top: calc(var(--spacing) * 3);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .aspect-video {\n    aspect-ratio: var(--aspect-video);\n  }\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-24 {\n    height: calc(var(--spacing) * 24);\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-2 {\n    width: calc(var(--spacing) * 2);\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .auto-cols-max {\n    grid-auto-columns: max-content;\n  }\n  .grid-flow-col {\n    grid-auto-flow: column;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-stretch {\n    justify-content: stretch;\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-5 {\n    gap: calc(var(--spacing) * 5);\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .bg-\\[\\#151515\\] {\n    background-color: #151515;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-red-600 {\n    background-color: var(--color-red-600);\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .bg-gradient-to-t {\n    --tw-gradient-position: to top in oklab;\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-black\\/70 {\n    --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent);\n    }\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .to-transparent {\n    --tw-gradient-to: transparent;\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .bg-cover {\n    background-size: cover;\n  }\n  .bg-center {\n    background-position: center;\n  }\n  .bg-no-repeat {\n    background-repeat: no-repeat;\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .font-mono {\n    font-family: var(--font-mono);\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-5xl {\n    font-size: var(--text-5xl);\n    line-height: var(--tw-leading, var(--text-5xl--line-height));\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-wide {\n    --tw-tracking: var(--tracking-wide);\n    letter-spacing: var(--tracking-wide);\n  }\n  .tracking-widest {\n    --tw-tracking: var(--tracking-widest);\n    letter-spacing: var(--tracking-widest);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .md\\:rounded-2xl {\n    @media (width >= 48rem) {\n      border-radius: var(--radius-2xl);\n    }\n  }\n  .md\\:rounded-2xl\\! {\n    @media (width >= 48rem) {\n      border-radius: var(--radius-2xl) !important;\n    }\n  }\n  .md\\:text-base {\n    @media (width >= 48rem) {\n      font-size: var(--text-base);\n      line-height: var(--tw-leading, var(--text-base--line-height));\n    }\n  }\n  .md\\:text-sm {\n    @media (width >= 48rem) {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .md\\:text-xl {\n    @media (width >= 48rem) {\n      font-size: var(--text-xl);\n      line-height: var(--tw-leading, var(--text-xl--line-height));\n    }\n  }\n}\n@layer components {\n  .motto-video-container {\n    position: relative;\n    width: 100%;\n    min-height: 300px;\n  }\n  @supports (aspect-ratio: 16/9) {\n    .motto-video-container {\n      min-height: auto;\n    }\n  }\n  .motto-video-responsive {\n    position: absolute;\n    top: calc(var(--spacing) * 0);\n    left: calc(var(--spacing) * 0);\n    height: 100%;\n    width: 100%;\n  }\n  .motto-skip-button {\n    position: absolute;\n    top: calc(1/2 * 100%);\n    z-index: 10;\n    display: flex;\n    height: calc(var(--spacing) * 16);\n    width: calc(var(--spacing) * 16);\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    cursor: pointer;\n    align-items: center;\n    justify-content: center;\n    border-radius: calc(infinity * 1px);\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n    background-color: color-mix(in srgb, #000 70%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);\n    }\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n    color: var(--color-white);\n    opacity: 80%;\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n    &:hover {\n      @media (hover: hover) {\n        --tw-scale-x: 110%;\n        --tw-scale-y: 110%;\n        --tw-scale-z: 110%;\n        scale: var(--tw-scale-x) var(--tw-scale-y);\n      }\n    }\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n    &:active {\n      --tw-scale-x: 95%;\n      --tw-scale-y: 95%;\n      --tw-scale-z: 95%;\n      scale: var(--tw-scale-x) var(--tw-scale-y);\n    }\n  }\n  .motto-skip-button-back {\n    left: calc(var(--spacing) * 5);\n  }\n  .motto-skip-button-forward {\n    right: calc(var(--spacing) * 5);\n  }\n  .motto-mobile-controls-overlay {\n    position: absolute;\n    inset: calc(var(--spacing) * 0);\n    z-index: 20;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n    pointer-events: none;\n  }\n  .motto-mobile-controls-group {\n    display: flex;\n    align-items: center;\n    gap: calc(var(--spacing) * 8);\n    opacity: 100%;\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n    pointer-events: none;\n  }\n  .motto-mobile-play-button {\n    display: flex;\n    height: calc(var(--spacing) * 14);\n    width: calc(var(--spacing) * 14);\n    cursor: pointer;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    border-radius: calc(infinity * 1px);\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n    background-color: color-mix(in srgb, #000 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n    }\n    color: var(--color-white);\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n    pointer-events: auto;\n  }\n  .motto-mobile-play-button:active {\n    --tw-scale-x: 95%;\n    --tw-scale-y: 95%;\n    --tw-scale-z: 95%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .motto-mobile-play-button svg {\n    height: calc(var(--spacing) * 7);\n    width: calc(var(--spacing) * 7);\n  }\n  .motto-mobile-skip-button {\n    display: flex;\n    height: calc(var(--spacing) * 10);\n    width: calc(var(--spacing) * 10);\n    cursor: pointer;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    border-radius: calc(infinity * 1px);\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n    background-color: color-mix(in srgb, #000 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n    }\n    color: var(--color-white);\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n    pointer-events: auto;\n  }\n  .motto-mobile-skip-button:active {\n    --tw-scale-x: 95%;\n    --tw-scale-y: 95%;\n    --tw-scale-z: 95%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .motto-mobile-skip-button svg {\n    height: calc(var(--spacing) * 6);\n    width: calc(var(--spacing) * 6);\n  }\n}\n@media (min-width: 768px) {\n  .motto-mobile-controls-overlay {\n    display: none !important;\n  }\n}\n@media (max-width: 767px) {\n  .shaka-controls-container .motto-native-skip-button,\n  .shaka-controls-container .motto-skip-back-button,\n  .shaka-controls-container .motto-skip-forward-button,\n  .shaka-controls-container .shaka-button[title*="Skip back"],\n  .shaka-controls-container .shaka-button[title*="Skip forward"],\n  .shaka-controls-container .shaka-button[aria-label*="Skip back"],\n  .shaka-controls-container .shaka-button[aria-label*="Skip forward"],\n  .shaka-controls-container button[title*="Skip back"],\n  .shaka-controls-container button[title*="Skip forward"],\n  .shaka-controls-container button[aria-label*="Skip back"],\n  .shaka-controls-container button[aria-label*="Skip forward"],\n  .motto-native-skip-button:not(.motto-mobile-skip-button),\n  .motto-skip-back-button:not(.motto-mobile-skip-button),\n  .motto-skip-forward-button:not(.motto-mobile-skip-button),\n  .shaka-button[title*="Skip back"]:not(.motto-mobile-skip-button),\n  .shaka-button[title*="Skip forward"]:not(.motto-mobile-skip-button),\n  .shaka-button[aria-label*="Skip back"]:not(.motto-mobile-skip-button),\n  .shaka-button[aria-label*="Skip forward"]:not(.motto-mobile-skip-button),\n  button[title*="Skip back"]:not(.motto-mobile-skip-button),\n  button[title*="Skip forward"]:not(.motto-mobile-skip-button),\n  button[aria-label*="Skip back"]:not(.motto-mobile-skip-button),\n  button[aria-label*="Skip forward"]:not(.motto-mobile-skip-button) {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n    width: 0 !important;\n    height: 0 !important;\n    padding: 0 !important;\n    margin: 0 !important;\n  }\n  .motto-mobile-skip-button {\n    display: flex !important;\n    visibility: visible !important;\n    opacity: 1 !important;\n  }\n}\n.shaka-seek-bar-container {\n  height: 6px !important;\n  width: 100% !important;\n  margin: 8px 0 !important;\n  border-radius: 4px !important;\n  position: relative !important;\n  border-top: none !important;\n  border-bottom: none !important;\n  box-shadow: none !important;\n}\n.shaka-seek-bar {\n  height: 6px !important;\n  width: 100% !important;\n  -webkit-appearance: none !important;\n  appearance: none !important;\n  background: transparent !important;\n  cursor: pointer !important;\n  border: none !important;\n  outline: none !important;\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  border-radius: 4px !important;\n}\n.shaka-seek-bar::-webkit-slider-runnable-track {\n  height: 6px !important;\n  background: transparent !important;\n  border-radius: 4px !important;\n  border: none !important;\n}\n.shaka-seek-bar::-moz-range-track {\n  height: 6px !important;\n  background: transparent !important;\n  border-radius: 4px !important;\n  border: none !important;\n}\n.shaka-seek-bar::-webkit-slider-thumb {\n  -webkit-appearance: none !important;\n  appearance: none !important;\n  width: 16px !important;\n  height: 16px !important;\n  border-radius: 50% !important;\n  background: #ffffff !important;\n  cursor: pointer !important;\n  border: 2px solid #ffffff !important;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;\n  margin-top: -4px !important;\n}\n.shaka-seek-bar::-moz-range-thumb {\n  width: 16px !important;\n  height: 16px !important;\n  border-radius: 50% !important;\n  background: #ffffff !important;\n  cursor: pointer !important;\n  border: 2px solid #ffffff !important;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;\n  margin-top: -4px !important;\n}\n.motto-skip-back-button,\n.motto-skip-forward-button,\n.motto-native-skip-button {\n  background: transparent !important;\n  border: none !important;\n  padding: 4px !important;\n  margin: 0px !important;\n  cursor: pointer !important;\n  color: #ffffff !important;\n  transition: all 0.2s ease !important;\n  min-width: 32px !important;\n  height: 32px !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  border-radius: 4px !important;\n  width: 25px;\n}\n.motto-skip-back-button:hover,\n.motto-skip-forward-button:hover,\n.motto-native-skip-button:hover {\n  opacity: 0.8 !important;\n  background: transparent !important;\n  transform: scale(1.05) !important;\n}\n.motto-skip-back-button:active,\n.motto-skip-forward-button:active,\n.motto-native-skip-button:active {\n  transform: scale(0.95) !important;\n}\n.motto-skip-back-button svg,\n.motto-skip-forward-button svg,\n.motto-native-skip-button svg {\n  width: 24px !important;\n  height: 24px !important;\n}\n@media (max-width: 767px) {\n  .shaka-controls-container .motto-native-skip-button,\n  .shaka-controls-container .motto-skip-back-button,\n  .shaka-controls-container .motto-skip-forward-button,\n  .shaka-controls-container .shaka-play-button,\n  .shaka-controls-container .shaka-pause-button {\n    display: none !important;\n  }\n}\n.shaka-spinner-svg {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-spinner-path {\n  stroke: white !important;\n  fill: none !important;\n}\n.shaka-spinner-container {\n  color: white !important;\n}\n.shaka-buffering-spinner {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-buffering-spinner svg {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-buffering-spinner path {\n  stroke: white !important;\n  fill: none !important;\n}\n[data-shaka-player-container] .shaka-spinner,\n[data-shaka-player-container] .spinner {\n  color: white !important;\n  border-color: white !important;\n}\n.material-icons.shaka-spinner {\n  color: white !important;\n}\n.shaka-controls-container .shaka-spinner,\n.shaka-video-container .shaka-spinner {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-controls-container .shaka-spinner svg,\n.shaka-video-container .shaka-spinner svg {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-controls-container .shaka-spinner path,\n.shaka-video-container .shaka-spinner path {\n  stroke: white !important;\n}\n.motto-video-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background:\n    linear-gradient(\n      135deg,\n      #1a1a1a 0%,\n      #2d2d2d 100%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 10;\n  transition: opacity 0.3s ease;\n}\n.motto-video-loading-overlay.hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n.motto-video-loading-content {\n  text-align: center;\n  color: white;\n}\n.motto-video-loading-icon {\n  width: 64px;\n  height: 64px;\n  margin-bottom: 16px;\n  opacity: 0.7;\n}\n.motto-video-loading-text {\n  font-size: 16px;\n  font-weight: 500;\n  margin-bottom: 8px;\n}\n.motto-video-loading-subtext {\n  font-size: 14px;\n  opacity: 0.7;\n}\n@keyframes pulse-live {\n  0% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.7;\n    transform: scale(1.1);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n.shaka-play-button-container {\n  display: none !important;\n}\n@media (max-width: 767px) {\n  .shaka-controls-container {\n    z-index: 90 !important;\n    height: 100px !important;\n    bottom: 0 !important;\n    top: unset !important;\n  }\n}\n@property --tw-gradient-position { syntax: "*"; inherits: false; }\n@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }\n@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }\n@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-tracking { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-border-style: solid;\n      --tw-duration: initial;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n    }\n  }\n}\n');
+styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root,
+  :host {
+    --font-sans:
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji";
+    --font-mono:
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace;
+    --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --tracking-wide: 0.025em;
+    --tracking-widest: 0.1em;
+    --radius-md: 0.375rem;
+    --radius-2xl: 1rem;
+    --animate-spin: spin 1s linear infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --aspect-video: 16 / 9;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+  }
+}
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html,
+  :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit,
+  ::-webkit-datetime-edit-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-minute-field,
+  ::-webkit-datetime-edit-second-field,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button,
+  input:where([type=button], [type=reset], [type=submit]),
+  ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden=until-found])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-50 {
+    z-index: 50;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .m-6 {
+    margin: calc(var(--spacing) * 6);
+  }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .aspect-video {
+    aspect-ratio: var(--aspect-video);
+  }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
+  .h-full {
+    height: 100%;
+  }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
+  .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
+  .w-full {
+    width: 100%;
+  }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+  .auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+  .grid-flow-col {
+    grid-auto-flow: column;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-stretch {
+    justify-content: stretch;
+  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+  .gap-5 {
+    gap: calc(var(--spacing) * 5);
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .bg-\\[\\#151515\\] {
+    background-color: #151515;
+  }
+  .bg-black {
+    background-color: var(--color-black);
+  }
+  .bg-red-600 {
+    background-color: var(--color-red-600);
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .bg-gradient-to-t {
+    --tw-gradient-position: to top in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .from-black\\/70 {
+    --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-transparent {
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .bg-cover {
+    background-size: cover;
+  }
+  .bg-center {
+    background-position: center;
+  }
+  .bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-left {
+    text-align: left;
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .text-\\[10px\\] {
+    font-size: 10px;
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
+  .tracking-widest {
+    --tw-tracking: var(--tracking-widest);
+    letter-spacing: var(--tracking-widest);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .md\\:rounded-2xl {
+    @media (width >= 48rem) {
+      border-radius: var(--radius-2xl);
+    }
+  }
+  .md\\:rounded-2xl\\! {
+    @media (width >= 48rem) {
+      border-radius: var(--radius-2xl) !important;
+    }
+  }
+  .md\\:text-base {
+    @media (width >= 48rem) {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+  }
+  .md\\:text-sm {
+    @media (width >= 48rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .md\\:text-xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+  }
+}
+@layer components {
+  video::-webkit-media-controls {
+    display: none !important;
+  }
+  video::-webkit-media-controls-panel {
+    display: none !important;
+  }
+  video::-webkit-media-controls-play-button {
+    display: none !important;
+  }
+  video::-webkit-media-controls-timeline {
+    display: none !important;
+  }
+  video::-webkit-media-controls-current-time-display {
+    display: none !important;
+  }
+  video::-webkit-media-controls-time-remaining-display {
+    display: none !important;
+  }
+  video::-webkit-media-controls-mute-button {
+    display: none !important;
+  }
+  video::-webkit-media-controls-volume-slider {
+    display: none !important;
+  }
+  video::-webkit-media-controls-fullscreen-button {
+    display: none !important;
+  }
+  video::-webkit-media-controls-overlay-play-button {
+    display: none !important;
+  }
+  video::-moz-media-controls {
+    display: none !important;
+  }
+  video {
+    outline: none !important;
+  }
+  video[controls] {
+    -webkit-appearance: none !important;
+    appearance: none !important;
+  }
+  video::-webkit-media-controls-enclosure {
+    display: none !important;
+  }
+  video::-webkit-media-controls-start-playback-button {
+    display: none !important;
+  }
+  video[controls]::-webkit-media-controls,
+  video[controls]::-webkit-media-controls-panel,
+  video[controls]::-webkit-media-controls-play-button,
+  video[controls]::-webkit-media-controls-timeline,
+  video[controls]::-webkit-media-controls-current-time-display,
+  video[controls]::-webkit-media-controls-time-remaining-display,
+  video[controls]::-webkit-media-controls-mute-button,
+  video[controls]::-webkit-media-controls-volume-slider,
+  video[controls]::-webkit-media-controls-fullscreen-button,
+  video[controls]::-webkit-media-controls-overlay-play-button,
+  video[controls]::-webkit-media-controls-enclosure,
+  video[controls]::-webkit-media-controls-start-playback-button {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+  }
+  video[controls]::-moz-media-controls {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+  }
+  .motto-video-container {
+    position: relative;
+    width: 100%;
+    min-height: 300px;
+  }
+  @supports (aspect-ratio: 16/9) {
+    .motto-video-container {
+      min-height: auto;
+    }
+  }
+  .motto-video-responsive {
+    position: absolute;
+    top: calc(var(--spacing) * 0);
+    left: calc(var(--spacing) * 0);
+    height: 100%;
+    width: 100%;
+  }
+  .motto-skip-button {
+    position: absolute;
+    top: calc(1/2 * 100%);
+    z-index: 10;
+    display: flex;
+    height: calc(var(--spacing) * 16);
+    width: calc(var(--spacing) * 16);
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: color-mix(in srgb, #000 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
+    }
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+    color: var(--color-white);
+    opacity: 80%;
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 110%;
+        --tw-scale-y: 110%;
+        --tw-scale-z: 110%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+    &:active {
+      --tw-scale-x: 95%;
+      --tw-scale-y: 95%;
+      --tw-scale-z: 95%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .motto-skip-button-back {
+    left: calc(var(--spacing) * 5);
+  }
+  .motto-skip-button-forward {
+    right: calc(var(--spacing) * 5);
+  }
+}
+.shaka-seek-bar-container {
+  height: 6px !important;
+  width: 100% !important;
+  margin: 8px 0 !important;
+  border-radius: 4px !important;
+  position: relative !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  box-shadow: none !important;
+}
+.shaka-seek-bar {
+  height: 6px !important;
+  width: 100% !important;
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  background: transparent !important;
+  cursor: pointer !important;
+  border: none !important;
+  outline: none !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  border-radius: 4px !important;
+}
+.shaka-seek-bar::-webkit-slider-runnable-track {
+  height: 6px !important;
+  background: transparent !important;
+  border-radius: 4px !important;
+  border: none !important;
+}
+.shaka-seek-bar::-moz-range-track {
+  height: 6px !important;
+  background: transparent !important;
+  border-radius: 4px !important;
+  border: none !important;
+}
+.shaka-seek-bar::-webkit-slider-thumb {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  width: 16px !important;
+  height: 16px !important;
+  border-radius: 50% !important;
+  background: #ffffff !important;
+  cursor: pointer !important;
+  border: 2px solid #ffffff !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
+  margin-top: -4px !important;
+}
+.shaka-seek-bar::-moz-range-thumb {
+  width: 16px !important;
+  height: 16px !important;
+  border-radius: 50% !important;
+  background: #ffffff !important;
+  cursor: pointer !important;
+  border: 2px solid #ffffff !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
+  margin-top: -4px !important;
+}
+.motto-skip-back-button,
+.motto-skip-forward-button,
+.motto-native-skip-button {
+  background: transparent !important;
+  border: none !important;
+  padding: 4px !important;
+  margin: 0px !important;
+  cursor: pointer !important;
+  color: #ffffff !important;
+  transition: all 0.2s ease !important;
+  min-width: 32px !important;
+  height: 32px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  border-radius: 4px !important;
+  width: 25px;
+}
+.motto-skip-back-button:hover,
+.motto-skip-forward-button:hover,
+.motto-native-skip-button:hover {
+  opacity: 0.8 !important;
+  background: transparent !important;
+  transform: scale(1.05) !important;
+}
+.motto-skip-back-button:active,
+.motto-skip-forward-button:active,
+.motto-native-skip-button:active {
+  transform: scale(0.95) !important;
+}
+.motto-skip-back-button svg,
+.motto-skip-forward-button svg,
+.motto-native-skip-button svg {
+  width: 24px !important;
+  height: 24px !important;
+}
+.shaka-spinner-svg {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-spinner-path {
+  stroke: white !important;
+  fill: none !important;
+}
+.shaka-spinner-container {
+  color: white !important;
+}
+.shaka-buffering-spinner {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-buffering-spinner svg {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-buffering-spinner path {
+  stroke: white !important;
+  fill: none !important;
+}
+[data-shaka-player-container] .shaka-spinner,
+[data-shaka-player-container] .spinner {
+  color: white !important;
+  border-color: white !important;
+}
+.material-icons.shaka-spinner {
+  color: white !important;
+}
+.shaka-controls-container .shaka-spinner,
+.shaka-video-container .shaka-spinner {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-controls-container .shaka-spinner svg,
+.shaka-video-container .shaka-spinner svg {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-controls-container .shaka-spinner path,
+.shaka-video-container .shaka-spinner path {
+  stroke: white !important;
+}
+.motto-video-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    linear-gradient(
+      135deg,
+      #1a1a1a 0%,
+      #2d2d2d 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  transition: opacity 0.3s ease;
+}
+.motto-video-loading-overlay.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+.motto-video-loading-content {
+  text-align: center;
+  color: white;
+}
+.motto-video-loading-icon {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 16px;
+  opacity: 0.7;
+}
+.motto-video-loading-text {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.motto-video-loading-subtext {
+  font-size: 14px;
+  opacity: 0.7;
+}
+@keyframes pulse-live {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.shaka-play-button {
+  background: rgba(255, 255, 255, 0.1) !important;
+  border: none !important;
+  color: white !important;
+  padding: 10px !important;
+  border-radius: 100% !important;
+  transition: all 0.2s ease !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-width: 55px !important;
+  height: 55px !important;
+}
+.shaka-play-button-container {
+  background: transparent;
+  transition: all 0.2s ease !important;
+}
+.motto-video-container:not(.no-cursor) .shaka-play-button-container {
+  background: rgba(0, 0, 0, 0.3);
+  transition: all 0.s ease !important;
+}
+.shaka-play-button:hover {
+  background: rgba(255, 255, 255, 0.2) !important;
+  transform: scale(1.05) !important;
+}
+.shaka-play-button:active {
+  transform: scale(0.95) !important;
+}
+.shaka-play-button > * {
+  display: none !important;
+}
+.shaka-play-button::after {
+  content: "" !important;
+  width: 35px !important;
+  height: 35px !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" /></svg>') !important;
+  background-repeat: no-repeat !important;
+  background-size: contain !important;
+  background-position: center !important;
+  display: block !important;
+}
+.shaka-play-button[aria-label*=Play]::after {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" /></svg>') !important;
+}
+.shaka-play-button[aria-label*=Pause]::after {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z" clip-rule="evenodd" /></svg>') !important;
+}
+@property --tw-gradient-position { syntax: "*"; inherits: false; }
+@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
+@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }
+@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }
+@property --tw-gradient-stops { syntax: "*"; inherits: false; }
+@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }
+@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
+@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
+@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
+@property --tw-font-weight { syntax: "*"; inherits: false; }
+@property --tw-tracking { syntax: "*"; inherits: false; }
+@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
+@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
+@property --tw-ring-color { syntax: "*"; inherits: false; }
+@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
+@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-ring-inset { syntax: "*"; inherits: false; }
+@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
+@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-blur { syntax: "*"; inherits: false; }
+@property --tw-brightness { syntax: "*"; inherits: false; }
+@property --tw-contrast { syntax: "*"; inherits: false; }
+@property --tw-grayscale { syntax: "*"; inherits: false; }
+@property --tw-hue-rotate { syntax: "*"; inherits: false; }
+@property --tw-invert { syntax: "*"; inherits: false; }
+@property --tw-opacity { syntax: "*"; inherits: false; }
+@property --tw-saturate { syntax: "*"; inherits: false; }
+@property --tw-sepia { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
+@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
+@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-duration { syntax: "*"; inherits: false; }
+@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *,
+    ::before,
+    ::after,
+    ::backdrop {
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-border-style: solid;
+      --tw-duration: initial;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+    }
+  }
+}
+`);
 
 // src/Player.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_shaka_player4 = __toESM(require("shaka-player/dist/shaka-player.ui"));
 
 // src/hooks/useShakePlayer.ts
@@ -321,324 +1389,250 @@ var useMuxAnalytics = (playerRef, muxConfig, onMuxReady, onMuxDataUpdate) => {
 };
 
 // src/hooks/useShakaUI.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_shaka_player3 = require("shaka-player/dist/shaka-player.ui");
-var SkipBackButton = class {
-  constructor(parent, controls, onSkipBack) {
-    this.parent = parent;
-    this.controls = controls;
-    this.eventManager = { listen: (element, event, handler) => {
-      element.addEventListener(event, handler);
-    } };
-    this.button_ = document.createElement("button");
-    this.button_.className = "shaka-button motto-native-skip-button";
-    this.button_.innerHTML = `
-      <svg width="24px" stroke-width="2" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M3 13C3 17.9706 7.02944 22 12 22C16.9706 22 21 17.9706 21 13C21 8.02944 16.9706 4 12 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-        <path d="M9 9L9 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-        <path d="M15 9L13 9C12.4477 9 12 9.44772 12 10L12 11.5C12 12.0523 12.4477 12.5 13 12.5L14 12.5C14.5523 12.5 15 12.9477 15 13.5L15 15C15 15.5523 14.5523 16 14 16L12 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-        <path d="M12 4L4.5 4M4.5 4L6.5 2M4.5 4L6.5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-      </svg>
-    `;
-    this.button_.title = "Skip back 15 seconds";
-    this.button_.setAttribute("aria-label", "Skip back 15 seconds");
-    this.parent.appendChild(this.button_);
-    this.eventManager.listen(this.button_, "click", () => {
-      const video = this.controls.getVideo();
-      if (video) {
-        const newTime = Math.max(0, video.currentTime - 15);
-        video.currentTime = newTime;
-        onSkipBack?.(newTime);
-      }
-    });
-  }
-  // Shaka UI will call `release` when the controls are destroyed.
-  // Provide a no-op implementation to avoid TypeErrors.
-  release() {
-  }
-};
-var SkipForwardButton = class {
-  constructor(parent, controls, onSkipForward) {
-    this.parent = parent;
-    this.controls = controls;
-    this.eventManager = { listen: (element, event, handler) => {
-      element.addEventListener(event, handler);
-    } };
-    this.button_ = document.createElement("button");
-    this.button_.className = "shaka-button motto-native-skip-button";
-    this.button_.innerHTML = `
-      <svg fill="none" height="24" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-        <path d="M21 13C21 17.9706 16.9706 22 12 22C7.02944 22 3 17.9706 3 13C3 8.02944 7.02944 4 12 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M12 4H19.5M19.5 4L17.5 2M19.5 4L17.5 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M9 9L9 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M15 9L13 9C12.4477 9 12 9.44772 12 10L12 11.5C12 12.0523 12.4477 12.5 13 12.5L14 12.5C14.5523 12.5 15 12.9477 15 13.5L15 15C15 15.5523 14.5523 16 14 16L12 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    `;
-    this.button_.title = "Skip forward 15 seconds";
-    this.button_.setAttribute("aria-label", "Skip forward 15 seconds");
-    this.parent.appendChild(this.button_);
-    this.eventManager.listen(this.button_, "click", () => {
-      const video = this.controls.getVideo();
-      if (video) {
-        const newTime = Math.min(video.duration || 0, video.currentTime + 15);
-        video.currentTime = newTime;
-        onSkipForward?.(newTime);
-      }
-    });
-  }
-  release() {
-  }
-};
-var SkipBackButtonFactory = class {
-  constructor(onSkipBack) {
-    this.onSkipBack = onSkipBack;
-  }
-  create(rootElement, controls) {
-    return new SkipBackButton(rootElement, controls, this.onSkipBack);
-  }
-};
-var SkipForwardButtonFactory = class {
-  constructor(onSkipForward) {
-    this.onSkipForward = onSkipForward;
-  }
-  create(rootElement, controls) {
-    return new SkipForwardButton(rootElement, controls, this.onSkipForward);
-  }
+
+// src/icons/SkipBackIcon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SkipBackIcon = ({ size = 24, className = "" }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      strokeWidth: "2",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M3 13C3 17.9706 7.02944 22 12 22C16.9706 22 21 17.9706 21 13C21 8.02944 16.9706 4 12 4",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M9 9L9 16",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M15 9L13 9C12.4477 9 12 9.44772 12 10L12 11.5C12 12.0523 12.4477 12.5 13 12.5L14 12.5C14.5523 12.5 15 12.9477 15 13.5L15 15C15 15.5523 14.5523 16 14 16L12 16",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M12 4L4.5 4M4.5 4L6.5 2M4.5 4L6.5 6",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
 };
-var MobilePlayButton = class {
-  constructor(parent, controls) {
-    this.parent = parent;
-    this.controls = controls;
-    this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
-    if (!this.video) {
-      console.error("MobilePlayButton: No video element found");
-      return;
+
+// src/icons/SkipForwardIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SkipForwardIcon = ({ size = 24, className = "" }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      strokeWidth: "2",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M21 13C21 17.9706 16.9706 22 12 22C7.02944 22 3 17.9706 3 13C3 8.02944 7.02944 4 12 4",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M12 4H19.5M19.5 4L17.5 2M19.5 4L17.5 6",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M9 9L9 16",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M15 9L13 9C12.4477 9 12 9.44772 12 10L12 11.5C12 12.0523 12.4477 12.5 13 12.5L14 12.5C14.5523 12.5 15 12.9477 15 13.5L15 15C15 15.5523 14.5523 16 14 16L12 16",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
     }
-    this.eventManager = { listen: (element, event, handler) => {
-      element.addEventListener(event, handler);
-    } };
-    this.button_ = document.createElement("button");
-    this.button_.className = "motto-mobile-play-button";
-    this.updateIcon();
-    this.parent.appendChild(this.button_);
-    this.eventManager.listen(this.button_, "click", () => {
-      if (this.video.paused) {
-        this.video.play();
-      } else {
-        this.video.pause();
-      }
-    });
-    this.eventManager.listen(this.video, "play", () => this.updateIcon());
-    this.eventManager.listen(this.video, "pause", () => this.updateIcon());
-  }
-  updateIcon() {
-    if (this.video.paused) {
-      this.button_.innerHTML = `
-        <svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" viewBox="0 0 24 24" fill="currentColor">
-          <path stroke-width="2" fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" />
-        </svg>
-      `;
-      this.button_.setAttribute("aria-label", "Play");
-    } else {
-      this.button_.innerHTML = `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-          <path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z" clip-rule="evenodd" />
-        </svg>
-      `;
-      this.button_.setAttribute("aria-label", "Pause");
+  );
+};
+
+// src/icons/BigPlayIcon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var BigPlayIcon = ({ size = 40, className = "" }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z",
+          clipRule: "evenodd"
+        }
+      )
     }
-  }
-  release() {
-  }
+  );
+};
+
+// src/utils/renderIcon.ts
+var import_server = require("react-dom/server");
+var import_react5 = require("react");
+var renderIcon = (Component, props = {}) => {
+  return (0, import_server.renderToStaticMarkup)((0, import_react5.createElement)(Component, props));
 };
-var MobileSkipBackButton = class {
-  constructor(parent, controls, onSkipBack) {
+
+// src/hooks/useShakaUI.ts
+var SkipBackButton = class {
+  constructor(parent, controls, onSkipBack, iconSize = 24) {
     this.parent = parent;
     this.controls = controls;
-    this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
-    if (!this.video) {
-      console.error("MobileSkipBackButton: No video element found");
-      return;
-    }
     this.eventManager = { listen: (element, event, handler) => {
       element.addEventListener(event, handler);
     } };
     this.button_ = document.createElement("button");
-    this.button_.className = "motto-mobile-skip-button";
-    this.button_.innerHTML = `
-      <svg width="20px" stroke-width="2" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M3 13C3 17.9706 7.02944 22 12 22C16.9706 22 21 17.9706 21 13C21 8.02944 16.9706 4 12 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-        <path d="M9 9L9 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-        <path d="M15 9L13 9C12.4477 9 12 9.44772 12 10L12 11.5C12 12.0523 12.4477 12.5 13 12.5L14 12.5C14.5523 12.5 15 12.9477 15 13.5L15 15C15 15.5523 14.5523 16 14 16L12 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-        <path d="M12 4L4.5 4M4.5 4L6.5 2M4.5 4L6.5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-      </svg>
-    `;
+    this.button_.className = "shaka-button motto-native-skip-button";
+    this.button_.innerHTML = renderIcon(SkipBackIcon, { size: iconSize });
+    this.button_.title = "Skip back 15 seconds";
     this.button_.setAttribute("aria-label", "Skip back 15 seconds");
     this.parent.appendChild(this.button_);
     this.eventManager.listen(this.button_, "click", () => {
-      const newTime = Math.max(0, this.video.currentTime - 15);
-      this.video.currentTime = newTime;
-      onSkipBack?.(newTime);
+      const video = this.controls.getVideo();
+      if (video) {
+        const newTime = Math.max(0, video.currentTime - 15);
+        video.currentTime = newTime;
+        onSkipBack?.(newTime);
+      }
     });
   }
+  // Shaka UI will call `release` when the controls are destroyed.
+  // Provide a no-op implementation to avoid TypeErrors.
   release() {
   }
 };
-var MobileSkipForwardButton = class {
-  constructor(parent, controls, onSkipForward) {
+var SkipForwardButton = class {
+  constructor(parent, controls, onSkipForward, iconSize = 24) {
     this.parent = parent;
     this.controls = controls;
-    this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
-    if (!this.video) {
-      console.error("MobileSkipForwardButton: No video element found");
-      return;
-    }
     this.eventManager = { listen: (element, event, handler) => {
       element.addEventListener(event, handler);
     } };
     this.button_ = document.createElement("button");
-    this.button_.className = "motto-mobile-skip-button";
-    this.button_.innerHTML = `
-      <svg fill="none" height="20" stroke-width="2" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
-        <path d="M21 13C21 17.9706 16.9706 22 12 22C7.02944 22 3 17.9706 3 13C3 8.02944 7.02944 4 12 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M12 4H19.5M19.5 4L17.5 2M19.5 4L17.5 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M9 9L9 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M15 9L13 9C12.4477 9 12 9.44772 12 10L12 11.5C12 12.0523 12.4477 12.5 13 12.5L14 12.5C14.5523 12.5 15 12.9477 15 13.5L15 15C15 15.5523 14.5523 16 14 16L12 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    `;
+    this.button_.className = "shaka-button motto-native-skip-button";
+    this.button_.innerHTML = renderIcon(SkipForwardIcon, { size: iconSize });
+    this.button_.title = "Skip forward 15 seconds";
     this.button_.setAttribute("aria-label", "Skip forward 15 seconds");
     this.parent.appendChild(this.button_);
     this.eventManager.listen(this.button_, "click", () => {
-      const newTime = Math.min(this.video.duration || 0, this.video.currentTime + 15);
-      this.video.currentTime = newTime;
-      onSkipForward?.(newTime);
+      const video = this.controls.getVideo();
+      if (video) {
+        const newTime = Math.min(video.duration || 0, video.currentTime + 15);
+        video.currentTime = newTime;
+        onSkipForward?.(newTime);
+      }
     });
   }
   release() {
   }
 };
-var MobileControlsContainer = class {
-  constructor(parent, controls, onSkipBack, onSkipForward) {
-    this.parent = parent;
-    this.controls = controls;
-    if (!parent) {
-      console.error("MobileControlsContainer: No parent element provided");
-      return;
-    }
-    this.container_ = document.createElement("div");
-    this.container_.className = "motto-mobile-controls-overlay";
-    const controlsGroup = document.createElement("div");
-    controlsGroup.className = "motto-mobile-controls-group";
-    new MobileSkipBackButton(controlsGroup, controls, onSkipBack);
-    new MobilePlayButton(controlsGroup, controls);
-    new MobileSkipForwardButton(controlsGroup, controls, onSkipForward);
-    this.container_.appendChild(controlsGroup);
-    this.parent.appendChild(this.container_);
-    this.setupVisibilitySync();
-  }
-  setupVisibilitySync() {
-    setTimeout(() => {
-      this.syncVisibility();
-      this.observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === "attributes" && mutation.attributeName === "class") {
-            this.syncVisibility();
-          }
-        });
-      });
-      this.observer.observe(this.parent, {
-        attributes: true,
-        attributeFilter: ["class"]
-      });
-      const video = this.controls?.getVideo?.() || this.parent.querySelector("video");
-      if (video) {
-        video.addEventListener("play", () => {
-          setTimeout(() => this.syncVisibility(), 50);
-        });
-        video.addEventListener("pause", () => {
-          setTimeout(() => this.syncVisibility(), 50);
-        });
-      }
-    }, 1e3);
-  }
-  syncVisibility() {
-    const mainContainer = this.parent;
-    const hasNoCursor = mainContainer.classList.contains("no-cursor");
-    const video = this.controls?.getVideo?.() || this.parent.querySelector("video");
-    const isVideoPaused = video ? video.paused : false;
-    const isControlsVisible = !hasNoCursor || isVideoPaused;
-    if (this.container_) {
-      if (isControlsVisible) {
-        this.container_.style.opacity = "1";
-        this.container_.style.pointerEvents = "none";
-      } else {
-        this.container_.style.opacity = "0";
-        this.container_.style.pointerEvents = "none";
-      }
-    }
-  }
-  isElementVisible(element) {
-    const style = window.getComputedStyle(element);
-    const hasHiddenClass = element.classList.contains("shaka-hidden") || element.classList.contains("hidden") || element.classList.contains("shaka-fade-out");
-    return style.display !== "none" && style.visibility !== "hidden" && style.opacity !== "0" && !element.hidden && !hasHiddenClass;
+var SkipBackButtonFactory = class {
+  constructor(onSkipBack, iconSize) {
+    this.onSkipBack = onSkipBack;
+    this.iconSize = iconSize;
   }
-  release() {
-    try {
-      this.observer?.disconnect?.();
-      if (this.container_ && this.parent.contains(this.container_)) {
-        this.parent.removeChild(this.container_);
-      }
-    } catch {
-    }
+  create(rootElement, controls) {
+    return new SkipBackButton(rootElement, controls, this.onSkipBack, this.iconSize);
   }
 };
-var MobileControlsContainerFactory = class {
-  constructor(onSkipBack, onSkipForward) {
-    this.onSkipBack = onSkipBack;
+var SkipForwardButtonFactory = class {
+  constructor(onSkipForward, iconSize) {
     this.onSkipForward = onSkipForward;
+    this.iconSize = iconSize;
   }
   create(rootElement, controls) {
-    return new MobileControlsContainer(rootElement, controls, this.onSkipBack, this.onSkipForward);
+    return new SkipForwardButton(rootElement, controls, this.onSkipForward, this.iconSize);
   }
 };
-var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig, seekbarColors, onSkipBack, onSkipForward) => {
-  const uiRef = (0, import_react5.useRef)(null);
-  const mobileOverlayRef = (0, import_react5.useRef)(null);
-  const registeredElements = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
-  const initializeUI = (0, import_react5.useCallback)(async () => {
+var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes) => {
+  const uiRef = (0, import_react6.useRef)(null);
+  const registeredElements = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
+  const initializeUI = (0, import_react6.useCallback)(async () => {
     if (!controls || !containerRef.current || !playerRef.current || !videoRef.current) {
       return null;
     }
-    const isMobile = window.innerWidth <= 767 || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
     if (!registeredElements.current.has("skip_back_button")) {
-      import_shaka_player3.ui.Controls.registerElement("skip_back_button", new SkipBackButtonFactory(onSkipBack));
+      import_shaka_player3.ui.Controls.registerElement("skip_back_button", new SkipBackButtonFactory(onSkipBack, iconSizes?.skipButtons));
       registeredElements.current.add("skip_back_button");
     }
     if (!registeredElements.current.has("skip_forward_button")) {
-      import_shaka_player3.ui.Controls.registerElement("skip_forward_button", new SkipForwardButtonFactory(onSkipForward));
+      import_shaka_player3.ui.Controls.registerElement("skip_forward_button", new SkipForwardButtonFactory(onSkipForward, iconSizes?.skipButtons));
       registeredElements.current.add("skip_forward_button");
     }
-    if (isMobile) {
-      if (!registeredElements.current.has("mobile_controls_container")) {
-        import_shaka_player3.ui.Controls.registerElement("mobile_controls_container", new MobileControlsContainerFactory(onSkipBack, onSkipForward));
-        registeredElements.current.add("mobile_controls_container");
-      }
-    }
     const ui = new import_shaka_player3.ui.Overlay(playerRef.current, containerRef.current, videoRef.current);
     uiRef.current = ui;
-    const controlPanelElements = isMobile ? [
+    const isMobile = window.innerWidth <= 767;
+    const controlPanelElements = [
+      ...isMobile ? [] : ["skip_back_button"],
+      ...isMobile ? [] : ["play_pause"],
+      ...isMobile ? [] : ["skip_forward_button"],
       "mute",
-      "time_and_duration",
-      "spacer",
-      "fullscreen",
-      "cast",
-      "overflow_menu"
-    ] : [
-      "skip_back_button",
-      "play_pause",
-      "skip_forward_button",
-      "mute",
-      "volume",
+      ...isMobile ? [] : ["volume"],
+      // Only include volume on desktop
       "time_and_duration",
       "spacer",
       "fullscreen",
@@ -655,6 +1649,7 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
         // Progress/played portion (white)
       },
       controlPanelElements,
+      addBigPlayButton: isMobile,
       ...chromecastConfig?.receiverApplicationId && {
         "castReceiverAppId": chromecastConfig.receiverApplicationId,
         "castAndroidReceiverCompatible": false
@@ -671,24 +1666,33 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
     }
     ui.configure(uiConfig);
     if (isMobile) {
-      setTimeout(() => {
-        const container = containerRef.current;
-        const video = videoRef.current;
-        if (container && video) {
-          if (!mobileOverlayRef.current) {
-            mobileOverlayRef.current = new MobileControlsContainer(
-              container,
-              { getVideo: () => video },
-              onSkipBack,
-              onSkipForward
-            );
-          }
+      const customizeBigPlayButton = () => {
+        const bigPlayButton = containerRef.current?.querySelector(".shaka-big-play-button");
+        if (bigPlayButton && !bigPlayButton.hasAttribute("data-customized")) {
+          const buttonSize = iconSizes?.bigPlayButton || 40;
+          bigPlayButton.innerHTML = renderIcon(BigPlayIcon, { size: buttonSize });
+          bigPlayButton.setAttribute("data-customized", "true");
+          const buttonElement = bigPlayButton;
+          buttonElement.style.display = "flex";
+          buttonElement.style.alignItems = "center";
+          buttonElement.style.justifyContent = "center";
         }
-      }, 500);
+      };
+      setTimeout(customizeBigPlayButton, 100);
+      const observer = new MutationObserver(() => {
+        customizeBigPlayButton();
+      });
+      if (containerRef.current) {
+        observer.observe(containerRef.current, {
+          childList: true,
+          subtree: true,
+          attributes: false
+        });
+      }
     }
     return ui;
-  }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward]);
-  const destroyUI = (0, import_react5.useCallback)(() => {
+  }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes]);
+  const destroyUI = (0, import_react6.useCallback)(() => {
     if (uiRef.current) {
       try {
         uiRef.current.destroy();
@@ -697,14 +1701,6 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
       }
       uiRef.current = null;
     }
-    if (mobileOverlayRef.current) {
-      try {
-        mobileOverlayRef.current.release();
-      } catch (error) {
-        console.warn("Error releasing mobile controls overlay:", error);
-      }
-      mobileOverlayRef.current = null;
-    }
   }, []);
   return {
     uiRef,
@@ -714,9 +1710,9 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
 };
 
 // src/hooks/useEventHandlers.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var useEventHandlers = (videoRef, handlers) => {
-  const setupEventListeners = (0, import_react6.useCallback)(() => {
+  const setupEventListeners = (0, import_react7.useCallback)(() => {
     const video = videoRef.current;
     if (!video) return;
     const { onPlay, onPause, onEnded, onLoadStart, onCanPlay } = handlers;
@@ -726,7 +1722,7 @@ var useEventHandlers = (videoRef, handlers) => {
     if (onLoadStart) video.addEventListener("loadstart", onLoadStart);
     if (onCanPlay) video.addEventListener("canplay", onCanPlay);
   }, [videoRef, handlers]);
-  const cleanupEventListeners = (0, import_react6.useCallback)(() => {
+  const cleanupEventListeners = (0, import_react7.useCallback)(() => {
     const video = videoRef.current;
     if (!video) return;
     const { onPlay, onPause, onEnded, onLoadStart, onCanPlay } = handlers;
@@ -743,11 +1739,11 @@ var useEventHandlers = (videoRef, handlers) => {
 };
 
 // src/hooks/useLiveBadge.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var useLiveBadge = (playerRef, options = {}) => {
-  const [isLive, setIsLive] = (0, import_react7.useState)(false);
-  const [isVisible, setIsVisible] = (0, import_react7.useState)(false);
-  const intervalRef = (0, import_react7.useRef)(null);
+  const [isLive, setIsLive] = (0, import_react8.useState)(false);
+  const [isVisible, setIsVisible] = (0, import_react8.useState)(false);
+  const intervalRef = (0, import_react8.useRef)(null);
   const { enabled = true, onLiveStateChange } = options;
   const checkLiveStatus = () => {
     if (!playerRef.current || !enabled) {
@@ -778,7 +1774,7 @@ var useLiveBadge = (playerRef, options = {}) => {
       }
     }
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!enabled) {
       setIsLive(false);
       setIsVisible(false);
@@ -793,7 +1789,7 @@ var useLiveBadge = (playerRef, options = {}) => {
       }
     };
   }, [enabled, playerRef.current]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
@@ -812,19 +1808,19 @@ var useLiveBadge = (playerRef, options = {}) => {
 };
 
 // src/hooks/usePosterFallback.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/hooks/useLiveIndicator.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var useLiveIndicator = (containerRef, options = {}) => {
-  const observerRef = (0, import_react9.useRef)(null);
+  const observerRef = (0, import_react10.useRef)(null);
   const {
     enabled = true,
     indicatorColor = "#ff0000",
     indicatorSize = 8,
     showPulseAnimation = true
   } = options;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!containerRef.current || !enabled) {
       return;
     }
@@ -905,171 +1901,1236 @@ var useLiveIndicator = (containerRef, options = {}) => {
         }
       });
     }
-  };
-};
-
-// src/hooks/useKeyboardControls.ts
-var import_react10 = require("react");
-var useKeyboardControls = (videoRef, options = {}) => {
-  const { skipBack, skipForward, enabled = true } = options;
-  const isDesktop = (0, import_react10.useCallback)(() => {
-    return window.innerWidth > 767 && !/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-  }, []);
-  const handleKeydown = (0, import_react10.useCallback)((event) => {
-    if (!enabled || !isDesktop() || !videoRef.current) return;
-    const activeElement = document.activeElement;
-    if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.isContentEditable)) {
-      return;
+  };
+};
+
+// src/hooks/useKeyboardControls.ts
+var import_react11 = require("react");
+var useKeyboardControls = (videoRef, options = {}) => {
+  const { skipBack, skipForward, enabled = true } = options;
+  const isDesktop = (0, import_react11.useCallback)(() => {
+    return window.innerWidth > 767 && !/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  }, []);
+  const handleKeydown = (0, import_react11.useCallback)((event) => {
+    if (!enabled || !isDesktop() || !videoRef.current) return;
+    const activeElement = document.activeElement;
+    if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.isContentEditable)) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowLeft":
+        event.preventDefault();
+        skipBack?.();
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        skipForward?.();
+        break;
+      case " ":
+      case "Space":
+        event.preventDefault();
+        if (videoRef.current.paused) {
+          videoRef.current.play();
+        } else {
+          videoRef.current.pause();
+        }
+        break;
+    }
+  }, [enabled, videoRef, skipBack, skipForward, isDesktop]);
+  (0, import_react11.useEffect)(() => {
+    if (!enabled || !isDesktop()) return;
+    document.addEventListener("keydown", handleKeydown);
+    return () => {
+      document.removeEventListener("keydown", handleKeydown);
+    };
+  }, [handleKeydown, enabled, isDesktop]);
+  return {
+    isDesktop: isDesktop()
+  };
+};
+
+// src/components/Loading.tsx
+var import_tailwind_merge = require("tailwind-merge");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Loading = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  "div",
+  {
+    className: (0, import_tailwind_merge.twMerge)(
+      "relative bg-[#151515] md:rounded-2xl! overflow-hidden aspect-video text-white w-full h-full flex justify-center items-center text-[10px]",
+      className
+    ),
+    role: "status",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "shaka-spinner-container flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "svg",
+        {
+          className: "shaka-spinner-svg animate-spin h-12 w-12",
+          viewBox: "0 0 64 64",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "circle",
+            {
+              className: "shaka-spinner-path",
+              cx: "32",
+              cy: "32",
+              r: "28",
+              strokeWidth: "4",
+              strokeLinecap: "round"
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: "Loading..." })
+    ]
+  }
+);
+
+// src/components/ErrorScreen.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ErrorScreen = ({ title, description }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-full h-full md:rounded-2xl! aspect-video bg-black", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "bg-[#151515] text-white w-full h-full flex justify-stretch items-center", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "svg",
+    {
+      className: "w-24 h-24 m-6",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      style: { width: 96 },
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "text-2xl mb-2", children: title || "Playback Error" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-lg", children: description || "Unable to play the video. Please try again later." })
+  ] })
+] }) });
+
+// src/components/Title.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Title = ({ title }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "text-white text-xl font-semibold", children: title }) });
+
+// src/components/LiveBadge.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var LiveBadge = ({
+  isVisible,
+  position = "top-right",
+  className = "",
+  style = {},
+  text = "LIVE"
+}) => {
+  if (!isVisible) return null;
+  const positionClasses = {
+    "top-left": "top-4 left-4",
+    "top-right": "top-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "bottom-right": "bottom-4 right-4"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: `
+        absolute z-50 
+        ${positionClasses[position]}
+        bg-red-600 text-white 
+        px-2 py-1 
+        rounded-md 
+        text-xs font-bold 
+        uppercase tracking-wide
+        shadow-lg
+        animate-pulse
+        pointer-events-none
+        ${className}
+      `,
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-2 h-2 bg-white rounded-full animate-pulse" }),
+        text
+      ] })
+    }
+  );
+};
+
+// src/styles.css
+styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root,
+  :host {
+    --font-sans:
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji";
+    --font-mono:
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace;
+    --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --tracking-wide: 0.025em;
+    --tracking-widest: 0.1em;
+    --radius-md: 0.375rem;
+    --radius-2xl: 1rem;
+    --animate-spin: spin 1s linear infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --aspect-video: 16 / 9;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+  }
+}
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html,
+  :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit,
+  ::-webkit-datetime-edit-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-minute-field,
+  ::-webkit-datetime-edit-second-field,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button,
+  input:where([type=button], [type=reset], [type=submit]),
+  ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden=until-found])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-50 {
+    z-index: 50;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .m-6 {
+    margin: calc(var(--spacing) * 6);
+  }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .aspect-video {
+    aspect-ratio: var(--aspect-video);
+  }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
+  .h-full {
+    height: 100%;
+  }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
+  .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
+  .w-full {
+    width: 100%;
+  }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+  .auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+  .grid-flow-col {
+    grid-auto-flow: column;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-stretch {
+    justify-content: stretch;
+  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+  .gap-5 {
+    gap: calc(var(--spacing) * 5);
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .bg-\\[\\#151515\\] {
+    background-color: #151515;
+  }
+  .bg-black {
+    background-color: var(--color-black);
+  }
+  .bg-red-600 {
+    background-color: var(--color-red-600);
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .bg-gradient-to-t {
+    --tw-gradient-position: to top in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .from-black\\/70 {
+    --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-transparent {
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .bg-cover {
+    background-size: cover;
+  }
+  .bg-center {
+    background-position: center;
+  }
+  .bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-left {
+    text-align: left;
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .text-\\[10px\\] {
+    font-size: 10px;
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
+  .tracking-widest {
+    --tw-tracking: var(--tracking-widest);
+    letter-spacing: var(--tracking-widest);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .md\\:rounded-2xl {
+    @media (width >= 48rem) {
+      border-radius: var(--radius-2xl);
+    }
+  }
+  .md\\:rounded-2xl\\! {
+    @media (width >= 48rem) {
+      border-radius: var(--radius-2xl) !important;
+    }
+  }
+  .md\\:text-base {
+    @media (width >= 48rem) {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+  }
+  .md\\:text-sm {
+    @media (width >= 48rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .md\\:text-xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+  }
+}
+@layer components {
+  video::-webkit-media-controls {
+    display: none !important;
+  }
+  video::-webkit-media-controls-panel {
+    display: none !important;
+  }
+  video::-webkit-media-controls-play-button {
+    display: none !important;
+  }
+  video::-webkit-media-controls-timeline {
+    display: none !important;
+  }
+  video::-webkit-media-controls-current-time-display {
+    display: none !important;
+  }
+  video::-webkit-media-controls-time-remaining-display {
+    display: none !important;
+  }
+  video::-webkit-media-controls-mute-button {
+    display: none !important;
+  }
+  video::-webkit-media-controls-volume-slider {
+    display: none !important;
+  }
+  video::-webkit-media-controls-fullscreen-button {
+    display: none !important;
+  }
+  video::-webkit-media-controls-overlay-play-button {
+    display: none !important;
+  }
+  video::-moz-media-controls {
+    display: none !important;
+  }
+  video {
+    outline: none !important;
+  }
+  video[controls] {
+    -webkit-appearance: none !important;
+    appearance: none !important;
+  }
+  video::-webkit-media-controls-enclosure {
+    display: none !important;
+  }
+  video::-webkit-media-controls-start-playback-button {
+    display: none !important;
+  }
+  video[controls]::-webkit-media-controls,
+  video[controls]::-webkit-media-controls-panel,
+  video[controls]::-webkit-media-controls-play-button,
+  video[controls]::-webkit-media-controls-timeline,
+  video[controls]::-webkit-media-controls-current-time-display,
+  video[controls]::-webkit-media-controls-time-remaining-display,
+  video[controls]::-webkit-media-controls-mute-button,
+  video[controls]::-webkit-media-controls-volume-slider,
+  video[controls]::-webkit-media-controls-fullscreen-button,
+  video[controls]::-webkit-media-controls-overlay-play-button,
+  video[controls]::-webkit-media-controls-enclosure,
+  video[controls]::-webkit-media-controls-start-playback-button {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+  }
+  video[controls]::-moz-media-controls {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+  }
+  .motto-video-container {
+    position: relative;
+    width: 100%;
+    min-height: 300px;
+  }
+  @supports (aspect-ratio: 16/9) {
+    .motto-video-container {
+      min-height: auto;
+    }
+  }
+  .motto-video-responsive {
+    position: absolute;
+    top: calc(var(--spacing) * 0);
+    left: calc(var(--spacing) * 0);
+    height: 100%;
+    width: 100%;
+  }
+  .motto-skip-button {
+    position: absolute;
+    top: calc(1/2 * 100%);
+    z-index: 10;
+    display: flex;
+    height: calc(var(--spacing) * 16);
+    width: calc(var(--spacing) * 16);
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: color-mix(in srgb, #000 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
     }
-    switch (event.key) {
-      case "ArrowLeft":
-        event.preventDefault();
-        skipBack?.();
-        break;
-      case "ArrowRight":
-        event.preventDefault();
-        skipForward?.();
-        break;
-      case " ":
-      case "Space":
-        event.preventDefault();
-        if (videoRef.current.paused) {
-          videoRef.current.play();
-        } else {
-          videoRef.current.pause();
-        }
-        break;
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+    color: var(--color-white);
+    opacity: 80%;
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 110%;
+        --tw-scale-y: 110%;
+        --tw-scale-z: 110%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
     }
-  }, [enabled, videoRef, skipBack, skipForward, isDesktop]);
-  (0, import_react10.useEffect)(() => {
-    if (!enabled || !isDesktop()) return;
-    document.addEventListener("keydown", handleKeydown);
-    return () => {
-      document.removeEventListener("keydown", handleKeydown);
-    };
-  }, [handleKeydown, enabled, isDesktop]);
-  return {
-    isDesktop: isDesktop()
-  };
-};
-
-// src/components/Loading.tsx
-var import_tailwind_merge = require("tailwind-merge");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Loading = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-  "div",
-  {
-    className: (0, import_tailwind_merge.twMerge)(
-      "relative bg-[#151515] md:rounded-2xl! overflow-hidden aspect-video text-white w-full h-full flex justify-center items-center text-[10px]",
-      className
-    ),
-    role: "status",
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shaka-spinner-container flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "svg",
-        {
-          className: "shaka-spinner-svg animate-spin h-12 w-12",
-          viewBox: "0 0 64 64",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "circle",
-            {
-              className: "shaka-spinner-path",
-              cx: "32",
-              cy: "32",
-              r: "28",
-              strokeWidth: "4",
-              strokeLinecap: "round"
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Loading..." })
-    ]
-  }
-);
-
-// src/components/ErrorScreen.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ErrorScreen = ({ title, description }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full h-full md:rounded-2xl! aspect-video bg-black", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-[#151515] text-white w-full h-full flex justify-stretch items-center", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "svg",
-    {
-      className: "w-24 h-24 m-6",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      style: { width: 96 },
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "path",
-        {
-          d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
+    &:hover {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
     }
-  ),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "text-2xl mb-2", children: title || "Playback Error" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-lg", children: description || "Unable to play the video. Please try again later." })
-  ] })
-] }) });
-
-// src/components/Title.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Title = ({ title }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "text-white text-xl font-semibold", children: title }) });
-
-// src/components/LiveBadge.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var LiveBadge = ({
-  isVisible,
-  position = "top-right",
-  className = "",
-  style = {},
-  text = "LIVE"
-}) => {
-  if (!isVisible) return null;
-  const positionClasses = {
-    "top-left": "top-4 left-4",
-    "top-right": "top-4 right-4",
-    "bottom-left": "bottom-4 left-4",
-    "bottom-right": "bottom-4 right-4"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "div",
-    {
-      className: `
-        absolute z-50 
-        ${positionClasses[position]}
-        bg-red-600 text-white 
-        px-2 py-1 
-        rounded-md 
-        text-xs font-bold 
-        uppercase tracking-wide
-        shadow-lg
-        animate-pulse
-        pointer-events-none
-        ${className}
-      `,
-      style,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-2 h-2 bg-white rounded-full animate-pulse" }),
-        text
-      ] })
+    &:active {
+      --tw-scale-x: 95%;
+      --tw-scale-y: 95%;
+      --tw-scale-z: 95%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
     }
-  );
-};
-
-// src/styles.css
-styleInject('/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif,\n      system-ui,\n      sans-serif,\n      "Apple Color Emoji",\n      "Segoe UI Emoji",\n      "Segoe UI Symbol",\n      "Noto Color Emoji";\n    --font-mono:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      "Liberation Mono",\n      "Courier New",\n      monospace;\n    --color-red-600: oklch(57.7% 0.245 27.325);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --text-5xl: 3rem;\n    --text-5xl--line-height: 1;\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-wide: 0.025em;\n    --tracking-widest: 0.1em;\n    --radius-md: 0.375rem;\n    --radius-2xl: 1rem;\n    --animate-spin: spin 1s linear infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --aspect-video: 16 / 9;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html,\n  :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b,\n  strong {\n    font-weight: bolder;\n  }\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub,\n  sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol,\n  ul,\n  menu {\n    list-style: none;\n  }\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    display: block;\n    vertical-align: middle;\n  }\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n  button,\n  input,\n  select,\n  optgroup,\n  textarea,\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit,\n  ::-webkit-datetime-edit-year-field,\n  ::-webkit-datetime-edit-month-field,\n  ::-webkit-datetime-edit-day-field,\n  ::-webkit-datetime-edit-hour-field,\n  ::-webkit-datetime-edit-minute-field,\n  ::-webkit-datetime-edit-second-field,\n  ::-webkit-datetime-edit-millisecond-field,\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button,\n  input:where([type=button], [type=reset], [type=submit]),\n  ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=until-found])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-4 {\n    left: calc(var(--spacing) * 4);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .m-6 {\n    margin: calc(var(--spacing) * 6);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-3 {\n    margin-top: calc(var(--spacing) * 3);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .aspect-video {\n    aspect-ratio: var(--aspect-video);\n  }\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-24 {\n    height: calc(var(--spacing) * 24);\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-2 {\n    width: calc(var(--spacing) * 2);\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .auto-cols-max {\n    grid-auto-columns: max-content;\n  }\n  .grid-flow-col {\n    grid-auto-flow: column;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-stretch {\n    justify-content: stretch;\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-5 {\n    gap: calc(var(--spacing) * 5);\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .bg-\\[\\#151515\\] {\n    background-color: #151515;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-red-600 {\n    background-color: var(--color-red-600);\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .bg-gradient-to-t {\n    --tw-gradient-position: to top in oklab;\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-black\\/70 {\n    --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent);\n    }\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .to-transparent {\n    --tw-gradient-to: transparent;\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .bg-cover {\n    background-size: cover;\n  }\n  .bg-center {\n    background-position: center;\n  }\n  .bg-no-repeat {\n    background-repeat: no-repeat;\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .font-mono {\n    font-family: var(--font-mono);\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-5xl {\n    font-size: var(--text-5xl);\n    line-height: var(--tw-leading, var(--text-5xl--line-height));\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-wide {\n    --tw-tracking: var(--tracking-wide);\n    letter-spacing: var(--tracking-wide);\n  }\n  .tracking-widest {\n    --tw-tracking: var(--tracking-widest);\n    letter-spacing: var(--tracking-widest);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .md\\:rounded-2xl {\n    @media (width >= 48rem) {\n      border-radius: var(--radius-2xl);\n    }\n  }\n  .md\\:rounded-2xl\\! {\n    @media (width >= 48rem) {\n      border-radius: var(--radius-2xl) !important;\n    }\n  }\n  .md\\:text-base {\n    @media (width >= 48rem) {\n      font-size: var(--text-base);\n      line-height: var(--tw-leading, var(--text-base--line-height));\n    }\n  }\n  .md\\:text-sm {\n    @media (width >= 48rem) {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .md\\:text-xl {\n    @media (width >= 48rem) {\n      font-size: var(--text-xl);\n      line-height: var(--tw-leading, var(--text-xl--line-height));\n    }\n  }\n}\n@layer components {\n  .motto-video-container {\n    position: relative;\n    width: 100%;\n    min-height: 300px;\n  }\n  @supports (aspect-ratio: 16/9) {\n    .motto-video-container {\n      min-height: auto;\n    }\n  }\n  .motto-video-responsive {\n    position: absolute;\n    top: calc(var(--spacing) * 0);\n    left: calc(var(--spacing) * 0);\n    height: 100%;\n    width: 100%;\n  }\n  .motto-skip-button {\n    position: absolute;\n    top: calc(1/2 * 100%);\n    z-index: 10;\n    display: flex;\n    height: calc(var(--spacing) * 16);\n    width: calc(var(--spacing) * 16);\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n    cursor: pointer;\n    align-items: center;\n    justify-content: center;\n    border-radius: calc(infinity * 1px);\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n    background-color: color-mix(in srgb, #000 70%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);\n    }\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n    color: var(--color-white);\n    opacity: 80%;\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n    &:hover {\n      @media (hover: hover) {\n        --tw-scale-x: 110%;\n        --tw-scale-y: 110%;\n        --tw-scale-z: 110%;\n        scale: var(--tw-scale-x) var(--tw-scale-y);\n      }\n    }\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n    &:active {\n      --tw-scale-x: 95%;\n      --tw-scale-y: 95%;\n      --tw-scale-z: 95%;\n      scale: var(--tw-scale-x) var(--tw-scale-y);\n    }\n  }\n  .motto-skip-button-back {\n    left: calc(var(--spacing) * 5);\n  }\n  .motto-skip-button-forward {\n    right: calc(var(--spacing) * 5);\n  }\n  .motto-mobile-controls-overlay {\n    position: absolute;\n    inset: calc(var(--spacing) * 0);\n    z-index: 20;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n    pointer-events: none;\n  }\n  .motto-mobile-controls-group {\n    display: flex;\n    align-items: center;\n    gap: calc(var(--spacing) * 8);\n    opacity: 100%;\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n    pointer-events: none;\n  }\n  .motto-mobile-play-button {\n    display: flex;\n    height: calc(var(--spacing) * 14);\n    width: calc(var(--spacing) * 14);\n    cursor: pointer;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    border-radius: calc(infinity * 1px);\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n    background-color: color-mix(in srgb, #000 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n    }\n    color: var(--color-white);\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n    pointer-events: auto;\n  }\n  .motto-mobile-play-button:active {\n    --tw-scale-x: 95%;\n    --tw-scale-y: 95%;\n    --tw-scale-z: 95%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .motto-mobile-play-button svg {\n    height: calc(var(--spacing) * 7);\n    width: calc(var(--spacing) * 7);\n  }\n  .motto-mobile-skip-button {\n    display: flex;\n    height: calc(var(--spacing) * 10);\n    width: calc(var(--spacing) * 10);\n    cursor: pointer;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    border-radius: calc(infinity * 1px);\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n    background-color: color-mix(in srgb, #000 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n    }\n    color: var(--color-white);\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n    pointer-events: auto;\n  }\n  .motto-mobile-skip-button:active {\n    --tw-scale-x: 95%;\n    --tw-scale-y: 95%;\n    --tw-scale-z: 95%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .motto-mobile-skip-button svg {\n    height: calc(var(--spacing) * 6);\n    width: calc(var(--spacing) * 6);\n  }\n}\n@media (min-width: 768px) {\n  .motto-mobile-controls-overlay {\n    display: none !important;\n  }\n}\n@media (max-width: 767px) {\n  .shaka-controls-container .motto-native-skip-button,\n  .shaka-controls-container .motto-skip-back-button,\n  .shaka-controls-container .motto-skip-forward-button,\n  .shaka-controls-container .shaka-button[title*="Skip back"],\n  .shaka-controls-container .shaka-button[title*="Skip forward"],\n  .shaka-controls-container .shaka-button[aria-label*="Skip back"],\n  .shaka-controls-container .shaka-button[aria-label*="Skip forward"],\n  .shaka-controls-container button[title*="Skip back"],\n  .shaka-controls-container button[title*="Skip forward"],\n  .shaka-controls-container button[aria-label*="Skip back"],\n  .shaka-controls-container button[aria-label*="Skip forward"],\n  .motto-native-skip-button:not(.motto-mobile-skip-button),\n  .motto-skip-back-button:not(.motto-mobile-skip-button),\n  .motto-skip-forward-button:not(.motto-mobile-skip-button),\n  .shaka-button[title*="Skip back"]:not(.motto-mobile-skip-button),\n  .shaka-button[title*="Skip forward"]:not(.motto-mobile-skip-button),\n  .shaka-button[aria-label*="Skip back"]:not(.motto-mobile-skip-button),\n  .shaka-button[aria-label*="Skip forward"]:not(.motto-mobile-skip-button),\n  button[title*="Skip back"]:not(.motto-mobile-skip-button),\n  button[title*="Skip forward"]:not(.motto-mobile-skip-button),\n  button[aria-label*="Skip back"]:not(.motto-mobile-skip-button),\n  button[aria-label*="Skip forward"]:not(.motto-mobile-skip-button) {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n    width: 0 !important;\n    height: 0 !important;\n    padding: 0 !important;\n    margin: 0 !important;\n  }\n  .motto-mobile-skip-button {\n    display: flex !important;\n    visibility: visible !important;\n    opacity: 1 !important;\n  }\n}\n.shaka-seek-bar-container {\n  height: 6px !important;\n  width: 100% !important;\n  margin: 8px 0 !important;\n  border-radius: 4px !important;\n  position: relative !important;\n  border-top: none !important;\n  border-bottom: none !important;\n  box-shadow: none !important;\n}\n.shaka-seek-bar {\n  height: 6px !important;\n  width: 100% !important;\n  -webkit-appearance: none !important;\n  appearance: none !important;\n  background: transparent !important;\n  cursor: pointer !important;\n  border: none !important;\n  outline: none !important;\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  border-radius: 4px !important;\n}\n.shaka-seek-bar::-webkit-slider-runnable-track {\n  height: 6px !important;\n  background: transparent !important;\n  border-radius: 4px !important;\n  border: none !important;\n}\n.shaka-seek-bar::-moz-range-track {\n  height: 6px !important;\n  background: transparent !important;\n  border-radius: 4px !important;\n  border: none !important;\n}\n.shaka-seek-bar::-webkit-slider-thumb {\n  -webkit-appearance: none !important;\n  appearance: none !important;\n  width: 16px !important;\n  height: 16px !important;\n  border-radius: 50% !important;\n  background: #ffffff !important;\n  cursor: pointer !important;\n  border: 2px solid #ffffff !important;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;\n  margin-top: -4px !important;\n}\n.shaka-seek-bar::-moz-range-thumb {\n  width: 16px !important;\n  height: 16px !important;\n  border-radius: 50% !important;\n  background: #ffffff !important;\n  cursor: pointer !important;\n  border: 2px solid #ffffff !important;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;\n  margin-top: -4px !important;\n}\n.motto-skip-back-button,\n.motto-skip-forward-button,\n.motto-native-skip-button {\n  background: transparent !important;\n  border: none !important;\n  padding: 4px !important;\n  margin: 0px !important;\n  cursor: pointer !important;\n  color: #ffffff !important;\n  transition: all 0.2s ease !important;\n  min-width: 32px !important;\n  height: 32px !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  border-radius: 4px !important;\n  width: 25px;\n}\n.motto-skip-back-button:hover,\n.motto-skip-forward-button:hover,\n.motto-native-skip-button:hover {\n  opacity: 0.8 !important;\n  background: transparent !important;\n  transform: scale(1.05) !important;\n}\n.motto-skip-back-button:active,\n.motto-skip-forward-button:active,\n.motto-native-skip-button:active {\n  transform: scale(0.95) !important;\n}\n.motto-skip-back-button svg,\n.motto-skip-forward-button svg,\n.motto-native-skip-button svg {\n  width: 24px !important;\n  height: 24px !important;\n}\n@media (max-width: 767px) {\n  .shaka-controls-container .motto-native-skip-button,\n  .shaka-controls-container .motto-skip-back-button,\n  .shaka-controls-container .motto-skip-forward-button,\n  .shaka-controls-container .shaka-play-button,\n  .shaka-controls-container .shaka-pause-button {\n    display: none !important;\n  }\n}\n.shaka-spinner-svg {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-spinner-path {\n  stroke: white !important;\n  fill: none !important;\n}\n.shaka-spinner-container {\n  color: white !important;\n}\n.shaka-buffering-spinner {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-buffering-spinner svg {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-buffering-spinner path {\n  stroke: white !important;\n  fill: none !important;\n}\n[data-shaka-player-container] .shaka-spinner,\n[data-shaka-player-container] .spinner {\n  color: white !important;\n  border-color: white !important;\n}\n.material-icons.shaka-spinner {\n  color: white !important;\n}\n.shaka-controls-container .shaka-spinner,\n.shaka-video-container .shaka-spinner {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-controls-container .shaka-spinner svg,\n.shaka-video-container .shaka-spinner svg {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-controls-container .shaka-spinner path,\n.shaka-video-container .shaka-spinner path {\n  stroke: white !important;\n}\n.motto-video-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background:\n    linear-gradient(\n      135deg,\n      #1a1a1a 0%,\n      #2d2d2d 100%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 10;\n  transition: opacity 0.3s ease;\n}\n.motto-video-loading-overlay.hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n.motto-video-loading-content {\n  text-align: center;\n  color: white;\n}\n.motto-video-loading-icon {\n  width: 64px;\n  height: 64px;\n  margin-bottom: 16px;\n  opacity: 0.7;\n}\n.motto-video-loading-text {\n  font-size: 16px;\n  font-weight: 500;\n  margin-bottom: 8px;\n}\n.motto-video-loading-subtext {\n  font-size: 14px;\n  opacity: 0.7;\n}\n@keyframes pulse-live {\n  0% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.7;\n    transform: scale(1.1);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@property --tw-gradient-position { syntax: "*"; inherits: false; }\n@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }\n@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }\n@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-tracking { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-border-style: solid;\n      --tw-duration: initial;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n    }\n  }\n}\n');
+  }
+  .motto-skip-button-back {
+    left: calc(var(--spacing) * 5);
+  }
+  .motto-skip-button-forward {
+    right: calc(var(--spacing) * 5);
+  }
+}
+.shaka-seek-bar-container {
+  height: 6px !important;
+  width: 100% !important;
+  margin: 8px 0 !important;
+  border-radius: 4px !important;
+  position: relative !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  box-shadow: none !important;
+}
+.shaka-seek-bar {
+  height: 6px !important;
+  width: 100% !important;
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  background: transparent !important;
+  cursor: pointer !important;
+  border: none !important;
+  outline: none !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  border-radius: 4px !important;
+}
+.shaka-seek-bar::-webkit-slider-runnable-track {
+  height: 6px !important;
+  background: transparent !important;
+  border-radius: 4px !important;
+  border: none !important;
+}
+.shaka-seek-bar::-moz-range-track {
+  height: 6px !important;
+  background: transparent !important;
+  border-radius: 4px !important;
+  border: none !important;
+}
+.shaka-seek-bar::-webkit-slider-thumb {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  width: 16px !important;
+  height: 16px !important;
+  border-radius: 50% !important;
+  background: #ffffff !important;
+  cursor: pointer !important;
+  border: 2px solid #ffffff !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
+  margin-top: -4px !important;
+}
+.shaka-seek-bar::-moz-range-thumb {
+  width: 16px !important;
+  height: 16px !important;
+  border-radius: 50% !important;
+  background: #ffffff !important;
+  cursor: pointer !important;
+  border: 2px solid #ffffff !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
+  margin-top: -4px !important;
+}
+.motto-skip-back-button,
+.motto-skip-forward-button,
+.motto-native-skip-button {
+  background: transparent !important;
+  border: none !important;
+  padding: 4px !important;
+  margin: 0px !important;
+  cursor: pointer !important;
+  color: #ffffff !important;
+  transition: all 0.2s ease !important;
+  min-width: 32px !important;
+  height: 32px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  border-radius: 4px !important;
+  width: 25px;
+}
+.motto-skip-back-button:hover,
+.motto-skip-forward-button:hover,
+.motto-native-skip-button:hover {
+  opacity: 0.8 !important;
+  background: transparent !important;
+  transform: scale(1.05) !important;
+}
+.motto-skip-back-button:active,
+.motto-skip-forward-button:active,
+.motto-native-skip-button:active {
+  transform: scale(0.95) !important;
+}
+.motto-skip-back-button svg,
+.motto-skip-forward-button svg,
+.motto-native-skip-button svg {
+  width: 24px !important;
+  height: 24px !important;
+}
+.shaka-spinner-svg {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-spinner-path {
+  stroke: white !important;
+  fill: none !important;
+}
+.shaka-spinner-container {
+  color: white !important;
+}
+.shaka-buffering-spinner {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-buffering-spinner svg {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-buffering-spinner path {
+  stroke: white !important;
+  fill: none !important;
+}
+[data-shaka-player-container] .shaka-spinner,
+[data-shaka-player-container] .spinner {
+  color: white !important;
+  border-color: white !important;
+}
+.material-icons.shaka-spinner {
+  color: white !important;
+}
+.shaka-controls-container .shaka-spinner,
+.shaka-video-container .shaka-spinner {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-controls-container .shaka-spinner svg,
+.shaka-video-container .shaka-spinner svg {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-controls-container .shaka-spinner path,
+.shaka-video-container .shaka-spinner path {
+  stroke: white !important;
+}
+.motto-video-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    linear-gradient(
+      135deg,
+      #1a1a1a 0%,
+      #2d2d2d 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  transition: opacity 0.3s ease;
+}
+.motto-video-loading-overlay.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+.motto-video-loading-content {
+  text-align: center;
+  color: white;
+}
+.motto-video-loading-icon {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 16px;
+  opacity: 0.7;
+}
+.motto-video-loading-text {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.motto-video-loading-subtext {
+  font-size: 14px;
+  opacity: 0.7;
+}
+@keyframes pulse-live {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.shaka-play-button {
+  background: rgba(255, 255, 255, 0.1) !important;
+  border: none !important;
+  color: white !important;
+  padding: 10px !important;
+  border-radius: 100% !important;
+  transition: all 0.2s ease !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-width: 55px !important;
+  height: 55px !important;
+}
+.shaka-play-button-container {
+  background: transparent;
+  transition: all 0.2s ease !important;
+}
+.motto-video-container:not(.no-cursor) .shaka-play-button-container {
+  background: rgba(0, 0, 0, 0.3);
+  transition: all 0.s ease !important;
+}
+.shaka-play-button:hover {
+  background: rgba(255, 255, 255, 0.2) !important;
+  transform: scale(1.05) !important;
+}
+.shaka-play-button:active {
+  transform: scale(0.95) !important;
+}
+.shaka-play-button > * {
+  display: none !important;
+}
+.shaka-play-button::after {
+  content: "" !important;
+  width: 35px !important;
+  height: 35px !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" /></svg>') !important;
+  background-repeat: no-repeat !important;
+  background-size: contain !important;
+  background-position: center !important;
+  display: block !important;
+}
+.shaka-play-button[aria-label*=Play]::after {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" /></svg>') !important;
+}
+.shaka-play-button[aria-label*=Pause]::after {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z" clip-rule="evenodd" /></svg>') !important;
+}
+@property --tw-gradient-position { syntax: "*"; inherits: false; }
+@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
+@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }
+@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }
+@property --tw-gradient-stops { syntax: "*"; inherits: false; }
+@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }
+@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
+@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
+@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
+@property --tw-font-weight { syntax: "*"; inherits: false; }
+@property --tw-tracking { syntax: "*"; inherits: false; }
+@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
+@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
+@property --tw-ring-color { syntax: "*"; inherits: false; }
+@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
+@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-ring-inset { syntax: "*"; inherits: false; }
+@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
+@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-blur { syntax: "*"; inherits: false; }
+@property --tw-brightness { syntax: "*"; inherits: false; }
+@property --tw-contrast { syntax: "*"; inherits: false; }
+@property --tw-grayscale { syntax: "*"; inherits: false; }
+@property --tw-hue-rotate { syntax: "*"; inherits: false; }
+@property --tw-invert { syntax: "*"; inherits: false; }
+@property --tw-opacity { syntax: "*"; inherits: false; }
+@property --tw-saturate { syntax: "*"; inherits: false; }
+@property --tw-sepia { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
+@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
+@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
+@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-duration { syntax: "*"; inherits: false; }
+@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
+@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *,
+    ::before,
+    ::after,
+    ::backdrop {
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-border-style: solid;
+      --tw-duration: initial;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+    }
+  }
+}
+`);
 
 // src/Player.tsx
 var import_tailwind_merge2 = require("tailwind-merge");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Player = (0, import_react11.forwardRef)(
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Player = (0, import_react12.forwardRef)(
   ({
     src,
     autoPlay = false,
@@ -1087,14 +3148,15 @@ var Player = (0, import_react11.forwardRef)(
     chromecastConfig,
     qualityConfig,
     seekbarConfig,
+    iconSizes,
     events,
     containerClassName,
     ...videoProps
   }, ref) => {
-    const videoRef = (0, import_react11.useRef)(null);
-    const containerRef = (0, import_react11.useRef)(null);
-    const adContainerRef = (0, import_react11.useRef)(null);
-    (0, import_react11.useImperativeHandle)(ref, () => videoRef.current, []);
+    const videoRef = (0, import_react12.useRef)(null);
+    const containerRef = (0, import_react12.useRef)(null);
+    const adContainerRef = (0, import_react12.useRef)(null);
+    (0, import_react12.useImperativeHandle)(ref, () => videoRef.current, []);
     const { playerRef, initializePlayer, destroyPlayer } = useShakePlayer({
       src,
       shakaConfig,
@@ -1140,7 +3202,8 @@ var Player = (0, import_react11.forwardRef)(
       chromecastConfig,
       seekbarConfig,
       events?.onSkipBack,
-      events?.onSkipForward
+      events?.onSkipForward,
+      iconSizes
     );
     const { isLive, isVisible: isLiveBadgeVisible } = useLiveBadge(playerRef, {
       enabled: true,
@@ -1194,7 +3257,7 @@ var Player = (0, import_react11.forwardRef)(
         console.warn("Chromecast initialization failed:", error);
       }
     };
-    (0, import_react11.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       const video = videoRef.current;
       if (!video) return;
       const initialize = async () => {
@@ -1220,7 +3283,7 @@ var Player = (0, import_react11.forwardRef)(
         destroyPlayer();
       };
     }, [src]);
-    (0, import_react11.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       const video = videoRef.current;
       if (!video) return;
       video.autoplay = autoPlay;
@@ -1229,14 +3292,31 @@ var Player = (0, import_react11.forwardRef)(
       video.controls = false;
       if (poster) video.poster = poster;
     }, [autoPlay, loop, muted, poster]);
-    (0, import_react11.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       const video = videoRef.current;
       if (!video) return;
       video.controls = false;
       video.setAttribute("controls", "false");
       video.removeAttribute("controls");
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "attributes" && mutation.attributeName === "controls") {
+            if (video.hasAttribute("controls")) {
+              video.removeAttribute("controls");
+              video.controls = false;
+            }
+          }
+        });
+      });
+      observer.observe(video, {
+        attributes: true,
+        attributeFilter: ["controls"]
+      });
+      return () => {
+        observer.disconnect();
+      };
     }, []);
-    (0, import_react11.useImperativeHandle)(ref, () => ({
+    (0, import_react12.useImperativeHandle)(ref, () => ({
       ...videoRef.current,
       // Custom methods for quality control
       getAvailableQualities,
@@ -1259,7 +3339,7 @@ var Player = (0, import_react11.forwardRef)(
     const videoStyle = isResponsive ? {} : { width, height };
     const filteredVideoProps = { ...videoProps };
     delete filteredVideoProps.controls;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         ref: containerRef,
@@ -1268,7 +3348,7 @@ var Player = (0, import_react11.forwardRef)(
         "data-shaka-player-container": true,
         "data-shaka-player-cast-receiver-id": chromecastConfig?.receiverApplicationId,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "video",
             {
               ref: videoRef,
@@ -1277,11 +3357,12 @@ var Player = (0, import_react11.forwardRef)(
               height: isResponsive ? void 0 : height,
               style: videoStyle,
               controls: false,
+              playsInline: true,
               ...filteredVideoProps
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LiveBadge, { isVisible: isLiveBadgeVisible }),
-          imaConfig && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LiveBadge, { isVisible: isLiveBadgeVisible }),
+          imaConfig && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               ref: adContainerRef,
@@ -1296,7 +3377,7 @@ var Player = (0, import_react11.forwardRef)(
 Player.displayName = "Player";
 
 // src/Video.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_tailwind_merge3 = require("tailwind-merge");
 var import_react_query = require("@tanstack/react-query");
 
@@ -1437,7 +3518,7 @@ var getErrorType = (error, video) => {
 };
 
 // src/messages/useMessages.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/messages/en.json
 var en_default = {
@@ -1739,9 +3820,9 @@ var getBrowserLanguage = () => {
   return availableLanguages[language] ? language : "en";
 };
 var useMessages = (locale) => {
-  const [language, setLanguage] = (0, import_react12.useState)("en");
-  const [translations, setTranslations] = (0, import_react12.useState)(availableLanguages.en);
-  (0, import_react12.useEffect)(() => {
+  const [language, setLanguage] = (0, import_react13.useState)("en");
+  const [translations, setTranslations] = (0, import_react13.useState)(availableLanguages.en);
+  (0, import_react13.useEffect)(() => {
     const lang = !!availableLanguages?.[locale] ? locale : getBrowserLanguage();
     ;
     setLanguage(lang);
@@ -1767,7 +3848,7 @@ var useMessages = (locale) => {
 var useMessages_default = useMessages;
 
 // src/Video.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Video = ({
   videoId,
   publicKey,
@@ -1803,13 +3884,13 @@ var Video = ({
   const { t } = useMessages_default(locale);
   const activePlaylist = findHLSPlaylist(video);
   const hlsUrl = activePlaylist?.url;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (events?.onVideoData && video) {
       events.onVideoData(video);
     }
   }, [video, events]);
   if (isLoading || !providedVideoData && !video) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loading, {}) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Loading, {}) }) });
   }
   if (!isLoading && video && !hlsUrl && events?.onEmptyPlaylists) {
     events.onEmptyPlaylists();
@@ -1822,8 +3903,8 @@ var Video = ({
     }
     const title = t(errorKey) || t("DEFAULT_ERROR");
     const description = t(`${errorKey}_DESCRIPTION`) || t("DEFAULT_ERROR_DESCRIPTION");
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative w-full h-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative w-full h-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         ErrorScreen,
         {
           title,
@@ -1834,13 +3915,13 @@ var Video = ({
     ] }) });
   }
   if (!hlsUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative w-full h-full bg-[#151515]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { title: video?.name || "" }),
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative w-full h-full bg-[#151515]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Title, { title: video?.name || "" }),
       children
     ] }) });
   }
   console.log("hlsUrl", hlsUrl);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Player,
     {
       ...props,
@@ -1854,10 +3935,10 @@ var Video = ({
 };
 
 // src/Event.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_tailwind_merge4 = require("tailwind-merge");
 var import_react_query2 = require("@tanstack/react-query");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Event = ({
   publicKey,
   eventId,
@@ -1887,8 +3968,8 @@ var Event = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [activePlaylist, setActivePlaylist] = (0, import_react14.useState)();
-  const [activeVideoId, setActiveVideoId] = (0, import_react14.useState)();
+  const [activePlaylist, setActivePlaylist] = (0, import_react15.useState)();
+  const [activeVideoId, setActiveVideoId] = (0, import_react15.useState)();
   const videoIds = eventData?.videoIds ?? [];
   const {
     data: videosData,
@@ -1904,8 +3985,8 @@ var Event = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [loadingApisState, setLoadingApisState] = (0, import_react14.useState)(true);
-  (0, import_react14.useEffect)(() => {
+  const [loadingApisState, setLoadingApisState] = (0, import_react15.useState)(true);
+  (0, import_react15.useEffect)(() => {
     if (videosData !== void 0) {
       setLoadingApisState(false);
       const videosWithPlaylists = videosData.filter(
@@ -1937,12 +4018,12 @@ var Event = ({
     }
   }, [videosData, eventData]);
   const { t } = useMessages_default(locale);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (events?.onEventData && eventData) {
       events.onEventData(eventData);
     }
   }, [eventData, events]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (events?.onVideoData && activeVideoId && videosData) {
       const activeVideo = videosData.find((video) => video.id === activeVideoId);
       if (activeVideo) {
@@ -1950,10 +4031,10 @@ var Event = ({
       }
     }
   }, [activeVideoId, videosData, events]);
-  const [error, setError] = (0, import_react14.useState)(null);
-  const [loadingPlaylist, setLoadingPlaylist] = (0, import_react14.useState)(true);
+  const [error, setError] = (0, import_react15.useState)(null);
+  const [loadingPlaylist, setLoadingPlaylist] = (0, import_react15.useState)(true);
   const videosDataError = videosData?.some((video) => !!video.error);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (eventError || videosError || videosDataError) {
       const errorObj = eventError || videosError || videosData?.find((video) => !!video.error)?.error && new Error(videosData?.find((video) => !!video.error)?.error) || new Error("default");
       setError(errorObj);
@@ -1964,7 +4045,7 @@ var Event = ({
       setError(null);
     }
   }, [eventError, videosError, videosDataError, videosData, events]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const eventLoadedWithNoVideos = !isEventLoading && eventData && eventData.videoIds && (!eventData.videoIds || eventData?.videoIds?.length === 0) && !loadingApisState;
     const allApisLoadedWithPotentialVideos = !isEventLoading && !videosIsLoading && eventData && !loadingApisState;
     if (eventLoadedWithNoVideos || allApisLoadedWithPotentialVideos) {
@@ -1974,7 +4055,7 @@ var Event = ({
   if (error) {
     const title = t(error.message)?.length ? t(error.message) : t("DEFAULT_ERROR");
     const description = t(`${error.message}_DESCRIPTION`)?.length ? t(`${error.message}_DESCRIPTION`) : t("DEFAULT_ERROR_DESCRIPTION");
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       ErrorScreen,
       {
         title,
@@ -1986,12 +4067,12 @@ var Event = ({
     events.onEmptyPlaylists();
   }
   if (loadingPlaylist) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Loading, {}) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Loading, {}) }) });
   }
   if (activePlaylist && activeVideoId && videosData) {
     const activeVideo = videosData.find((video) => video.id === activeVideoId);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative w-full h-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         Player,
         {
           ...props,
@@ -2000,8 +4081,8 @@ var Event = ({
           events,
           containerClassName: "w-full h-full"
         }
-      ),
-      !hideTitle && eventData && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ) }),
+      !hideTitle && eventData && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         TitleAndDescription,
         {
           title: eventData.title,
@@ -2010,10 +4091,10 @@ var Event = ({
           locale
         }
       )
-    ] }) });
+    ] });
   }
   if (eventData) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       PreEvent,
       {
         event: eventData,
@@ -2035,12 +4116,12 @@ function PreEvent({
 }) {
   const date = new Date(event.startTime);
   const now = /* @__PURE__ */ new Date();
-  const [remainingTime, setRemainingTime] = (0, import_react14.useState)(
+  const [remainingTime, setRemainingTime] = (0, import_react15.useState)(
     date.getTime() - now.getTime()
   );
   const shouldBeStarted = remainingTime < 0;
   const { t } = useMessages_default(locale);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const interval = setInterval(() => {
       if (remainingTime < 0) {
         clearInterval(interval);
@@ -2050,17 +4131,17 @@ function PreEvent({
     }, 1e3);
     return () => clearInterval(interval);
   }, [date, remainingTime]);
-  const renderCountdown = (0, import_react14.useCallback)(() => {
+  const renderCountdown = (0, import_react15.useCallback)(() => {
     if (shouldBeStarted) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
     }
     const seconds = Math.floor(remainingTime / 1e3) % 60;
     const minutes = Math.floor(remainingTime / 1e3 / 60) % 60;
     const hours = Math.floor(remainingTime / 1e3 / 60 / 60) % 24;
     const days = Math.floor(remainingTime / 1e3 / 60 / 60 / 24);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid grid-flow-col gap-5 text-center auto-cols-max", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-flow-col gap-5 text-center auto-cols-max", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "span",
           {
             style: { "--value": days },
@@ -2069,10 +4150,10 @@ function PreEvent({
             children: days?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "span",
           {
             style: { "--value": hours },
@@ -2081,10 +4162,10 @@ function PreEvent({
             children: hours?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "span",
           {
             style: { "--value": minutes },
@@ -2093,10 +4174,10 @@ function PreEvent({
             children: minutes?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "span",
           {
             style: { "--value": seconds },
@@ -2105,12 +4186,12 @@ function PreEvent({
             children: seconds?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
       ] })
     ] });
   }, [remainingTime, shouldBeStarted, t]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: event?.posterUrl ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: event?.posterUrl ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
         className: "relative overflow-hidden bg-base-200 aspect-video text-base-content w-full h-full flex justify-center items-center flex-col bg-no-repeat bg-cover md:rounded-2xl",
@@ -2119,10 +4200,10 @@ function PreEvent({
           backgroundRepeat: "no-repeat",
           backgroundSize: "cover"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative z-10", children: renderCountdown() })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative z-10", children: renderCountdown() })
       }
     ),
-    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       TitleAndDescription,
       {
         title: event.title,
@@ -2131,18 +4212,18 @@ function PreEvent({
         locale
       }
     )
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
         className: "relative overflow-hidden md:rounded-2xl bg-base-200 aspect-video text-base-content flex flex-col justify-center items-center w-full h-full bg-cover bg-center bg-no-repeat",
         style: {
           backgroundImage: backgroundImageUrl ? `url(${backgroundImageUrl})` : ""
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative z-10", children: renderCountdown() })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative z-10", children: renderCountdown() })
       }
     ),
-    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       TitleAndDescription,
       {
         title: event.title,
@@ -2160,9 +4241,9 @@ var TitleAndDescription = ({
   locale = "en",
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_tailwind_merge4.twMerge)("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
-    startTime ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_tailwind_merge4.twMerge)("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
+    startTime ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
       new Date(startTime || "").toLocaleDateString(locale || "default", {
         month: "long",
         year: "numeric",
@@ -2175,15 +4256,15 @@ var TitleAndDescription = ({
         minute: "2-digit"
       })
     ] }) : null,
-    description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
+    description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
   ] });
 };
 
 // src/CreativeWork.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_tailwind_merge5 = require("tailwind-merge");
 var import_react_query3 = require("@tanstack/react-query");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var CreativeWork = ({
   publicKey,
   creativeWorkId,
@@ -2213,9 +4294,9 @@ var CreativeWork = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [activePlaylist, setActivePlaylist] = (0, import_react15.useState)();
-  const [activeVideoId, setActiveVideoId] = (0, import_react15.useState)();
-  const [showCountDown, setShowCountDown] = (0, import_react15.useState)(false);
+  const [activePlaylist, setActivePlaylist] = (0, import_react16.useState)();
+  const [activeVideoId, setActiveVideoId] = (0, import_react16.useState)();
+  const [showCountDown, setShowCountDown] = (0, import_react16.useState)(false);
   const videoIds = creativeWorkData?.videoIds ?? [];
   const {
     data: videosData,
@@ -2231,8 +4312,8 @@ var CreativeWork = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [loadingApisState, setLoadingApisState] = (0, import_react15.useState)(true);
-  (0, import_react15.useEffect)(() => {
+  const [loadingApisState, setLoadingApisState] = (0, import_react16.useState)(true);
+  (0, import_react16.useEffect)(() => {
     if (videosData !== void 0) {
       setLoadingApisState(false);
       const videosWithPlaylists = videosData.filter(
@@ -2264,7 +4345,7 @@ var CreativeWork = ({
     }
   }, [videosData, creativeWorkData]);
   const { t } = useMessages_default(locale);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (events?.onCreativeWorkData && creativeWorkData) {
       events.onCreativeWorkData(creativeWorkData);
     }
@@ -2272,7 +4353,7 @@ var CreativeWork = ({
       setShowCountDown(true);
     }
   }, [creativeWorkData, events]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (events?.onVideoData && activeVideoId && videosData) {
       const activeVideo = videosData.find((video) => video.id === activeVideoId);
       if (activeVideo) {
@@ -2280,9 +4361,9 @@ var CreativeWork = ({
       }
     }
   }, [activeVideoId, videosData, events]);
-  const [error, setError] = (0, import_react15.useState)(null);
+  const [error, setError] = (0, import_react16.useState)(null);
   const videosDataError = videosData?.some((video) => !!video.error);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (creativeWorkError || videosError || videosDataError) {
       const errorObj = creativeWorkError || videosError || videosData?.find((video) => !!video.error)?.error && new Error(videosData?.find((video) => !!video.error)?.error) || new Error("default");
       setError(errorObj);
@@ -2296,7 +4377,7 @@ var CreativeWork = ({
   if (error) {
     const title = t(error.message)?.length ? t(error.message) : t("DEFAULT_ERROR");
     const description = t(`${error.message}_DESCRIPTION`)?.length ? t(`${error.message}_DESCRIPTION`) : t("DEFAULT_ERROR_DESCRIPTION");
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       ErrorScreen,
       {
         title,
@@ -2304,8 +4385,8 @@ var CreativeWork = ({
       }
     ) }) });
   }
-  const [loadingPlaylist, setLoadingPlaylist] = (0, import_react15.useState)(true);
-  (0, import_react15.useEffect)(() => {
+  const [loadingPlaylist, setLoadingPlaylist] = (0, import_react16.useState)(true);
+  (0, import_react16.useEffect)(() => {
     const creativeWorkLoadedWithNoVideos = !isCreativeWorkLoading && creativeWorkData && creativeWorkData.videoIds && creativeWorkData.videoIds.length === 0;
     const creativeWorkLoadedWithNoData = !isCreativeWorkLoading && creativeWorkData && !creativeWorkData.videoIds;
     const isEventsFinished = !videosIsLoading && videosData && videosData.length > 0 && videosData.every((video) => video.playlists && video.playlists.length === 0);
@@ -2326,10 +4407,10 @@ var CreativeWork = ({
     events
   ]);
   if (isCreativeWorkLoading || videosIsLoading || loadingApisState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Loading, {}) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loading, {}) }) });
   }
   if (showCountDown && creativeWorkData) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative w-full h-full bg-base-200 text-base-content flex justify-center items-center flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full h-full bg-base-200 text-base-content flex justify-center items-center flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       PreCreativeWork,
       {
         creativeWork: creativeWorkData,
@@ -2342,8 +4423,8 @@ var CreativeWork = ({
   }
   if (activeVideoId && activePlaylist && !loadingPlaylist) {
     const activeVideo = videosData?.find((video) => video.id === activeVideoId);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative w-full h-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative w-full h-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         Player,
         {
           ...props,
@@ -2355,7 +4436,7 @@ var CreativeWork = ({
           containerClassName: "w-full h-full"
         }
       ),
-      !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         TitleAndDescription2,
         {
           title: creativeWorkData?.title || "",
@@ -2368,7 +4449,7 @@ var CreativeWork = ({
     ] }) });
   }
   if (loadingPlaylist) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Loading, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loading, {});
   }
   return null;
 };
@@ -2381,12 +4462,12 @@ function PreCreativeWork({
 }) {
   const date = new Date(creativeWork.releaseTime);
   const now = /* @__PURE__ */ new Date();
-  const [remainingTime, setRemainingTime] = (0, import_react15.useState)(
+  const [remainingTime, setRemainingTime] = (0, import_react16.useState)(
     date.getTime() - now.getTime()
   );
   const shouldBeStarted = remainingTime < 0;
   const { t } = useMessages_default(locale);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const interval = setInterval(() => {
       if (remainingTime < 0) {
         clearInterval(interval);
@@ -2400,15 +4481,15 @@ function PreCreativeWork({
   }, [date, remainingTime]);
   const renderCountdown = () => {
     if (shouldBeStarted) {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
     }
     const seconds = Math.floor(remainingTime / 1e3) % 60;
     const minutes = Math.floor(remainingTime / 1e3 / 60) % 60;
     const hours = Math.floor(remainingTime / 1e3 / 60 / 60) % 24;
     const days = Math.floor(remainingTime / 1e3 / 60 / 60 / 24);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "grid grid-flow-col gap-5 text-center auto-cols-max", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "grid grid-flow-col gap-5 text-center auto-cols-max", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "span",
           {
             style: { "--value": days },
@@ -2417,10 +4498,10 @@ function PreCreativeWork({
             children: days?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "span",
           {
             style: { "--value": hours },
@@ -2429,10 +4510,10 @@ function PreCreativeWork({
             children: hours?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "span",
           {
             style: { "--value": minutes },
@@ -2441,10 +4522,10 @@ function PreCreativeWork({
             children: minutes?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "span",
           {
             style: { "--value": seconds },
@@ -2453,12 +4534,12 @@ function PreCreativeWork({
             children: seconds?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
       ] })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
       {
         className: "relative overflow-hidden md:rounded-2xl bg-base-200 aspect-video text-base-content flex flex-col justify-center items-center w-full h-full bg-cover bg-center bg-no-repeat",
@@ -2466,12 +4547,12 @@ function PreCreativeWork({
           backgroundImage: backgroundImageUrl ? `url(${backgroundImageUrl})` : ""
         },
         children: [
-          backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative z-10", children: renderCountdown() })
+          backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative z-10", children: renderCountdown() })
         ]
       }
     ),
-    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       TitleAndDescription2,
       {
         title: creativeWork.title,
@@ -2489,9 +4570,9 @@ var TitleAndDescription2 = ({
   locale = "en",
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_tailwind_merge5.twMerge)("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
-    releaseTime ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: (0, import_tailwind_merge5.twMerge)("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
+    releaseTime ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
       new Date(releaseTime || "").toLocaleDateString(locale || "default", {
         month: "long",
         year: "numeric",
@@ -2504,13 +4585,13 @@ var TitleAndDescription2 = ({
         minute: "2-digit"
       })
     ] }) : null,
-    description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
+    description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
   ] });
 };
 
 // src/QueryProvider.tsx
 var import_react_query4 = require("@tanstack/react-query");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var queryClient = new import_react_query4.QueryClient({
   defaultOptions: {
     queries: {
@@ -2524,14 +4605,17 @@ var queryClient = new import_react_query4.QueryClient({
   }
 });
 var QueryProvider = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_query4.QueryClientProvider, { client: queryClient, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_query4.QueryClientProvider, { client: queryClient, children });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BigPlayIcon,
   CreativeWork,
   Event,
   Player,
   QueryProvider,
+  SkipBackIcon,
+  SkipForwardIcon,
   Video,
   queryClient
 });