@mottosports/motto-video-player 1.0.1-rc.7 → 1.0.1-rc.9

package/dist/index.mjs

@@ -1,5 +1,8 @@
 "use client";
 
+// src/index.ts
+import "shaka-player/dist/controls.css";
+
 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
   if (!css || typeof document === "undefined") return;
@@ -23,13 +26,15 @@ 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    --container-4xl: 56rem;\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-8 {\n    height: calc(var(--spacing) * 8);\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-8 {\n    width: calc(var(--spacing) * 8);\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-4xl {\n    max-width: var(--container-4xl);\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  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-white {\n    border-color: var(--color-white);\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  .shaka-controls-container {\n    z-index: 90 !important;\n    height: 100px !important;\n    bottom: 0 !important;\n    top: unset !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@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\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-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-border-style: solid;\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-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 */\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-8 {\n    height: calc(var(--spacing) * 8);\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-8 {\n    width: calc(var(--spacing) * 8);\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  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-white {\n    border-color: var(--color-white);\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-border-style { syntax: "*"; inherits: false; initial-value: solid; }\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-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-border-style: solid;\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-duration: initial;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n    }\n  }\n}\n');
 
 // src/Player.tsx
-import { forwardRef, useEffect as useEffect5, useRef as useRef8, useImperativeHandle } from "react";
+import { forwardRef, useEffect as useEffect4, useRef as useRef8, useImperativeHandle } from "react";
+import shaka2 from "shaka-player/dist/shaka-player.ui";
 
 // src/hooks/useShakePlayer.ts
 import { useRef, useCallback } from "react";
+import { Player as ShakaPlayer, polyfill } from "shaka-player/dist/shaka-player.ui";
 var useShakePlayer = ({
   src,
   shakaConfig,
@@ -40,7 +45,6 @@ var useShakePlayer = ({
   const playerRef = useRef(null);
   const initializePlayer = useCallback(async (video) => {
     try {
-      const { Player: ShakaPlayer, polyfill } = await import("shaka-player/dist/shaka-player.ui");
       polyfill.installAll();
       if (!ShakaPlayer.isBrowserSupported()) {
         throw new Error("Browser not supported by Shaka Player");
@@ -61,6 +65,9 @@ var useShakePlayer = ({
       }
       player.addEventListener("error", (event) => {
         const error = event.detail;
+        if (error?.code === 7e3) {
+          return;
+        }
         console.error("Shaka Player Error:", error);
         onError?.(new Error(`Shaka Player Error: ${error.message || "Unknown error"}`));
       });
@@ -68,6 +75,9 @@ var useShakePlayer = ({
       onPlayerReady?.(player);
       return player;
     } catch (error) {
+      if (error?.code === 7e3) {
+        return;
+      }
       console.error("Error initializing Shaka Player:", error);
       onError?.(error);
       throw error;
@@ -260,6 +270,7 @@ var useMuxAnalytics = (playerRef, muxConfig, onMuxReady, onMuxDataUpdate) => {
 
 // src/hooks/useShakaUI.ts
 import { useCallback as useCallback5, useRef as useRef4 } from "react";
+import { ui as ShakaUI } from "shaka-player/dist/shaka-player.ui";
 var SkipBackButton = class {
   constructor(parent, controls, onSkipBack) {
     this.parent = parent;
@@ -267,10 +278,6 @@ var SkipBackButton = class {
     this.eventManager = { listen: (element, event, handler) => {
       element.addEventListener(event, handler);
     } };
-    if (typeof document === "undefined") {
-      console.warn("SkipBackButton: document is not available (SSR environment)");
-      return;
-    }
     this.button_ = document.createElement("button");
     this.button_.className = "shaka-button motto-native-skip-button";
     this.button_.innerHTML = `
@@ -301,10 +308,6 @@ var SkipForwardButton = class {
     this.eventManager = { listen: (element, event, handler) => {
       element.addEventListener(event, handler);
     } };
-    if (typeof document === "undefined") {
-      console.warn("SkipForwardButton: document is not available (SSR environment)");
-      return;
-    }
     this.button_ = document.createElement("button");
     this.button_.className = "shaka-button motto-native-skip-button";
     this.button_.innerHTML = `
@@ -348,10 +351,6 @@ var MobilePlayButton = class {
   constructor(parent, controls) {
     this.parent = parent;
     this.controls = controls;
-    if (typeof document === "undefined") {
-      console.warn("MobilePlayButton: document is not available (SSR environment)");
-      return;
-    }
     this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
     if (!this.video) {
       console.error("MobilePlayButton: No video element found");
@@ -396,10 +395,6 @@ var MobileSkipBackButton = class {
   constructor(parent, controls, onSkipBack) {
     this.parent = parent;
     this.controls = controls;
-    if (typeof document === "undefined") {
-      console.warn("MobileSkipBackButton: document is not available (SSR environment)");
-      return;
-    }
     this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
     if (!this.video) {
       console.error("MobileSkipBackButton: No video element found");
@@ -431,10 +426,6 @@ var MobileSkipForwardButton = class {
   constructor(parent, controls, onSkipForward) {
     this.parent = parent;
     this.controls = controls;
-    if (typeof document === "undefined") {
-      console.warn("MobileSkipForwardButton: document is not available (SSR environment)");
-      return;
-    }
     this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
     if (!this.video) {
       console.error("MobileSkipForwardButton: No video element found");
@@ -466,10 +457,6 @@ var MobileControlsContainer = class {
   constructor(parent, controls, onSkipBack, onSkipForward) {
     this.parent = parent;
     this.controls = controls;
-    if (typeof document === "undefined") {
-      console.warn("MobileControlsContainer: document is not available (SSR environment)");
-      return;
-    }
     if (!parent) {
       console.error("MobileControlsContainer: No parent element provided");
       return;
@@ -527,9 +514,6 @@ var MobileControlsContainer = class {
     }
   }
   isElementVisible(element) {
-    if (typeof window === "undefined") {
-      return false;
-    }
     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;
@@ -548,88 +532,73 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
   const uiRef = useRef4(null);
   const registeredElements = useRef4(/* @__PURE__ */ new Set());
   const initializeUI = useCallback5(async () => {
-    if (typeof window === "undefined" || typeof document === "undefined") {
-      console.warn("useShakaUI: Cannot initialize UI in SSR environment");
-      return null;
-    }
     if (!controls || !containerRef.current || !playerRef.current || !videoRef.current) {
       return null;
     }
-    try {
-      const { ui: ShakaUI } = await import("shaka-player/dist/shaka-player.ui");
-      let isMobile = false;
-      try {
-        isMobile = typeof window !== "undefined" && typeof navigator !== "undefined" && (window.innerWidth <= 767 || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
-      } catch (error) {
-        isMobile = false;
-      }
-      if (!registeredElements.current.has("skip_back_button")) {
-        ShakaUI.Controls.registerElement("skip_back_button", new SkipBackButtonFactory(onSkipBack));
-        registeredElements.current.add("skip_back_button");
-      }
-      if (!registeredElements.current.has("skip_forward_button")) {
-        ShakaUI.Controls.registerElement("skip_forward_button", new SkipForwardButtonFactory(onSkipForward));
-        registeredElements.current.add("skip_forward_button");
+    const isMobile = window.innerWidth <= 767 || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    if (!registeredElements.current.has("skip_back_button")) {
+      ShakaUI.Controls.registerElement("skip_back_button", new SkipBackButtonFactory(onSkipBack));
+      registeredElements.current.add("skip_back_button");
+    }
+    if (!registeredElements.current.has("skip_forward_button")) {
+      ShakaUI.Controls.registerElement("skip_forward_button", new SkipForwardButtonFactory(onSkipForward));
+      registeredElements.current.add("skip_forward_button");
+    }
+    if (isMobile) {
+      if (!registeredElements.current.has("mobile_controls_container")) {
+        ShakaUI.Controls.registerElement("mobile_controls_container", new MobileControlsContainerFactory(onSkipBack, onSkipForward));
+        registeredElements.current.add("mobile_controls_container");
       }
-      if (isMobile) {
-        if (!registeredElements.current.has("mobile_controls_container")) {
-          ShakaUI.Controls.registerElement("mobile_controls_container", new MobileControlsContainerFactory(onSkipBack, onSkipForward));
-          registeredElements.current.add("mobile_controls_container");
-        }
+    }
+    const ui = new ShakaUI.Overlay(playerRef.current, containerRef.current, videoRef.current);
+    uiRef.current = ui;
+    const controlPanelElements = isMobile ? [
+      "mute",
+      "time_and_duration",
+      "spacer",
+      "fullscreen",
+      "overflow_menu"
+    ] : [
+      "skip_back_button",
+      "play_pause",
+      "skip_forward_button",
+      "mute",
+      "volume",
+      "time_and_duration",
+      "spacer",
+      "fullscreen",
+      "overflow_menu"
+    ];
+    const uiConfig = {
+      seekBarColors: {
+        base: seekbarColors?.base || "rgba(255, 255, 255, 0.3)",
+        // Unbuffered track
+        buffered: seekbarColors?.buffered || "rgba(255, 255, 255, 0.5)",
+        // Buffered but not played
+        played: seekbarColors?.played || "#ffffff"
+        // Progress/played portion (white)
+      },
+      controlPanelElements,
+      ...chromecastConfig?.receiverApplicationId && {
+        "castReceiverAppId": chromecastConfig.receiverApplicationId,
+        "castAndroidReceiverCompatible": false
       }
-      const ui = new ShakaUI.Overlay(playerRef.current, containerRef.current, videoRef.current);
-      uiRef.current = ui;
-      const controlPanelElements = isMobile ? [
-        "mute",
-        "time_and_duration",
-        "spacer",
-        "fullscreen",
-        "overflow_menu"
-      ] : [
-        "skip_back_button",
-        "play_pause",
-        "skip_forward_button",
-        "mute",
-        "volume",
-        "time_and_duration",
-        "spacer",
-        "fullscreen",
-        "overflow_menu"
-      ];
-      const uiConfig = {
-        seekBarColors: {
-          base: seekbarColors?.base || "rgba(255, 255, 255, 0.3)",
-          // Unbuffered track
-          buffered: seekbarColors?.buffered || "rgba(255, 255, 255, 0.5)",
-          // Buffered but not played
-          played: seekbarColors?.played || "#ffffff"
-          // Progress/played portion (white)
-        },
-        controlPanelElements,
-        ...chromecastConfig?.receiverApplicationId && {
-          "castReceiverAppId": chromecastConfig.receiverApplicationId,
-          "castAndroidReceiverCompatible": false
+    };
+    if (chromecastConfig?.receiverApplicationId) {
+      uiConfig.castReceiverAppId = chromecastConfig.receiverApplicationId;
+      uiConfig.castAndroidReceiverCompatible = false;
+    }
+    ui.configure(uiConfig);
+    if (isMobile) {
+      setTimeout(() => {
+        const container = containerRef.current;
+        const video = videoRef.current;
+        if (container && video) {
+          new MobileControlsContainer(container, { getVideo: () => video }, onSkipBack, onSkipForward);
         }
-      };
-      if (chromecastConfig?.receiverApplicationId) {
-        uiConfig.castReceiverAppId = chromecastConfig.receiverApplicationId;
-        uiConfig.castAndroidReceiverCompatible = false;
-      }
-      ui.configure(uiConfig);
-      if (isMobile) {
-        setTimeout(() => {
-          const container = containerRef.current;
-          const video = videoRef.current;
-          if (container && video) {
-            new MobileControlsContainer(container, { getVideo: () => video }, onSkipBack, onSkipForward);
-          }
-        }, 500);
-      }
-      return ui;
-    } catch (error) {
-      console.error("Error initializing Shaka UI:", error);
-      return null;
+      }, 500);
     }
+    return ui;
   }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward]);
   const destroyUI = useCallback5(() => {
     if (uiRef.current) {
@@ -760,9 +729,6 @@ var useLiveIndicator = (containerRef, options = {}) => {
     showPulseAnimation = true
   } = options;
   useEffect3(() => {
-    if (typeof window === "undefined" || typeof document === "undefined") {
-      return;
-    }
     if (!containerRef.current || !enabled) {
       return;
     }
@@ -848,213 +814,6 @@ var useLiveIndicator = (containerRef, options = {}) => {
   };
 };
 
-// src/hooks/useShakaAbsoluteTime.ts
-import { useEffect as useEffect4, useState as useState3 } from "react";
-function useShakaAbsoluteTime({
-  player,
-  controls,
-  manualStreamStartDate
-}) {
-  const [detectedStreamStart, setDetectedStreamStart] = useState3(null);
-  const detectStreamStartFromManifest = async () => {
-    if (!player) return null;
-    try {
-      const manifest = player.getManifest();
-      if (!manifest) return null;
-      const isLive = player.isLive();
-      if (!isLive) return null;
-      const video = player.getMediaElement();
-      if (video && video.seekable && video.seekable.length > 0) {
-        const seekableStart = video.seekable.start(0);
-        const seekableEnd = video.seekable.end(0);
-        const seekableDuration = seekableEnd - seekableStart;
-        const now = Date.now() / 1e3;
-        const estimatedStreamStart = now - seekableDuration;
-        return new Date(estimatedStreamStart * 1e3);
-      }
-      const stats = player.getStats();
-      if (stats && stats.manifestTimeSeconds) {
-        return new Date((Date.now() / 1e3 - stats.manifestTimeSeconds) * 1e3);
-      }
-      try {
-        const bufferedTimeRanges = video?.buffered;
-        if (bufferedTimeRanges && bufferedTimeRanges.length > 0) {
-          const totalBuffered = bufferedTimeRanges.end(bufferedTimeRanges.length - 1);
-          const now = Date.now() / 1e3;
-          return new Date((now - totalBuffered) * 1e3);
-        }
-      } catch (error) {
-        console.warn("Error extracting buffered timing info:", error);
-      }
-      console.warn("Could not detect stream start time from manifest");
-      return null;
-    } catch (error) {
-      console.warn("Error detecting stream start time:", error);
-      return null;
-    }
-  };
-  useEffect4(() => {
-    if (!player || manualStreamStartDate) return;
-    const detectStartTime = async () => {
-      setTimeout(async () => {
-        const detectedStart = await detectStreamStartFromManifest();
-        if (detectedStart) {
-          setDetectedStreamStart(detectedStart);
-          console.log("Detected stream start time:", detectedStart.toISOString());
-        }
-      }, 1e3);
-    };
-    const onManifestParsed = () => {
-      detectStartTime();
-    };
-    detectStartTime();
-    try {
-      player.addEventListener("manifestparsed", onManifestParsed);
-      player.addEventListener("streaming", onManifestParsed);
-    } catch (error) {
-      console.warn("Could not add manifest event listeners:", error);
-    }
-    return () => {
-      try {
-        player.removeEventListener("manifestparsed", onManifestParsed);
-        player.removeEventListener("streaming", onManifestParsed);
-      } catch (error) {
-      }
-    };
-  }, [player, manualStreamStartDate]);
-  const effectiveStreamStart = manualStreamStartDate || detectedStreamStart;
-  useEffect4(() => {
-    if (!player || !controls || !effectiveStreamStart) return;
-    const video = player.getMediaElement();
-    if (!video) return;
-    let originalGetDisplayTime;
-    let timeDisplayElement;
-    const formatElapsedTime = (elapsedSeconds) => {
-      const hours = Math.floor(elapsedSeconds / 3600);
-      const minutes = Math.floor(elapsedSeconds % 3600 / 60);
-      const seconds = Math.floor(elapsedSeconds % 60);
-      if (hours > 0) {
-        return [hours, minutes, seconds].map((val) => val.toString().padStart(2, "0")).join(":");
-      } else {
-        return [minutes, seconds].map((val) => val.toString().padStart(2, "0")).join(":");
-      }
-    };
-    const getElapsedTime = () => {
-      const now = /* @__PURE__ */ new Date();
-      const elapsedMs = now.getTime() - effectiveStreamStart.getTime();
-      return Math.max(0, elapsedMs / 1e3);
-    };
-    const customGetDisplayTime = function() {
-      const elapsedSeconds = getElapsedTime();
-      return formatElapsedTime(elapsedSeconds);
-    };
-    const setupTimeDisplayOverride = () => {
-      try {
-        const controlsContainer = controls.getControlsContainer();
-        if (!controlsContainer) return;
-        const timeDisplay = controlsContainer.querySelector(".shaka-current-time");
-        if (timeDisplay) {
-          timeDisplayElement = timeDisplay;
-          if (timeDisplayElement.getDisplayTime) {
-            originalGetDisplayTime = timeDisplayElement.getDisplayTime.bind(timeDisplayElement);
-            timeDisplayElement.getDisplayTime = customGetDisplayTime.bind(timeDisplayElement);
-          } else {
-            setupDirectTextUpdate();
-          }
-        }
-      } catch (error) {
-        console.warn("Error setting up time display override:", error);
-        setupDirectTextUpdate();
-      }
-    };
-    const setupDirectTextUpdate = () => {
-      let animationFrameId;
-      let isDestroyed = false;
-      const updateTimeDisplay = () => {
-        if (isDestroyed) return;
-        try {
-          const controlsContainer = controls.getControlsContainer();
-          if (controlsContainer) {
-            const currentTimeLabels = controlsContainer.querySelectorAll(".shaka-current-time");
-            const elapsedSeconds = getElapsedTime();
-            const timeText = formatElapsedTime(elapsedSeconds);
-            currentTimeLabels.forEach((label) => {
-              if (label && label.textContent !== timeText) {
-                label.textContent = timeText;
-              }
-            });
-          }
-        } catch (error) {
-          console.warn("Error updating time display:", error);
-        }
-        animationFrameId = requestAnimationFrame(updateTimeDisplay);
-      };
-      updateTimeDisplay();
-      return () => {
-        isDestroyed = true;
-        if (animationFrameId) {
-          cancelAnimationFrame(animationFrameId);
-        }
-      };
-    };
-    const setupSeekbarTooltip = () => {
-      try {
-        const controlsContainer = controls.getControlsContainer();
-        if (!controlsContainer) return;
-        const seekBar = controlsContainer.querySelector(".shaka-seek-bar");
-        if (!seekBar) return;
-        const onSeekBarMouseMove = (event) => {
-          const rect = seekBar.getBoundingClientRect();
-          const pos = (event.clientX - rect.left) / rect.width;
-          const totalElapsedSeconds = getElapsedTime();
-          const seekableRange = video.seekable;
-          if (seekableRange.length > 0) {
-            const seekableDuration = seekableRange.end(0) - seekableRange.start(0);
-            const positionInStream = totalElapsedSeconds - seekableDuration * (1 - pos);
-            const timeAtPosition = Math.max(0, positionInStream);
-            seekBar.title = formatElapsedTime(timeAtPosition);
-          } else {
-            seekBar.title = formatElapsedTime(totalElapsedSeconds);
-          }
-        };
-        seekBar.addEventListener("mousemove", onSeekBarMouseMove);
-        return () => {
-          seekBar.removeEventListener("mousemove", onSeekBarMouseMove);
-        };
-      } catch (error) {
-        console.warn("Error setting up seekbar tooltip:", error);
-        return () => {
-        };
-      }
-    };
-    const setupWithDelay = () => {
-      setTimeout(() => {
-        setupTimeDisplayOverride();
-        const cleanupSeekbar = setupSeekbarTooltip();
-        setupWithDelay.cleanupSeekbar = cleanupSeekbar;
-      }, 100);
-    };
-    setupWithDelay();
-    return () => {
-      if (timeDisplayElement && originalGetDisplayTime) {
-        try {
-          timeDisplayElement.getDisplayTime = originalGetDisplayTime;
-        } catch (error) {
-          console.warn("Error restoring original getDisplayTime:", error);
-        }
-      }
-      if (setupWithDelay.cleanupSeekbar) {
-        setupWithDelay.cleanupSeekbar();
-      }
-    };
-  }, [player, controls, effectiveStreamStart]);
-  return {
-    detectedStreamStart,
-    effectiveStreamStart,
-    isUsingManualDate: !!manualStreamStartDate
-  };
-}
-
 // src/components/Loading.tsx
 import { twMerge } from "tailwind-merge";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -1148,7 +907,7 @@ var LiveBadge = ({
 };
 
 // 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    --container-4xl: 56rem;\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-8 {\n    height: calc(var(--spacing) * 8);\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-8 {\n    width: calc(var(--spacing) * 8);\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-4xl {\n    max-width: var(--container-4xl);\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  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-white {\n    border-color: var(--color-white);\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  .shaka-controls-container {\n    z-index: 90 !important;\n    height: 100px !important;\n    bottom: 0 !important;\n    top: unset !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-border-style { syntax: "*"; inherits: false; initial-value: solid; }\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-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-border-style: solid;\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-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 */\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-8 {\n    height: calc(var(--spacing) * 8);\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-8 {\n    width: calc(var(--spacing) * 8);\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  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-white {\n    border-color: var(--color-white);\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-border-style { syntax: "*"; inherits: false; initial-value: solid; }\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-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-border-style: solid;\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-duration: initial;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n    }\n  }\n}\n');
 
 // src/Player.tsx
 import { twMerge as twMerge2 } from "tailwind-merge";
@@ -1173,7 +932,6 @@ var Player = forwardRef(
     seekbarConfig,
     events,
     containerClassName,
-    streamStartDate,
     ...props
   }, ref) => {
     const videoRef = useRef8(null);
@@ -1234,16 +992,10 @@ var Player = forwardRef(
       indicatorSize: 8,
       showPulseAnimation: true
     });
-    const { detectedStreamStart, effectiveStreamStart } = useShakaAbsoluteTime({
-      player: playerRef.current,
-      controls: uiRef.current,
-      manualStreamStartDate: streamStartDate
-    });
-    const initializeAds = async () => {
+    const initializeAds = () => {
       if (!imaConfig || !playerRef.current || !videoRef.current) return;
       const adManager = playerRef.current.getAdManager();
       if (!adManager) return;
-      const shaka2 = await import("shaka-player/dist/shaka-player.ui");
       adManager.addEventListener(shaka2.ads?.Utils?.AD_STARTED, () => {
         events?.onAdStart?.();
       });
@@ -1280,7 +1032,7 @@ var Player = forwardRef(
         console.warn("Chromecast initialization failed:", error);
       }
     };
-    useEffect5(() => {
+    useEffect4(() => {
       const video = videoRef.current;
       if (!video) return;
       const initialize = async () => {
@@ -1291,7 +1043,7 @@ var Player = forwardRef(
           configureQuality();
           await initializeUI();
           initializeMux();
-          await initializeAds();
+          initializeAds();
           initializeChromecast();
         } catch (error) {
           console.error("Error during player initialization:", error);
@@ -1320,7 +1072,7 @@ var Player = forwardRef(
       handleMuxError,
       playerRef
     ]);
-    useEffect5(() => {
+    useEffect4(() => {
       const video = videoRef.current;
       if (!video) return;
       video.autoplay = autoPlay;
@@ -1367,7 +1119,6 @@ var Player = forwardRef(
               width: isResponsive ? void 0 : width,
               height: isResponsive ? void 0 : height,
               style: videoStyle,
-              poster,
               controls: false,
               ...props
             }
@@ -1388,7 +1139,7 @@ var Player = forwardRef(
 Player.displayName = "Player";
 
 // src/Video.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { twMerge as twMerge3 } from "tailwind-merge";
 import { useQuery } from "@tanstack/react-query";
 
@@ -1436,11 +1187,6 @@ async function fetchVideosList(publicKey, videoIds, mottoToken, skip = 0, limit
 }
 
 // src/api/event.ts
-var EventsSortDirection = /* @__PURE__ */ ((EventsSortDirection3) => {
-  EventsSortDirection3["ASC"] = "asc";
-  EventsSortDirection3["DESC"] = "desc";
-  return EventsSortDirection3;
-})(EventsSortDirection || {});
 async function fetchEventData(publicKey, eventId, unused, filter, order, locale) {
   const endpoint = "https://cda.mottostreaming.com/motto.cda.cms.event.v1.EventService/GetEvent";
   const url = new URL(endpoint);
@@ -1466,11 +1212,6 @@ async function fetchEventData(publicKey, eventId, unused, filter, order, locale)
 }
 
 // src/api/creative-work.ts
-var CreativeWorksSortDirection = /* @__PURE__ */ ((CreativeWorksSortDirection3) => {
-  CreativeWorksSortDirection3["ASC"] = "asc";
-  CreativeWorksSortDirection3["DESC"] = "desc";
-  return CreativeWorksSortDirection3;
-})(CreativeWorksSortDirection || {});
 async function fetchCreativeWorkData(publicKey, creativeWorkId, unused, filter, order, locale) {
   const endpoint = "https://cda.mottostreaming.com/motto.cda.cms.creative_work.v1.CreativeWorkService/GetCreativeWork";
   const url = new URL(endpoint);
@@ -1539,7 +1280,7 @@ var getErrorType = (error, video) => {
 };
 
 // src/messages/useMessages.tsx
-import { useState as useState4, useEffect as useEffect6 } from "react";
+import { useState as useState3, useEffect as useEffect5 } from "react";
 
 // src/messages/en.json
 var en_default = {
@@ -1837,21 +1578,15 @@ var availableLanguages = {
   fa: fa_default
 };
 var getBrowserLanguage = () => {
-  if (typeof window === "undefined" || typeof navigator === "undefined") {
-    return "en";
-  }
-  try {
-    const language = navigator.language.split("-")[0];
-    return availableLanguages[language] ? language : "en";
-  } catch (error) {
-    return "en";
-  }
+  const language = navigator.language.split("-")[0];
+  return availableLanguages[language] ? language : "en";
 };
 var useMessages = (locale) => {
-  const [language, setLanguage] = useState4("en");
-  const [translations, setTranslations] = useState4(availableLanguages.en);
-  useEffect6(() => {
+  const [language, setLanguage] = useState3("en");
+  const [translations, setTranslations] = useState3(availableLanguages.en);
+  useEffect5(() => {
     const lang = !!availableLanguages?.[locale] ? locale : getBrowserLanguage();
+    ;
     setLanguage(lang);
     setTranslations(availableLanguages[lang]);
   }, [locale]);
@@ -1911,7 +1646,7 @@ var Video = ({
   const { t } = useMessages_default(locale);
   const activePlaylist = findHLSPlaylist(video);
   const hlsUrl = activePlaylist?.url;
-  useEffect7(() => {
+  useEffect6(() => {
     if (events?.onVideoData && video) {
       events.onVideoData(video);
     }
@@ -1962,7 +1697,7 @@ var Video = ({
 };
 
 // src/Event.tsx
-import { useCallback as useCallback7, useEffect as useEffect8, useState as useState5 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect7, useState as useState4 } from "react";
 import { twMerge as twMerge4 } from "tailwind-merge";
 import { useQuery as useQuery2 } from "@tanstack/react-query";
 import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -1995,8 +1730,8 @@ var Event = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [activePlaylist, setActivePlaylist] = useState5();
-  const [activeVideoId, setActiveVideoId] = useState5();
+  const [activePlaylist, setActivePlaylist] = useState4();
+  const [activeVideoId, setActiveVideoId] = useState4();
   const videoIds = eventData?.videoIds ?? [];
   const {
     data: videosData,
@@ -2012,8 +1747,8 @@ var Event = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [loadingApisState, setLoadingApisState] = useState5(true);
-  useEffect8(() => {
+  const [loadingApisState, setLoadingApisState] = useState4(true);
+  useEffect7(() => {
     if (videosData !== void 0) {
       setLoadingApisState(false);
       const videosWithPlaylists = videosData.filter(
@@ -2045,12 +1780,12 @@ var Event = ({
     }
   }, [videosData, eventData]);
   const { t } = useMessages_default(locale);
-  useEffect8(() => {
+  useEffect7(() => {
     if (events?.onEventData && eventData) {
       events.onEventData(eventData);
     }
   }, [eventData, events]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (events?.onVideoData && activeVideoId && videosData) {
       const activeVideo = videosData.find((video) => video.id === activeVideoId);
       if (activeVideo) {
@@ -2058,10 +1793,10 @@ var Event = ({
       }
     }
   }, [activeVideoId, videosData, events]);
-  const [error, setError] = useState5(null);
-  const [loadingPlaylist, setLoadingPlaylist] = useState5(true);
+  const [error, setError] = useState4(null);
+  const [loadingPlaylist, setLoadingPlaylist] = useState4(true);
   const videosDataError = videosData?.some((video) => !!video.error);
-  useEffect8(() => {
+  useEffect7(() => {
     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);
@@ -2072,7 +1807,7 @@ var Event = ({
       setError(null);
     }
   }, [eventError, videosError, videosDataError, videosData, events]);
-  useEffect8(() => {
+  useEffect7(() => {
     const eventLoadedWithNoVideos = !isEventLoading && eventData && eventData.videoIds && (!eventData.videoIds || eventData?.videoIds?.length === 0) && !loadingApisState;
     const allApisLoadedWithPotentialVideos = !isEventLoading && !videosIsLoading && eventData && !loadingApisState;
     if (eventLoadedWithNoVideos || allApisLoadedWithPotentialVideos) {
@@ -2143,12 +1878,12 @@ function PreEvent({
 }) {
   const date = new Date(event.startTime);
   const now = /* @__PURE__ */ new Date();
-  const [remainingTime, setRemainingTime] = useState5(
+  const [remainingTime, setRemainingTime] = useState4(
     date.getTime() - now.getTime()
   );
   const shouldBeStarted = remainingTime < 0;
   const { t } = useMessages_default(locale);
-  useEffect8(() => {
+  useEffect7(() => {
     const interval = setInterval(() => {
       if (remainingTime < 0) {
         clearInterval(interval);
@@ -2217,9 +1952,8 @@ function PreEvent({
       ] })
     ] });
   }, [remainingTime, shouldBeStarted, t]);
-  console.log("event", event);
   return /* @__PURE__ */ jsx7(Fragment, { children: event?.posterUrl ? /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsx7(
       "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",
@@ -2228,10 +1962,7 @@ function PreEvent({
           backgroundRepeat: "no-repeat",
           backgroundSize: "cover"
         },
-        children: [
-          /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 bg-base-200" }),
-          /* @__PURE__ */ jsx7("div", { className: "relative z-10", children: renderCountdown() })
-        ]
+        children: /* @__PURE__ */ jsx7("div", { className: "relative z-10", children: renderCountdown() })
       }
     ),
     !hideTitle && /* @__PURE__ */ jsx7(
@@ -2292,7 +2023,7 @@ var TitleAndDescription = ({
 };
 
 // src/CreativeWork.tsx
-import { useEffect as useEffect9, useState as useState6 } from "react";
+import { useEffect as useEffect8, useState as useState5 } from "react";
 import { twMerge as twMerge5 } from "tailwind-merge";
 import { useQuery as useQuery3 } from "@tanstack/react-query";
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -2325,9 +2056,9 @@ var CreativeWork = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [activePlaylist, setActivePlaylist] = useState6();
-  const [activeVideoId, setActiveVideoId] = useState6();
-  const [showCountDown, setShowCountDown] = useState6(false);
+  const [activePlaylist, setActivePlaylist] = useState5();
+  const [activeVideoId, setActiveVideoId] = useState5();
+  const [showCountDown, setShowCountDown] = useState5(false);
   const videoIds = creativeWorkData?.videoIds ?? [];
   const {
     data: videosData,
@@ -2343,8 +2074,8 @@ var CreativeWork = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [loadingApisState, setLoadingApisState] = useState6(true);
-  useEffect9(() => {
+  const [loadingApisState, setLoadingApisState] = useState5(true);
+  useEffect8(() => {
     if (videosData !== void 0) {
       setLoadingApisState(false);
       const videosWithPlaylists = videosData.filter(
@@ -2376,7 +2107,7 @@ var CreativeWork = ({
     }
   }, [videosData, creativeWorkData]);
   const { t } = useMessages_default(locale);
-  useEffect9(() => {
+  useEffect8(() => {
     if (events?.onCreativeWorkData && creativeWorkData) {
       events.onCreativeWorkData(creativeWorkData);
     }
@@ -2384,7 +2115,7 @@ var CreativeWork = ({
       setShowCountDown(true);
     }
   }, [creativeWorkData, events]);
-  useEffect9(() => {
+  useEffect8(() => {
     if (events?.onVideoData && activeVideoId && videosData) {
       const activeVideo = videosData.find((video) => video.id === activeVideoId);
       if (activeVideo) {
@@ -2392,9 +2123,9 @@ var CreativeWork = ({
       }
     }
   }, [activeVideoId, videosData, events]);
-  const [error, setError] = useState6(null);
+  const [error, setError] = useState5(null);
   const videosDataError = videosData?.some((video) => !!video.error);
-  useEffect9(() => {
+  useEffect8(() => {
     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);
@@ -2416,8 +2147,8 @@ var CreativeWork = ({
       }
     ) }) });
   }
-  const [loadingPlaylist, setLoadingPlaylist] = useState6(true);
-  useEffect9(() => {
+  const [loadingPlaylist, setLoadingPlaylist] = useState5(true);
+  useEffect8(() => {
     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);
@@ -2493,12 +2224,12 @@ function PreCreativeWork({
 }) {
   const date = new Date(creativeWork.releaseTime);
   const now = /* @__PURE__ */ new Date();
-  const [remainingTime, setRemainingTime] = useState6(
+  const [remainingTime, setRemainingTime] = useState5(
     date.getTime() - now.getTime()
   );
   const shouldBeStarted = remainingTime < 0;
   const { t } = useMessages_default(locale);
-  useEffect9(() => {
+  useEffect8(() => {
     const interval = setInterval(() => {
       if (remainingTime < 0) {
         clearInterval(interval);
@@ -2638,21 +2369,12 @@ var queryClient = new QueryClient({
 var QueryProvider = ({ children }) => {
   return /* @__PURE__ */ jsx9(QueryClientProvider, { client: queryClient, children });
 };
-
-// src/index.ts
-var index_default = { Player };
 export {
   CreativeWork,
-  CreativeWorksSortDirection,
   Event,
-  EventsSortDirection,
   Player,
   QueryProvider,
   Video,
-  index_default as default,
-  fetchCreativeWorkData,
-  fetchEventData,
-  fetchVideoData,
-  fetchVideosList
+  queryClient
 };
 //# sourceMappingURL=index.mjs.map