@zezosoft/react-player 1.0.0 → 1.0.1

package/dist/VideoPlayer/components/controls/BottomControls.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import "../time-line/time-line.css";
 import { IControlsBottomProps } from "../../../types";
-declare const BottomControls: React.FC<IControlsBottomProps>;
+interface BottomControlsProps extends IControlsBottomProps {
+    isLive?: boolean;
+}
+declare const BottomControls: React.FC<BottomControlsProps>;
 export default BottomControls;

package/dist/VideoPlayer/components/controls/MiddleControls.d.ts

@@ -1,3 +1,9 @@
 import React from "react";
-declare const MiddleControls: React.FC;
+import type { PlayPauseButtonConfig } from "../../types/VideoPlayerTypes";
+interface MiddleControlsProps {
+    config?: {
+        playPauseButtonConfig?: PlayPauseButtonConfig;
+    };
+}
+declare const MiddleControls: React.FC<MiddleControlsProps>;
 export default MiddleControls;

package/dist/VideoPlayer/components/controls/VideoPlayerControls.d.ts

@@ -1,4 +1,7 @@
 import * as React from "react";
 import { IPlayerConfig } from "../../../types";
-declare const VideoPlayerControls: React.FC<IPlayerConfig>;
+interface VideoPlayerControlsProps extends IPlayerConfig {
+    isLive?: boolean;
+}
+declare const VideoPlayerControls: React.FC<VideoPlayerControlsProps>;
 export default VideoPlayerControls;

package/dist/VideoPlayer/components/time-line/TimeLine.d.ts

@@ -17,5 +17,10 @@ export interface TimeLineProps {
     onChange: (time: number, offsetTime: number) => void;
     getPreviewScreenUrl?: (hoverTimeValue: number) => string;
     trackColor?: string;
+    bufferColor?: string;
+    hoverColor?: string;
+    thumbColor?: string;
+    trackBackgroundColor?: string;
+    isLive?: boolean;
 }
 export declare const VideoSeekSlider: React.FC<TimeLineProps>;

package/dist/VideoPlayer/components/time-line/components/HoverTimeWithPreview.d.ts

@@ -11,6 +11,7 @@ interface HoverTimeWithPreviewProps {
     secondsPrefix?: string;
     minutesPrefix?: string;
     getPreviewScreenUrl?: (hoverTimeValue: number) => string;
+    isLive?: boolean;
 }
 export declare const HoverTimeWithPreview: React.FC<HoverTimeWithPreviewProps>;
 export {};

package/dist/VideoPlayer/components/time-line/components/TimeCodeItem.d.ts

@@ -17,5 +17,8 @@ export interface TimeCodeItemProps {
     onHover?: (label: string) => void;
     withGap?: boolean;
     trackColor?: string;
+    bufferColor?: string;
+    hoverColor?: string;
+    trackBackgroundColor?: string;
 }
 export declare const TimeCodeItem: React.FC<TimeCodeItemProps>;

package/dist/VideoPlayer/components/time-line/components/TimeCodes.d.ts

@@ -11,5 +11,8 @@ export interface TimeCodesProps {
     label: string;
     setLabel: React.Dispatch<React.SetStateAction<string>>;
     trackColor?: string;
+    bufferColor?: string;
+    hoverColor?: string;
+    trackBackgroundColor?: string;
 }
 export declare const TimeCodes: React.FC<TimeCodesProps>;

package/dist/VideoPlayer/hooks/useVideoSource.d.ts

@@ -1 +1 @@
-export declare const useVideoSource: (trackSrc: string, type?: "hls" | "dash" | "mp4" | "other" | "youtube" | undefined) => void;
+export declare const useVideoSource: (trackSrc: string, type?: "hls" | "dash" | "mp4" | "other" | "youtube" | undefined, isLive?: boolean) => void;

package/dist/VideoPlayer/types/VideoPlayerTypes.d.ts

@@ -18,17 +18,33 @@ export interface VideoProps {
     showControls?: boolean;
     isMute?: boolean;
     startFrom?: number;
+    isLive?: boolean;
 }
 export interface VideoQualityConfig {
     defaultQuality?: "auto" | string;
     showInSettings?: boolean;
 }
+export interface SeekBarConfig {
+    trackColor?: string;
+    bufferColor?: string;
+    hoverColor?: string;
+    thumbColor?: string;
+    trackBackgroundColor?: string;
+}
+export interface PlayPauseButtonConfig {
+    backgroundColor?: string;
+    hoverBackgroundColor?: string;
+    borderRadius?: string;
+    padding?: string;
+}
 export interface StyleProps {
     className?: string;
     width?: string;
     height?: string;
     subtitleStyle?: SubtitleStyleConfig;
     qualityConfig?: VideoQualityConfig;
+    seekBarConfig?: SeekBarConfig;
+    playPauseButtonConfig?: PlayPauseButtonConfig;
 }
 export interface EventProps {
     onEnded?: (e: React.SyntheticEvent<HTMLVideoElement>) => void;

package/dist/components/ui/LiveIndicator.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface LiveIndicatorProps {
+    className?: string;
+}
+/**
+ * Clean LIVE indicator with blinking dot animation for live streams.
+ */
+declare const LiveIndicator: React.FC<LiveIndicatorProps>;
+export default LiveIndicator;

package/dist/index.d.ts

@@ -3,5 +3,5 @@ export { default as VideoPlayer } from "./VideoPlayer/VideoPlayer";
 export { useVideoStore } from "./store/VideoState";
 export type { VideoPlayerProps, Episode, SubtitleTrack, IntroConfig, NextEpisodeConfig, WatchHistoryData, } from "./VideoPlayer/types/VideoPlayerTypes";
 export type { SubtitleStyleConfig } from "./VideoPlayer/hooks/useSubtitleStyling";
-export type { VideoQualityConfig } from "./VideoPlayer/types/VideoPlayerTypes";
+export type { VideoQualityConfig, SeekBarConfig, PlayPauseButtonConfig, } from "./VideoPlayer/types/VideoPlayerTypes";
 export type { VideoState, VideoRefsState, VideoPlaybackState, VideoTimingState, VideoControlsState, VideoQualityState, SubtitlesState, EpisodesState, IntroState, } from "./store/types/StoreTypes";

package/dist/index.js

@@ -36,7 +36,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$4 = "/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-400: oklch(70.4% 0.191 22.216);\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-red-600: oklch(57.7% 0.245 27.325);\n    --color-red-700: oklch(50.5% 0.213 27.518);\n    --color-green-500: oklch(72.3% 0.219 149.579);\n    --color-sky-300: oklch(82.8% 0.111 230.318);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-purple-500: oklch(62.7% 0.265 303.9);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-900: oklch(21% 0.034 264.665);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\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-3xl: 1.875rem;\n    --text-3xl--line-height: calc(2.25 / 1.875);\n    --font-weight-normal: 400;\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-wider: 0.05em;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --ease-out: cubic-bezier(0, 0, 0.2, 1);\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --animate-spin: spin 1s linear infinite;\n    --blur-sm: 8px;\n    --blur-md: 12px;\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  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :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, h2, h3, h4, h5, 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, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, 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, 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, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::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, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-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-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\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-2 {\n    top: calc(var(--spacing) * -2);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-full {\n    top: 100%;\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-32 {\n    right: calc(var(--spacing) * 32);\n  }\n  .right-full {\n    right: 100%;\n  }\n  .bottom-36 {\n    bottom: calc(var(--spacing) * 36);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-32 {\n    left: calc(var(--spacing) * 32);\n  }\n  .left-full {\n    left: 100%;\n  }\n  .z-40 {\n    z-index: 40;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .z-\\[-1\\] {\n    z-index: -1;\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  .mx-2 {\n    margin-inline: calc(var(--spacing) * 2);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mr-2 {\n    margin-right: calc(var(--spacing) * 2);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .ml-1 {\n    margin-left: calc(var(--spacing) * 1);\n  }\n  .ml-2 {\n    margin-left: calc(var(--spacing) * 2);\n  }\n  .flex {\n    display: flex;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-1 {\n    height: calc(var(--spacing) * 1);\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-14 {\n    height: calc(var(--spacing) * 14);\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-80 {\n    max-height: calc(var(--spacing) * 80);\n  }\n  .w-3 {\n    width: calc(var(--spacing) * 3);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n  .w-14 {\n    width: calc(var(--spacing) * 14);\n  }\n  .w-80 {\n    width: calc(var(--spacing) * 80);\n  }\n  .w-\\[2px\\] {\n    width: 2px;\n  }\n  .w-\\[10vw\\] {\n    width: 10vw;\n  }\n  .w-\\[15vw\\] {\n    width: 15vw;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .rotate-45 {\n    rotate: 45deg;\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-not-allowed {\n    cursor: not-allowed;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .gap-7 {\n    gap: calc(var(--spacing) * 7);\n  }\n  .space-y-0 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-3 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-\\[5px\\] {\n    border-radius: 5px;\n  }\n  .rounded-\\[7px\\] {\n    border-radius: 7px;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-gray-600 {\n    border-color: var(--color-gray-600);\n  }\n  .border-gray-700\\/60 {\n    border-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent);\n    }\n  }\n  .border-white\\/10 {\n    border-color: color-mix(in srgb, #fff 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n    }\n  }\n  .border-white\\/30 {\n    border-color: color-mix(in srgb, #fff 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);\n    }\n  }\n  .border-white\\/40 {\n    border-color: color-mix(in srgb, #fff 40%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 40%, transparent);\n    }\n  }\n  .bg-\\[\\#3a4049\\] {\n    background-color: #3a4049;\n  }\n  .bg-\\[\\#454545\\] {\n    background-color: #454545;\n  }\n  .bg-\\[rgba\\(0\\,0\\,0\\,0\\.5\\)\\] {\n    background-color: rgba(0,0,0,0.5);\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-black\\/60 {\n    background-color: color-mix(in srgb, #000 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);\n    }\n  }\n  .bg-black\\/90 {\n    background-color: color-mix(in srgb, #000 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 90%, transparent);\n    }\n  }\n  .bg-blue-500 {\n    background-color: var(--color-blue-500);\n  }\n  .bg-gray-500 {\n    background-color: var(--color-gray-500);\n  }\n  .bg-gray-900 {\n    background-color: var(--color-gray-900);\n  }\n  .bg-green-500 {\n    background-color: var(--color-green-500);\n  }\n  .bg-purple-500 {\n    background-color: var(--color-purple-500);\n  }\n  .bg-red-600 {\n    background-color: var(--color-red-600);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .bg-white\\/10 {\n    background-color: color-mix(in srgb, #fff 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n    }\n  }\n  .bg-white\\/20 {\n    background-color: color-mix(in srgb, #fff 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n    }\n  }\n  .bg-white\\/80 {\n    background-color: color-mix(in srgb, #fff 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);\n    }\n  }\n  .bg-linear-to-b {\n    --tw-gradient-position: to bottom;\n    @supports (background-image: linear-gradient(in lab, red, red)) {\n      --tw-gradient-position: to bottom in oklab;\n    }\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-black {\n    --tw-gradient-from: var(--color-black);\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  .from-black\\/80 {\n    --tw-gradient-from: color-mix(in srgb, #000 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-gradient-from: color-mix(in oklab, var(--color-black) 80%, 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  .via-transparent {\n    --tw-gradient-via: transparent;\n    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);\n    --tw-gradient-stops: var(--tw-gradient-via-stops);\n  }\n  .to-black\\/90 {\n    --tw-gradient-to: color-mix(in srgb, #000 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-gradient-to: color-mix(in oklab, var(--color-black) 90%, 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  .bg-cover {\n    background-size: cover;\n  }\n  .bg-center {\n    background-position: center;\n  }\n  .object-contain {\n    object-fit: contain;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .p-10 {\n    padding: calc(var(--spacing) * 10);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-5 {\n    padding-inline: calc(var(--spacing) * 5);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .px-10 {\n    padding-inline: calc(var(--spacing) * 10);\n  }\n  .px-20 {\n    padding-inline: calc(var(--spacing) * 20);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .pt-6 {\n    padding-top: calc(var(--spacing) * 6);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pb-6 {\n    padding-bottom: calc(var(--spacing) * 6);\n  }\n  .pb-10 {\n    padding-bottom: calc(var(--spacing) * 10);\n  }\n  .pb-16 {\n    padding-bottom: calc(var(--spacing) * 16);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\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  .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-normal {\n    --tw-font-weight: var(--font-weight-normal);\n    font-weight: var(--font-weight-normal);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-wider {\n    --tw-tracking: var(--tracking-wider);\n    letter-spacing: var(--tracking-wider);\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-gray-200 {\n    color: var(--color-gray-200);\n  }\n  .text-gray-300 {\n    color: var(--color-gray-300);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-900 {\n    color: var(--color-gray-900);\n  }\n  .text-red-400 {\n    color: var(--color-red-400);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-red-600 {\n    color: var(--color-red-600);\n  }\n  .text-sky-300 {\n    color: var(--color-sky-300);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .normal-case {\n    text-transform: none;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow-2xl {\n    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .backdrop-blur-md {\n    --tw-backdrop-blur: blur(var(--blur-md));\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .backdrop-blur-sm {\n    --tw-backdrop-blur: blur(var(--blur-sm));\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-all {\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  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\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  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .ease-out {\n    --tw-ease: var(--ease-out);\n    transition-timing-function: var(--ease-out);\n  }\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .hover\\:scale-105 {\n    &:hover {\n      @media (hover: hover) {\n        --tw-scale-x: 105%;\n        --tw-scale-y: 105%;\n        --tw-scale-z: 105%;\n        scale: var(--tw-scale-x) var(--tw-scale-y);\n      }\n    }\n  }\n  .hover\\:border-white\\/50 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: color-mix(in srgb, #fff 50%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          border-color: color-mix(in oklab, var(--color-white) 50%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-red-700 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-red-700);\n      }\n    }\n  }\n  .hover\\:bg-white\\/5 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 5%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-white\\/10 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 10%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-white\\/30 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 30%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 30%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-white\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 90%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .hover\\:shadow-lg {\n    &:hover {\n      @media (hover: hover) {\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      }\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-gray-400 {\n    &:focus {\n      --tw-ring-color: var(--color-gray-400);\n    }\n  }\n  .focus\\:ring-offset-1 {\n    &:focus {\n      --tw-ring-offset-width: 1px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .active\\:scale-95 {\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  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:bg-white\\/50 {\n    &:disabled {\n      background-color: color-mix(in srgb, #fff 50%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-white) 50%, transparent);\n      }\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .lg\\:h-18 {\n    @media (width >= 64rem) {\n      height: calc(var(--spacing) * 18);\n    }\n  }\n  .lg\\:w-18 {\n    @media (width >= 64rem) {\n      width: calc(var(--spacing) * 18);\n    }\n  }\n  .lg\\:pb-12 {\n    @media (width >= 64rem) {\n      padding-bottom: calc(var(--spacing) * 12);\n    }\n  }\n  .lg\\:text-2xl {\n    @media (width >= 64rem) {\n      font-size: var(--text-2xl);\n      line-height: var(--tw-leading, var(--text-2xl--line-height));\n    }\n  }\n  .lg\\:text-3xl {\n    @media (width >= 64rem) {\n      font-size: var(--text-3xl);\n      line-height: var(--tw-leading, var(--text-3xl--line-height));\n    }\n  }\n  .lg\\:text-base {\n    @media (width >= 64rem) {\n      font-size: var(--text-base);\n      line-height: var(--tw-leading, var(--text-base--line-height));\n    }\n  }\n}\n.noCursor {\n  cursor: none !important;\n}\n.icon-class {\n  height: calc(var(--spacing) * 14);\n  width: calc(var(--spacing) * 14);\n  cursor: pointer;\n  color: var(--color-gray-400);\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\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      color: var(--color-gray-200);\n    }\n  }\n  @media (width >= 64rem) {\n    height: calc(var(--spacing) * 18);\n  }\n  @media (width >= 64rem) {\n    width: calc(var(--spacing) * 18);\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-gradient-position {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-via {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-to {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-via-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-tracking {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-backdrop-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-scale-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\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    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\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-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n    }\n  }\n}\n";
+var css_248z$4 = "/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-400: oklch(70.4% 0.191 22.216);\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-red-600: oklch(57.7% 0.245 27.325);\n    --color-red-700: oklch(50.5% 0.213 27.518);\n    --color-green-500: oklch(72.3% 0.219 149.579);\n    --color-sky-300: oklch(82.8% 0.111 230.318);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-purple-500: oklch(62.7% 0.265 303.9);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-900: oklch(21% 0.034 264.665);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\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-3xl: 1.875rem;\n    --text-3xl--line-height: calc(2.25 / 1.875);\n    --font-weight-normal: 400;\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-wider: 0.05em;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --ease-out: cubic-bezier(0, 0, 0.2, 1);\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --animate-spin: spin 1s linear infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --blur-sm: 8px;\n    --blur-md: 12px;\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  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :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, h2, h3, h4, h5, 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, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, 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, 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, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::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, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-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-none {\n    pointer-events: none;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .absolute {\n    position: absolute;\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-2 {\n    top: calc(var(--spacing) * -2);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1 {\n    top: calc(var(--spacing) * 1);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-full {\n    top: 100%;\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-32 {\n    right: calc(var(--spacing) * 32);\n  }\n  .right-full {\n    right: 100%;\n  }\n  .bottom-36 {\n    bottom: calc(var(--spacing) * 36);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1 {\n    left: calc(var(--spacing) * 1);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-32 {\n    left: calc(var(--spacing) * 32);\n  }\n  .left-full {\n    left: 100%;\n  }\n  .z-40 {\n    z-index: 40;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .z-\\[-1\\] {\n    z-index: -1;\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  .mx-2 {\n    margin-inline: calc(var(--spacing) * 2);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .-mr-1 {\n    margin-right: calc(var(--spacing) * -1);\n  }\n  .mr-2 {\n    margin-right: calc(var(--spacing) * 2);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .ml-1 {\n    margin-left: calc(var(--spacing) * 1);\n  }\n  .ml-2 {\n    margin-left: calc(var(--spacing) * 2);\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .table {\n    display: table;\n  }\n  .h-1 {\n    height: calc(var(--spacing) * 1);\n  }\n  .h-1\\.5 {\n    height: calc(var(--spacing) * 1.5);\n  }\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n  .h-2\\.5 {\n    height: calc(var(--spacing) * 2.5);\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-14 {\n    height: calc(var(--spacing) * 14);\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-80 {\n    max-height: calc(var(--spacing) * 80);\n  }\n  .max-h-\\[min\\(80vh\\,480px\\)\\] {\n    max-height: min(80vh, 480px);\n  }\n  .min-h-0 {\n    min-height: calc(var(--spacing) * 0);\n  }\n  .w-1 {\n    width: calc(var(--spacing) * 1);\n  }\n  .w-1\\.5 {\n    width: calc(var(--spacing) * 1.5);\n  }\n  .w-2 {\n    width: calc(var(--spacing) * 2);\n  }\n  .w-2\\.5 {\n    width: calc(var(--spacing) * 2.5);\n  }\n  .w-3 {\n    width: calc(var(--spacing) * 3);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n  .w-14 {\n    width: calc(var(--spacing) * 14);\n  }\n  .w-80 {\n    width: calc(var(--spacing) * 80);\n  }\n  .w-\\[2px\\] {\n    width: 2px;\n  }\n  .w-\\[10vw\\] {\n    width: 10vw;\n  }\n  .w-\\[15vw\\] {\n    width: 15vw;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-\\[min\\(90vw\\,320px\\)\\] {\n    max-width: min(90vw, 320px);\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-shrink {\n    flex-shrink: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .-translate-x-1 {\n    --tw-translate-x: calc(var(--spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1 {\n    --tw-translate-y: calc(var(--spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .rotate-45 {\n    rotate: 45deg;\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-not-allowed {\n    cursor: not-allowed;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .gap-7 {\n    gap: calc(var(--spacing) * 7);\n  }\n  .space-y-0 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-3 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-\\[5px\\] {\n    border-radius: 5px;\n  }\n  .rounded-\\[7px\\] {\n    border-radius: 7px;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-gray-600 {\n    border-color: var(--color-gray-600);\n  }\n  .border-gray-700 {\n    border-color: var(--color-gray-700);\n  }\n  .border-gray-700\\/60 {\n    border-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent);\n    }\n  }\n  .border-white {\n    border-color: var(--color-white);\n  }\n  .border-white\\/10 {\n    border-color: color-mix(in srgb, #fff 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n    }\n  }\n  .border-white\\/30 {\n    border-color: color-mix(in srgb, #fff 30%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);\n    }\n  }\n  .border-white\\/40 {\n    border-color: color-mix(in srgb, #fff 40%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 40%, transparent);\n    }\n  }\n  .bg-\\[\\#3a4049\\] {\n    background-color: #3a4049;\n  }\n  .bg-\\[\\#454545\\] {\n    background-color: #454545;\n  }\n  .bg-\\[rgba\\(0\\,0\\,0\\,0\\.5\\)\\] {\n    background-color: rgba(0,0,0,0.5);\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-black\\/60 {\n    background-color: color-mix(in srgb, #000 60%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);\n    }\n  }\n  .bg-black\\/90 {\n    background-color: color-mix(in srgb, #000 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 90%, transparent);\n    }\n  }\n  .bg-blue-500 {\n    background-color: var(--color-blue-500);\n  }\n  .bg-gray-500 {\n    background-color: var(--color-gray-500);\n  }\n  .bg-gray-900 {\n    background-color: var(--color-gray-900);\n  }\n  .bg-green-500 {\n    background-color: var(--color-green-500);\n  }\n  .bg-purple-500 {\n    background-color: var(--color-purple-500);\n  }\n  .bg-red-500 {\n    background-color: var(--color-red-500);\n  }\n  .bg-red-500\\/15 {\n    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 15%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent);\n    }\n  }\n  .bg-red-600 {\n    background-color: var(--color-red-600);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .bg-white\\/10 {\n    background-color: color-mix(in srgb, #fff 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n    }\n  }\n  .bg-white\\/20 {\n    background-color: color-mix(in srgb, #fff 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);\n    }\n  }\n  .bg-white\\/80 {\n    background-color: color-mix(in srgb, #fff 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);\n    }\n  }\n  .bg-linear-to-b {\n    --tw-gradient-position: to bottom;\n    @supports (background-image: linear-gradient(in lab, red, red)) {\n      --tw-gradient-position: to bottom in oklab;\n    }\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-black {\n    --tw-gradient-from: var(--color-black);\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  .from-black\\/80 {\n    --tw-gradient-from: color-mix(in srgb, #000 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-gradient-from: color-mix(in oklab, var(--color-black) 80%, 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  .via-transparent {\n    --tw-gradient-via: transparent;\n    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);\n    --tw-gradient-stops: var(--tw-gradient-via-stops);\n  }\n  .to-black {\n    --tw-gradient-to: var(--color-black);\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-black\\/90 {\n    --tw-gradient-to: color-mix(in srgb, #000 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-gradient-to: color-mix(in oklab, var(--color-black) 90%, 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  .bg-cover {\n    background-size: cover;\n  }\n  .bg-center {\n    background-position: center;\n  }\n  .object-contain {\n    object-fit: contain;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .p-10 {\n    padding: calc(var(--spacing) * 10);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-5 {\n    padding-inline: calc(var(--spacing) * 5);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .px-10 {\n    padding-inline: calc(var(--spacing) * 10);\n  }\n  .px-20 {\n    padding-inline: calc(var(--spacing) * 20);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .pt-6 {\n    padding-top: calc(var(--spacing) * 6);\n  }\n  .pr-1 {\n    padding-right: calc(var(--spacing) * 1);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pb-6 {\n    padding-bottom: calc(var(--spacing) * 6);\n  }\n  .pb-10 {\n    padding-bottom: calc(var(--spacing) * 10);\n  }\n  .pb-16 {\n    padding-bottom: calc(var(--spacing) * 16);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\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  .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-normal {\n    --tw-font-weight: var(--font-weight-normal);\n    font-weight: var(--font-weight-normal);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-wider {\n    --tw-tracking: var(--tracking-wider);\n    letter-spacing: var(--tracking-wider);\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-gray-200 {\n    color: var(--color-gray-200);\n  }\n  .text-gray-300 {\n    color: var(--color-gray-300);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-900 {\n    color: var(--color-gray-900);\n  }\n  .text-red-400 {\n    color: var(--color-red-400);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-red-600 {\n    color: var(--color-red-600);\n  }\n  .text-sky-300 {\n    color: var(--color-sky-300);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .normal-case {\n    text-transform: none;\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow-2xl {\n    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-1 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-red-500 {\n    --tw-ring-color: var(--color-red-500);\n  }\n  .ring-red-500\\/25 {\n    --tw-ring-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 25%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-ring-color: color-mix(in oklab, var(--color-red-500) 25%, transparent);\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .backdrop-blur-md {\n    --tw-backdrop-blur: blur(var(--blur-md));\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .backdrop-blur-sm {\n    --tw-backdrop-blur: blur(var(--blur-sm));\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .backdrop-filter {\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-all {\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  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\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  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .ease-out {\n    --tw-ease: var(--ease-out);\n    transition-timing-function: var(--ease-out);\n  }\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .hover\\:scale-105 {\n    &:hover {\n      @media (hover: hover) {\n        --tw-scale-x: 105%;\n        --tw-scale-y: 105%;\n        --tw-scale-z: 105%;\n        scale: var(--tw-scale-x) var(--tw-scale-y);\n      }\n    }\n  }\n  .hover\\:border-white\\/50 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: color-mix(in srgb, #fff 50%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          border-color: color-mix(in oklab, var(--color-white) 50%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-red-700 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-red-700);\n      }\n    }\n  }\n  .hover\\:bg-white\\/5 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 5%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-white\\/10 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 10%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-white\\/30 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 30%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 30%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-white\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 90%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\n    }\n  }\n  .hover\\:shadow-lg {\n    &:hover {\n      @media (hover: hover) {\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      }\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-gray-400 {\n    &:focus {\n      --tw-ring-color: var(--color-gray-400);\n    }\n  }\n  .focus\\:ring-offset-1 {\n    &:focus {\n      --tw-ring-offset-width: 1px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .active\\:scale-95 {\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  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:bg-white\\/50 {\n    &:disabled {\n      background-color: color-mix(in srgb, #fff 50%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-white) 50%, transparent);\n      }\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .lg\\:h-18 {\n    @media (width >= 64rem) {\n      height: calc(var(--spacing) * 18);\n    }\n  }\n  .lg\\:w-18 {\n    @media (width >= 64rem) {\n      width: calc(var(--spacing) * 18);\n    }\n  }\n  .lg\\:pb-12 {\n    @media (width >= 64rem) {\n      padding-bottom: calc(var(--spacing) * 12);\n    }\n  }\n  .lg\\:text-2xl {\n    @media (width >= 64rem) {\n      font-size: var(--text-2xl);\n      line-height: var(--tw-leading, var(--text-2xl--line-height));\n    }\n  }\n  .lg\\:text-3xl {\n    @media (width >= 64rem) {\n      font-size: var(--text-3xl);\n      line-height: var(--tw-leading, var(--text-3xl--line-height));\n    }\n  }\n  .lg\\:text-base {\n    @media (width >= 64rem) {\n      font-size: var(--text-base);\n      line-height: var(--tw-leading, var(--text-base--line-height));\n    }\n  }\n}\n@keyframes live-dot-blink {\n  0%, 100% {\n    opacity: 1;\n    transform: scale(1);\n    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);\n  }\n  50% {\n    opacity: 0.35;\n    transform: scale(0.85);\n    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);\n  }\n}\n.animate-live-blink {\n  animation: live-dot-blink 1.2s ease-in-out infinite;\n}\n.noCursor {\n  cursor: none !important;\n}\n.icon-class {\n  height: calc(var(--spacing) * 14);\n  width: calc(var(--spacing) * 14);\n  cursor: pointer;\n  color: var(--color-gray-400);\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\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      color: var(--color-gray-200);\n    }\n  }\n  @media (width >= 64rem) {\n    height: calc(var(--spacing) * 18);\n  }\n  @media (width >= 64rem) {\n    width: calc(var(--spacing) * 18);\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-gradient-position {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-via {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-to {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-via-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-tracking {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-backdrop-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-scale-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\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    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\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-outline-style: solid;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n    }\n  }\n}\n";
 styleInject(css_248z$4,{"insertAt":"top"});
 
 const createVideoRefsSlice = (set) => ({
@@ -88,6 +88,8 @@ const createVideoQualitySlice = (set) => ({
     setCurrentQuality: (currentQuality) => set({ currentQuality }),
     streamType: "mp4",
     setStreamType: (streamType) => set({ streamType }),
+    isLive: false,
+    setIsLive: (isLive) => set({ isLive }),
 });
 
 const createSubtitlesSlice = (set) => ({
@@ -420,7 +422,7 @@ function getTimeScale(currentTime, startTime, endTime, isTimePassed) {
     return isTimePassed ? 1 : currentScalePercent;
 }
 
-const TimeCodeItem = memo(({ label = "", startTime, maxTime, endTime, currentTime, seekHoverTime, bufferTime, isTimePassed = false, isBufferPassed = false, isHoverPassed = false, onHover = () => undefined, withGap, trackColor, }) => {
+const TimeCodeItem = memo(({ label = "", startTime, maxTime, endTime, currentTime, seekHoverTime, bufferTime, isTimePassed = false, isBufferPassed = false, isHoverPassed = false, onHover = () => undefined, withGap, trackColor, bufferColor, hoverColor, trackBackgroundColor, }) => {
     const positionPercent = getPositionPercent(maxTime, startTime);
     const timeDiff = endTime - startTime;
     const widthPercent = (timeDiff / maxTime) * 100;
@@ -429,15 +431,26 @@ const TimeCodeItem = memo(({ label = "", startTime, maxTime, endTime, currentTim
     const seekHoverTimeScale = getTimeScale(seekHoverTime, startTime, endTime, isHoverPassed);
     const bufferTimeScale = getTimeScale(bufferTime, startTime, endTime, isBufferPassed);
     const handleMouseMove = () => onHover(label);
+    const trackBg = trackBackgroundColor ?? "rgba(255, 255, 255, 0.2)";
+    const bufColor = bufferColor ?? "rgba(255, 255, 255, 0.3)";
+    const hovColor = hoverColor ?? "rgba(255, 255, 255, 0.5)";
+    const progColor = trackColor ?? "#ff0000";
     return (React__default.createElement("div", { className: mainClassName, onMouseMove: handleMouseMove, style: {
             width: `${widthPercent}%`,
             left: `${positionPercent}%`,
+            "--seek-track-bg": trackBg,
         } },
-        React__default.createElement("div", { className: "inner-seek-block buffered", "data-test-id": "test-buffered", style: { transform: `scaleX(${bufferTimeScale})` } }),
-        React__default.createElement("div", { className: "inner-seek-block seek-hover", "data-test-id": "test-seek-hover", style: { transform: `scaleX(${seekHoverTimeScale})` } }),
+        React__default.createElement("div", { className: "inner-seek-block buffered", "data-test-id": "test-buffered", style: {
+                transform: `scaleX(${bufferTimeScale})`,
+                backgroundColor: bufColor,
+            } }),
+        React__default.createElement("div", { className: "inner-seek-block seek-hover", "data-test-id": "test-seek-hover", style: {
+                transform: `scaleX(${seekHoverTimeScale})`,
+                backgroundColor: hovColor,
+            } }),
         React__default.createElement("div", { className: "inner-seek-block connect", style: {
                 transform: `scaleX(${currentTimeScale})`,
-                backgroundColor: trackColor || "#ff0000",
+                backgroundColor: progColor,
             } })));
 });
 
@@ -448,7 +461,7 @@ function positionToMs(max, position, trackWidth) {
 
 const getEndTimeByIndex = (timeCodes, index, max) => (index + 1 < timeCodes.length ? timeCodes[index + 1].fromMs : max);
 
-const TimeCodes = ({ max = 1000, currentTime = 0, bufferTime = 0, seekHoverPosition = 0, timeCodes, trackWidth, mobileSeeking, label, setLabel, trackColor, }) => {
+const TimeCodes = ({ max = 1000, currentTime = 0, bufferTime = 0, seekHoverPosition = 0, timeCodes, trackWidth, mobileSeeking, label, setLabel, trackColor, bufferColor, hoverColor, trackBackgroundColor, }) => {
     const hoverTimeValue = positionToMs(max, seekHoverPosition, trackWidth);
     const handleLabelChange = useCallback((currentLabel) => {
         if (label !== currentLabel) {
@@ -478,7 +491,7 @@ const TimeCodes = ({ max = 1000, currentTime = 0, bufferTime = 0, seekHoverPosit
         const newBufferTime = isBufferPassed || !inRange ? 0 : bufferTime;
         inRange = isInRange(hoverTimeValue, fromMs, endTime);
         const newHoverTime = isHoverPassed || !inRange ? 0 : hoverTimeValue;
-        return (React__default.createElement(TimeCodeItem, { key: fromMs, label: description, maxTime: max, startTime: fromMs, endTime: endTime, isTimePassed: isTimePassed, isBufferPassed: isBufferPassed, isHoverPassed: isHoverPassed, currentTime: newCurrentTime, bufferTime: newBufferTime, seekHoverTime: newHoverTime, onHover: handleLabelChange, withGap: true, trackColor: trackColor }));
+        return (React__default.createElement(TimeCodeItem, { key: fromMs, label: description, maxTime: max, startTime: fromMs, endTime: endTime, isTimePassed: isTimePassed, isBufferPassed: isBufferPassed, isHoverPassed: isHoverPassed, currentTime: newCurrentTime, bufferTime: newBufferTime, seekHoverTime: newHoverTime, onHover: handleLabelChange, withGap: true, trackColor: trackColor, bufferColor: bufferColor, hoverColor: hoverColor, trackBackgroundColor: trackBackgroundColor }));
     })));
 };
 
@@ -522,7 +535,7 @@ function timeToTimeString(max, seekHoverTime, offset = 0, minutesPrefix = "", se
     return `${times.hh}:${times.mm}:${times.ss}`;
 }
 
-const HoverTimeWithPreview = ({ max, hoverTimeValue, offset, trackWidth, seekHoverPosition, isThumbActive, limitTimeTooltipBySides, label, minutesPrefix, secondsPrefix, getPreviewScreenUrl, }) => {
+const HoverTimeWithPreview = ({ max, hoverTimeValue, offset, trackWidth, seekHoverPosition, isThumbActive, limitTimeTooltipBySides, label, minutesPrefix, secondsPrefix, getPreviewScreenUrl, isLive = false, }) => {
     const hoverTimeElement = useRef(null);
     const hoverTimeClassName = isThumbActive ? "hover-time active" : "hover-time";
     const hoverTimePosition = getHoverTimePosition(seekHoverPosition, hoverTimeElement?.current, trackWidth, limitTimeTooltipBySides);
@@ -531,8 +544,11 @@ const HoverTimeWithPreview = ({ max, hoverTimeValue, offset, trackWidth, seekHov
         isThumbActive && getPreviewScreenUrl && (React__default.createElement("div", { className: "preview-screen", style: {
                 backgroundImage: `url(${getPreviewScreenUrl(hoverTimeValue)})`,
             } })),
-        label && React__default.createElement("div", null, label),
-        hoverTimeString));
+        label && !isLive && React__default.createElement("div", null, label),
+        isLive ? (React__default.createElement("span", { className: "inline-flex items-center gap-2 rounded-[5px] bg-red-500/15 px-2 py-1 text-xs font-semibold text-red-400 ring-1 ring-red-500/25 backdrop-blur-sm" },
+            React__default.createElement("span", { className: "relative flex h-1.5 w-1.5 shrink-0 items-center justify-center", "aria-hidden": true },
+                React__default.createElement("span", { className: "h-1.5 w-1.5 rounded-full bg-red-500 animate-live-blink" })),
+            "LIVE")) : (hoverTimeString)));
 };
 
 const Thumb = ({ max, currentTime, isThumbActive, trackColor, }) => {
@@ -549,10 +565,10 @@ const Thumb = ({ max, currentTime, isThumbActive, trackColor, }) => {
             } })));
 };
 
-var css_248z$3 = ".ui-video-seek-slider {\n  position: relative;\n  touch-action: none;\n}\n.ui-video-seek-slider:focus {\n  outline: none;\n}\n.ui-video-seek-slider .track {\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n}\n.ui-video-seek-slider .track:focus {\n  border: 0;\n  outline: none;\n}\n.ui-video-seek-slider .track .main {\n  width: 100%;\n  outline: none;\n  height: 18px;\n  top: 0;\n  position: absolute;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n}\n.ui-video-seek-slider .track .main:before {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 3px;\n  background-color: rgba(255, 255, 255, 0.2);\n  overflow: hidden;\n  transition: height 0.1s;\n  outline: none;\n}\n.ui-video-seek-slider .track .main .inner-seek-block {\n  position: absolute;\n  width: 100%;\n  height: 3px;\n  transition: height 0.1s, opacity 0.4s, transform 0.2s ease-out;\n  transform-origin: 0 0;\n}\n.ui-video-seek-slider .track .main:focus {\n  border: 0;\n  outline: none;\n}\n.ui-video-seek-slider .track .main .buffered {\n  background-color: rgba(255, 255, 255, 0.3);\n  z-index: 2;\n  transition: transform 0.2s ease-out;\n}\n.ui-video-seek-slider .track .main .seek-hover {\n  background-color: rgba(255, 255, 255, 0.5);\n  z-index: 1;\n}\n.ui-video-seek-slider .track .main .connect {\n  background-color: #ff0000;\n  z-index: 3;\n  transform-origin: 0 0;\n}\n.ui-video-seek-slider .track .main.with-gap .inner-seek-block,\n.ui-video-seek-slider .track .main.with-gap:before {\n  width: calc(100% - 2px);\n  margin: 0 auto;\n}\n@media (hover) {\n  .ui-video-seek-slider .track .main:hover:before {\n    height: 8px;\n  }\n  .ui-video-seek-slider .track .main:hover .inner-seek-block {\n    height: 8px;\n  }\n}\n.ui-video-seek-slider .thumb {\n  pointer-events: none;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  left: -6px;\n  z-index: 4;\n  top: 3px;\n}\n.ui-video-seek-slider .thumb .handler {\n  border-radius: 100%;\n  width: 100%;\n  height: 100%;\n  background-color: #ff0000;\n  opacity: 0;\n  transform: scale(0.4);\n  transition: transform 0.2s, opacity 0.2s;\n}\n.ui-video-seek-slider .thumb.active .handler {\n  opacity: 1;\n  transform: scale(1);\n}\n.ui-video-seek-slider .hover-time {\n  text-shadow: 1px 1px 1px #000;\n  position: absolute;\n  line-height: 18px;\n  font-size: 16px;\n  color: #ddd;\n  bottom: 5px;\n  left: 0;\n  padding: 5px 10px;\n  opacity: 0;\n  pointer-events: none;\n  text-align: center;\n}\n.ui-video-seek-slider .hover-time.active {\n  opacity: 1;\n}\n.ui-video-seek-slider .hover-time .preview-screen {\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: center;\n  width: 200px;\n  height: 110px;\n  border-radius: 5px;\n  background-color: #000;\n  margin: 0 auto 10px;\n}\n.ui-video-seek-slider:hover .track .main .seek-hover {\n  opacity: 1;\n}\n\n";
+var css_248z$3 = ".ui-video-seek-slider {\n  position: relative;\n  touch-action: none;\n}\n.ui-video-seek-slider:focus {\n  outline: none;\n}\n.ui-video-seek-slider .track {\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n}\n.ui-video-seek-slider .track:focus {\n  border: 0;\n  outline: none;\n}\n.ui-video-seek-slider .track .main {\n  width: 100%;\n  outline: none;\n  height: 18px;\n  top: 0;\n  position: absolute;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n}\n.ui-video-seek-slider .track .main:before {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 3px;\n  background-color: var(--seek-track-bg, rgba(255, 255, 255, 0.2));\n  overflow: hidden;\n  transition: height 0.1s;\n  outline: none;\n}\n.ui-video-seek-slider .track .main .inner-seek-block {\n  position: absolute;\n  width: 100%;\n  height: 3px;\n  transition: height 0.1s, opacity 0.4s, transform 0.2s ease-out;\n  transform-origin: 0 0;\n}\n.ui-video-seek-slider .track .main:focus {\n  border: 0;\n  outline: none;\n}\n.ui-video-seek-slider .track .main .buffered {\n  background-color: rgba(255, 255, 255, 0.3);\n  z-index: 2;\n  transition: transform 0.2s ease-out;\n}\n.ui-video-seek-slider .track .main .seek-hover {\n  background-color: rgba(255, 255, 255, 0.5);\n  z-index: 1;\n}\n.ui-video-seek-slider .track .main .connect {\n  background-color: #ff0000;\n  z-index: 3;\n  transform-origin: 0 0;\n}\n.ui-video-seek-slider .track .main.with-gap .inner-seek-block,\n.ui-video-seek-slider .track .main.with-gap:before {\n  width: calc(100% - 2px);\n  margin: 0 auto;\n}\n@media (hover) {\n  .ui-video-seek-slider .track .main:hover:before {\n    height: 8px;\n  }\n  .ui-video-seek-slider .track .main:hover .inner-seek-block {\n    height: 8px;\n  }\n}\n.ui-video-seek-slider .thumb {\n  pointer-events: none;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  left: -6px;\n  z-index: 4;\n  top: 3px;\n}\n.ui-video-seek-slider .thumb .handler {\n  border-radius: 100%;\n  width: 100%;\n  height: 100%;\n  background-color: #ff0000;\n  opacity: 0;\n  transform: scale(0.4);\n  transition: transform 0.2s, opacity 0.2s;\n}\n.ui-video-seek-slider .thumb.active .handler {\n  opacity: 1;\n  transform: scale(1);\n}\n.ui-video-seek-slider .hover-time {\n  text-shadow: 1px 1px 1px #000;\n  position: absolute;\n  line-height: 18px;\n  font-size: 16px;\n  color: #ddd;\n  bottom: 5px;\n  left: 0;\n  padding: 5px 10px;\n  opacity: 0;\n  pointer-events: none;\n  text-align: center;\n}\n.ui-video-seek-slider .hover-time.active {\n  opacity: 1;\n}\n.ui-video-seek-slider .hover-time .preview-screen {\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: center;\n  width: 200px;\n  height: 110px;\n  border-radius: 5px;\n  background-color: #000;\n  margin: 0 auto 10px;\n}\n.ui-video-seek-slider:hover .track .main .seek-hover {\n  opacity: 1;\n}\n\n";
 styleInject(css_248z$3,{"insertAt":"top"});
 
-const VideoSeekSlider = ({ max = 1000, currentTime = 0, bufferTime = 0, hideThumbTooltip = false, offset = 0, secondsPrefix = "", minutesPrefix = "", limitTimeTooltipBySides = true, timeCodes, onChange = () => undefined, getPreviewScreenUrl, trackColor, }) => {
+const VideoSeekSlider = ({ max = 1000, currentTime = 0, bufferTime = 0, hideThumbTooltip = false, offset = 0, secondsPrefix = "", minutesPrefix = "", limitTimeTooltipBySides = true, timeCodes, onChange = () => undefined, getPreviewScreenUrl, trackColor, bufferColor, hoverColor, thumbColor, trackBackgroundColor, isLive = false, }) => {
     const [seekHoverPosition, setSeekHoverPosition] = useState(0);
     const [label, setLabel] = useState("");
     const seeking = useRef(false);
@@ -636,10 +652,21 @@ const VideoSeekSlider = ({ max = 1000, currentTime = 0, bufferTime = 0, hideThum
     }, [max, offset, trackWidth]);
     return (React__default.createElement("div", { className: "ui-video-seek-slider" },
         React__default.createElement("div", { className: isThumbActive ? "track active" : "track", ref: trackElement, onMouseMove: (event) => handleTrackHover(false, event), onMouseLeave: (event) => handleTrackHover(true, event), onMouseDown: (event) => setSeeking(true, event), onTouchStart: () => setMobileSeeking(true), "data-testid": "main-track" },
-            Boolean(timeCodes?.length) && (React__default.createElement(TimeCodes, { currentTime: currentTime, max: max, bufferTime: bufferTime, seekHoverPosition: seekHoverPosition, timeCodes: timeCodes, mobileSeeking: mobileSeeking.current, trackWidth: trackWidth, label: label, setLabel: setLabel, trackColor: trackColor })),
-            !timeCodes && (React__default.createElement(TimeCodeItem, { maxTime: max, startTime: 0, endTime: max, currentTime: currentTime, bufferTime: bufferTime, seekHoverTime: hoverTimeValue, trackColor: trackColor }))),
-        !hideThumbTooltip && (React__default.createElement(HoverTimeWithPreview, { max: max, hoverTimeValue: hoverTimeValue, isThumbActive: isThumbActive, label: label, limitTimeTooltipBySides: limitTimeTooltipBySides, offset: offset, seekHoverPosition: seekHoverPosition, trackWidth: trackWidth, getPreviewScreenUrl: getPreviewScreenUrl, minutesPrefix: minutesPrefix, secondsPrefix: secondsPrefix })),
-        React__default.createElement(Thumb, { max: max, currentTime: currentTime, isThumbActive: isThumbActive, trackColor: trackColor })));
+            Boolean(timeCodes?.length) && (React__default.createElement(TimeCodes, { currentTime: currentTime, max: max, bufferTime: bufferTime, seekHoverPosition: seekHoverPosition, timeCodes: timeCodes, mobileSeeking: mobileSeeking.current, trackWidth: trackWidth, label: label, setLabel: setLabel, trackColor: trackColor, bufferColor: bufferColor, hoverColor: hoverColor, trackBackgroundColor: trackBackgroundColor })),
+            !timeCodes && (React__default.createElement(TimeCodeItem, { maxTime: max, startTime: 0, endTime: max, currentTime: currentTime, bufferTime: bufferTime, seekHoverTime: hoverTimeValue, trackColor: trackColor, bufferColor: bufferColor, hoverColor: hoverColor, trackBackgroundColor: trackBackgroundColor }))),
+        !hideThumbTooltip && (React__default.createElement(HoverTimeWithPreview, { max: max, hoverTimeValue: hoverTimeValue, isThumbActive: isThumbActive, label: label, limitTimeTooltipBySides: limitTimeTooltipBySides, offset: offset, seekHoverPosition: seekHoverPosition, trackWidth: trackWidth, getPreviewScreenUrl: getPreviewScreenUrl, minutesPrefix: minutesPrefix, secondsPrefix: secondsPrefix, isLive: isLive })),
+        React__default.createElement(Thumb, { max: max, currentTime: currentTime, isThumbActive: isThumbActive, trackColor: thumbColor ?? trackColor })));
+};
+
+/**
+ * Clean LIVE indicator with blinking dot animation for live streams.
+ */
+const LiveIndicator = ({ className = "" }) => {
+    return (React__default.createElement("div", { className: `flex items-center gap-2 ${className}`, "data-testid": "live-indicator" },
+        React__default.createElement("span", { className: "inline-flex items-center gap-2 rounded-[5px] bg-red-500/15 px-3 py-1.5 text-sm font-semibold text-red-400 ring-1 ring-red-500/25 backdrop-blur-sm", "aria-label": "Live stream" },
+            React__default.createElement("span", { className: "relative flex h-2.5 w-2.5 shrink-0 items-center justify-center", "aria-hidden": true },
+                React__default.createElement("span", { className: "h-2 w-2 rounded-full bg-red-500 animate-live-blink" })),
+            "LIVE")));
 };
 
 const formatTimeMemo = (() => {
@@ -657,7 +684,7 @@ const formatTimeMemo = (() => {
         return formatted;
     };
 })();
-const BottomControls = memo(({ config }) => {
+const BottomControls = memo(({ config, isLive = false }) => {
     const { videoRef, currentTime, isFullscreen, bufferedProgress, isAdPlaying } = useVideoStore(useShallow((state) => ({
         videoRef: state.videoRef,
         currentTime: state.currentTime,
@@ -682,16 +709,20 @@ const BottomControls = memo(({ config }) => {
     const roundedDuration = useMemo(() => Math.floor(duration), [duration]);
     const durationFormatted = useMemo(() => formatTimeMemo(roundedDuration), [roundedDuration]);
     const currentTimeFormatted = useMemo(() => formatTimeMemo(roundedCurrentTime), [roundedCurrentTime]);
-    const seekSliderMax = useMemo(() => secondsToMilliseconds(duration), [duration]);
+    const seekSliderMax = useMemo(() => {
+        if (isLive && !Number.isFinite(duration))
+            return 1000;
+        return secondsToMilliseconds(duration);
+    }, [duration, isLive]);
     const seekSliderCurrentTime = useMemo(() => secondsToMilliseconds(currentTimeValue), [currentTimeValue]);
     if (isAdPlaying)
         return null;
     return (React__default.createElement("div", { className: "px-10" },
-        React__default.createElement(VideoSeekSlider, { max: seekSliderMax, currentTime: seekSliderCurrentTime, bufferTime: bufferTime, onChange: handleSeek, secondsPrefix: "00:00:", minutesPrefix: "00:", getPreviewScreenUrl: config?.seekBarConfig?.getPreviewScreenUrl, timeCodes: config?.seekBarConfig?.timeCodes, trackColor: config?.seekBarConfig?.trackColor }),
-        React__default.createElement("div", { className: `pt-6 ${isFullscreen ? "pb-10" : "pb-16"} lg:pb-12 flex items-center gap-4 text-white` },
+        React__default.createElement(VideoSeekSlider, { max: seekSliderMax, currentTime: seekSliderCurrentTime, bufferTime: bufferTime, onChange: handleSeek, secondsPrefix: "00:00:", minutesPrefix: "00:", getPreviewScreenUrl: config?.seekBarConfig?.getPreviewScreenUrl, timeCodes: config?.seekBarConfig?.timeCodes, trackColor: config?.seekBarConfig?.trackColor, bufferColor: config?.seekBarConfig?.bufferColor, hoverColor: config?.seekBarConfig?.hoverColor, thumbColor: config?.seekBarConfig?.thumbColor, trackBackgroundColor: config?.seekBarConfig?.trackBackgroundColor, isLive: isLive }),
+        React__default.createElement("div", { className: `pt-6 ${isFullscreen ? "pb-10" : "pb-16"} lg:pb-12 flex items-center gap-4 text-white flex-wrap` }, isLive ? (React__default.createElement(LiveIndicator, null)) : (React__default.createElement(React__default.Fragment, null,
             React__default.createElement("span", { className: "text-lg lg:text-2xl font-semibold text-white cursor-pointer hover:text-gray-200 transition-colors duration-200" }, currentTimeFormatted),
             React__default.createElement("span", { className: "text-lg lg:text-3xl font-semibold text-gray-500 cursor-pointer hover:text-gray-200 transition-colors duration-200" }, "/"),
-            React__default.createElement("span", { className: "text-lg lg:text-2xl font-semibold text-gray-400 cursor-pointer hover:text-gray-200 transition-colors duration-200" }, durationFormatted))));
+            React__default.createElement("span", { className: "text-lg lg:text-2xl font-semibold text-gray-400 cursor-pointer hover:text-gray-200 transition-colors duration-200" }, durationFormatted))))));
 });
 BottomControls.displayName = "BottomControls";
 
@@ -877,7 +908,7 @@ const Settings = ({ iconClassName, qualityConfig, }) => {
     };
     return (React.createElement(Tooltip, { title: "Settings" },
         React.createElement(Popover, { button: React.createElement(Settings$1, { className: iconClassName }), align: "center" },
-            React.createElement("div", { className: "bg-[#3a4049] text-white rounded-[7px] w-80 overflow-hidden" },
+            React.createElement("div", { className: "bg-[#3a4049] text-white rounded-[7px] w-80 max-w-[min(90vw,320px)] overflow-hidden" },
                 activeMenu === "main" && (React.createElement("div", { className: "p-4" },
                     React.createElement("h3", { className: "text-white font-bold text-xl mb-4" }, "Settings"),
                     React.createElement("p", { className: "text-gray-300 text-sm mb-4" }, "Customize playback"),
@@ -911,12 +942,12 @@ const Settings = ({ iconClassName, qualityConfig, }) => {
                                         speed,
                                         "x"))),
                             React.createElement(ChevronRight, { className: "w-5 h-5 text-gray-400" }))))),
-                activeMenu === "quality" && (React.createElement("div", { className: "p-4" },
-                    React.createElement("div", { className: "flex items-center gap-3 mb-4" },
-                        React.createElement("button", { onClick: handleBack, className: "p-1 rounded-md transition-colors" },
+                activeMenu === "quality" && (React.createElement("div", { className: "p-4 flex flex-col max-h-[min(80vh,480px)]" },
+                    React.createElement("div", { className: "flex items-center gap-3 mb-4 shrink-0" },
+                        React.createElement("button", { onClick: handleBack, className: "p-1 rounded-md transition-colors hover:bg-white/10" },
                             React.createElement(ChevronRight, { className: "w-6 h-6 text-white rotate-180" })),
                         React.createElement("h3", { className: "text-white font-bold text-xl" }, "Video Quality")),
-                    React.createElement("div", { className: "space-y-3" }, hasQualityOptions ? (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "space-y-3 overflow-y-auto min-h-0 flex-1 pr-1 -mr-1" }, hasQualityOptions ? (React.createElement(React.Fragment, null,
                         React.createElement("button", { onClick: () => QualityManager.setQuality(streamType, "auto"), className: `w-full text-left px-4 py-3 rounded-md transition-all ${activeQuality === "auto"
                                 ? "bg-white/10"
                                 : "hover:bg-white/5"}` },
@@ -1118,10 +1149,16 @@ PauseIcon.displayName = "PauseIcon";
 const PlayIcon = memo(() => (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "icon-class", fill: "currentColor", viewBox: "0 0 67 67" },
     React__default.createElement("path", { d: "M20.28 9.65c-2.205-1.268-4.026-.228-4.026 2.307v43.805c0 2.535 1.82 3.574 4.027 2.307l38.471-21.903a2.556 2.556 0 0 0 1.094-.935 2.514 2.514 0 0 0 0-2.743 2.556 2.556 0 0 0-1.093-.936L20.28 9.65z" }))));
 PlayIcon.displayName = "PlayIcon";
-const ControlButtonComponent = ({ onClick, icon, className, }) => (React__default.createElement("button", { onClick: onClick, className: `flex justify-center items-center h-full cursor-pointer ${className}` }, icon));
+const ControlButtonComponent = ({ onClick, icon, className, style, }) => (React__default.createElement("button", { onClick: onClick, className: `flex justify-center items-center h-full cursor-pointer rounded-full transition-colors duration-200 ${className}`, style: style }, icon));
 const ControlButton = memo(ControlButtonComponent);
 ControlButton.displayName = "ControlButton";
-const MiddleControls = () => {
+const MiddleControls = ({ config }) => {
+    const ppConfig = config?.playPauseButtonConfig;
+    const playPauseStyle = React__default.useMemo(() => ({
+        backgroundColor: ppConfig?.backgroundColor,
+        borderRadius: ppConfig?.borderRadius ?? "50%",
+        padding: ppConfig?.padding,
+    }), [ppConfig?.backgroundColor, ppConfig?.borderRadius, ppConfig?.padding]);
     const { videoRef, adVideoRef, isPlaying, setIsPlaying, isAdPlaying } = useVideoStore(useShallow((state) => ({
         videoRef: state.videoRef,
         adVideoRef: state.adVideoRef,
@@ -1231,21 +1268,21 @@ const MiddleControls = () => {
     ]);
     if (isAdPlaying) {
         return (React__default.createElement("div", { className: "flex justify-center items-center" },
-            React__default.createElement(ControlButton, { onClick: handlePlayPause, className: "w-[10vw]", icon: isBuffering ? (React__default.createElement("div", { className: "relative" },
+            React__default.createElement(ControlButton, { onClick: handlePlayPause, className: "w-[10vw]", style: playPauseStyle, icon: isBuffering ? (React__default.createElement("div", { className: "relative" },
                     React__default.createElement(Loader, { className: "w-14 h-14 lg:w-18 lg:h-18 animate-spin text-white" }))) : isPlaying ? (React__default.createElement(PauseIcon, null)) : (React__default.createElement(PlayIcon, null)) })));
     }
     return (React__default.createElement("div", { className: "flex justify-center items-center" },
         React__default.createElement(ControlButton, { onClick: handleBackward, className: "w-[15vw]", icon: React__default.createElement(BackwardIcon, null) }),
-        React__default.createElement(ControlButton, { onClick: handlePlayPause, className: "w-[10vw]", icon: isBuffering ? (React__default.createElement(Loader, { className: "w-14 h-14 lg:w-18 lg:h-18 animate-spin text-white" })) : isPlaying ? (React__default.createElement(PauseIcon, null)) : (React__default.createElement(PlayIcon, null)) }),
+        React__default.createElement(ControlButton, { onClick: handlePlayPause, className: "w-[10vw]", style: playPauseStyle, icon: isBuffering ? (React__default.createElement(Loader, { className: "w-14 h-14 lg:w-18 lg:h-18 animate-spin text-white" })) : isPlaying ? (React__default.createElement(PauseIcon, null)) : (React__default.createElement(PlayIcon, null)) }),
         React__default.createElement(ControlButton, { onClick: handleForward, className: "w-[15vw]", icon: React__default.createElement(ForwardIcon, null) })));
 };
 
-const VideoPlayerControls = ({ config }) => {
+const VideoPlayerControls = ({ config, isLive = false, }) => {
     return (React.createElement("div", { className: "px-20" },
         React.createElement("div", { className: "absolute top-0 left-0 h-full w-full bg-[rgba(0,0,0,0.5)] flex flex-col justify-between" },
             React.createElement(ControlsHeader, { config: config?.headerConfig?.config }),
-            React.createElement(MiddleControls, null),
-            React.createElement(BottomControls, { config: config?.bottomConfig?.config }))));
+            React.createElement(MiddleControls, { config: config?.middleConfig?.config }),
+            React.createElement(BottomControls, { config: config?.bottomConfig?.config, isLive: isLive }))));
 };
 
 const VideoActionButton = React__default.memo(({ text, onClick, icon, disabled = false, position = "left", }) => {
@@ -1262,6 +1299,7 @@ const VideoActionButton = React__default.memo(({ text, onClick, icon, disabled =
 VideoActionButton.displayName = "VideoActionButton";
 
 const Overlay = React__default.memo(({ config }) => {
+    const isLive = config?.isLive ?? false;
     const controlsTimerRef = useRef(null);
     const containerRef = useRef(null);
     const { setControls, controls, showCountdown, countdownTime, setShowCountdown, setAutoPlayNext, setCurrentEpisodeIndex, episodeList, setCountdownTime, videoRef, currentEpisodeIndex, isAdPlaying, } = useVideoStore(useShallow((state) => ({
@@ -1360,7 +1398,7 @@ const Overlay = React__default.memo(({ config }) => {
         episodeList.length > 0 &&
         currentEpisodeIndex + 1 < episodeList.length, [showCountdown, episodeList.length, currentEpisodeIndex]);
     return (React__default.createElement("div", { id: "videoPlayerControls", ref: containerRef, className: "absolute inset-0", onMouseMove: handleMouseEnter },
-        controls && !isAdPlaying && React__default.createElement(VideoPlayerControls, { config: config }),
+        controls && !isAdPlaying && (React__default.createElement(VideoPlayerControls, { config: config, isLive: isLive })),
         shouldShowCountdown && (React__default.createElement(VideoActionButton, { text: "Next Episode", onClick: handleNextEpisodeManually, icon: React__default.createElement(ArrowRight, { className: "h-5 w-5 text-gray-900" }), disabled: currentEpisodeIndex + 1 >= episodeList.length, position: "right" }))));
 });
 Overlay.displayName = "Overlay";
@@ -1552,45 +1590,41 @@ const SubtitleOverlay = ({ styleConfig }) => {
 };
 SubtitleOverlay.displayName = "SubtitleOverlay";
 
-const HLS_CONFIG = {
+const getHlsConfig = (isLive) => ({
     enableWorker: true,
-    lowLatencyMode: false,
-    backBufferLength: 90,
-    liveSyncDurationCount: 3,
+    lowLatencyMode: isLive,
+    backBufferLength: isLive ? 30 : 90,
+    liveSyncDurationCount: isLive ? 1 : 3,
+    liveMaxLatencyDurationCount: isLive ? 3 : 10,
     maxBufferSize: 80 * 1000000,
-    maxBufferLength: 30,
+    maxBufferLength: isLive ? 10 : 30,
     manifestLoadingMaxRetry: 4,
     manifestLoadingRetryDelay: 1000,
     levelLoadingMaxRetry: 4,
     levelLoadingRetryDelay: 1000,
     fragLoadingMaxRetry: 6,
-    fragLoadingRetryDelay: 750,
+    fragLoadingRetryDelay: isLive ? 500 : 750,
     startLevel: -1,
-    startPosition: -1,
+    startPosition: isLive ? -1 : -1,
     capLevelToPlayerSize: true,
-};
-const DASH_SETTINGS = {
+});
+const getDashSettings = (isLive) => ({
     streaming: {
         abr: {
-            autoSwitchBitrate: {
-                video: true,
-                audio: true,
-            },
+            autoSwitchBitrate: { video: true, audio: true },
             limitBitrateByPortal: true,
             ABRStrategy: "abrThroughput",
             bandwidthSafetyFactor: 0.9,
         },
         buffer: {
             fastSwitchEnabled: true,
-            bufferTimeAtTopQuality: 28,
-            bufferTimeAtTopQualityLongForm: 55,
+            bufferTimeAtTopQuality: isLive ? 12 : 28,
+            bufferTimeAtTopQualityLongForm: isLive ? 20 : 55,
         },
-        lowLatencyEnabled: false,
+        lowLatencyEnabled: isLive,
     },
-    debug: {
-        logLevel: dashjs.Debug.LOG_LEVEL_NONE,
-    },
-};
+    debug: { logLevel: dashjs.Debug.LOG_LEVEL_NONE },
+});
 const MAX_HLS_NETWORK_RETRIES = 4;
 const MAX_DASH_RESTARTS = 3;
 const sanitizeUrl = (url) => {
@@ -1623,7 +1657,7 @@ const resolveStreamType = (explicitType, source) => {
         return "mp4";
     return "other";
 };
-const useHlsEngine = ({ enabled, source, videoElement, setHlsInstance, setQualityLevels, setCurrentQuality, }) => {
+const useHlsEngine = ({ enabled, source, videoElement, setHlsInstance, setQualityLevels, setCurrentQuality, isLive = false, }) => {
     const networkRetryRef = useRef(0);
     const retryTimerRef = useRef(undefined);
     useEffect(() => {
@@ -1674,7 +1708,7 @@ const useHlsEngine = ({ enabled, source, videoElement, setHlsInstance, setQualit
             videoElement.load();
             return;
         }
-        const hls = new Hls(HLS_CONFIG);
+        const hls = new Hls(getHlsConfig(isLive));
         setHlsInstance(hls);
         const updateQualityLevels = () => {
             const levels = hls.levels ?? [];
@@ -1781,9 +1815,10 @@ const useHlsEngine = ({ enabled, source, videoElement, setHlsInstance, setQualit
         setHlsInstance,
         setQualityLevels,
         setCurrentQuality,
+        isLive,
     ]);
 };
-const useDashEngine = ({ enabled, source, videoElement, setDashInstance, setQualityLevels, setCurrentQuality, }) => {
+const useDashEngine = ({ enabled, source, videoElement, setDashInstance, setQualityLevels, setCurrentQuality, isLive = false, }) => {
     const restartCountRef = useRef(0);
     const restartTimerRef = useRef(undefined);
     useEffect(() => {
@@ -1810,7 +1845,7 @@ const useDashEngine = ({ enabled, source, videoElement, setDashInstance, setQual
             }
         };
         const applySettings = () => {
-            player.updateSettings(DASH_SETTINGS);
+            player.updateSettings(getDashSettings(isLive));
         };
         const updateQualityLevels = () => {
             try {
@@ -1925,9 +1960,10 @@ const useDashEngine = ({ enabled, source, videoElement, setDashInstance, setQual
         setDashInstance,
         setQualityLevels,
         setCurrentQuality,
+        isLive,
     ]);
 };
-const useVideoSource = (trackSrc, type) => {
+const useVideoSource = (trackSrc, type, isLive) => {
     const { videoRef, setQualityLevels, setHlsInstance, setDashInstance, setStreamType, setActiveQuality, setCurrentQuality, } = useVideoStore(useShallow((state) => ({
         videoRef: state.videoRef,
         setQualityLevels: state.setQualityLevels,
@@ -1980,6 +2016,7 @@ const useVideoSource = (trackSrc, type) => {
         setHlsInstance,
         setQualityLevels,
         setCurrentQuality,
+        isLive: isLive ?? false,
     });
     useDashEngine({
         enabled: streamType === "dash",
@@ -1988,6 +2025,7 @@ const useVideoSource = (trackSrc, type) => {
         setDashInstance,
         setQualityLevels,
         setCurrentQuality,
+        isLive: isLive ?? false,
     });
     useEffect(() => {
         if (!videoRef)
@@ -3448,14 +3486,18 @@ var css_248z = "\n.loader {\n  width: 64px;\n  height: 64px;\n  border-radius: 5
 styleInject(css_248z,{"insertAt":"top"});
 
 const VideoPlayer = React__default.memo(({ video, style, events, features }) => {
-    const { src: trackSrc, title: trackTitle, poster: trackPoster, type, isTrailer, showControls = true, isMute = false, startFrom, } = video;
-    const { className, width, height, subtitleStyle, qualityConfig } = style || {};
+    const { src: trackSrc, title: trackTitle, poster: trackPoster, type, isTrailer, showControls = true, isMute = false, startFrom, isLive: isLiveProp = false, } = video;
+    const { className, width, height, subtitleStyle, qualityConfig, seekBarConfig: styleSeekBarConfig, playPauseButtonConfig, } = style || {};
     const { onEnded, onError, onClose, onWatchHistoryUpdate } = events || {};
     const { timeCodes, getPreviewScreenUrl, tracking, subtitles, episodeList, currentEpisodeIndex = 0, intro, nextEpisodeConfig, ads, } = features || {};
-    const { setVideoWrapperRef, setActiveQuality } = useVideoStore(useShallow((state) => ({
+    const { setVideoWrapperRef, setActiveQuality, setIsLive, } = useVideoStore(useShallow((state) => ({
         setVideoWrapperRef: state.setVideoWrapperRef,
         setActiveQuality: state.setActiveQuality,
+        setIsLive: state.setIsLive,
     })));
+    React__default.useEffect(() => {
+        setIsLive(isLiveProp);
+    }, [isLiveProp, setIsLive]);
     React__default.useEffect(() => {
         if (qualityConfig?.defaultQuality) {
             setActiveQuality(qualityConfig.defaultQuality);
@@ -3495,6 +3537,7 @@ const VideoPlayer = React__default.memo(({ video, style, events, features }) =>
         onClose?.();
     }, [getWatchHistoryData, onWatchHistoryUpdate, onClose]);
     const overlayConfig = React__default.useMemo(() => ({
+        isLive: isLiveProp,
         headerConfig: {
             config: {
                 isTrailer: isTrailer,
@@ -3508,11 +3551,18 @@ const VideoPlayer = React__default.memo(({ video, style, events, features }) =>
             config: {
                 seekBarConfig: {
                     timeCodes: timeCodes,
-                    trackColor: "red",
+                    trackColor: styleSeekBarConfig?.trackColor ?? "#ff0000",
+                    bufferColor: styleSeekBarConfig?.bufferColor,
+                    hoverColor: styleSeekBarConfig?.hoverColor,
+                    thumbColor: styleSeekBarConfig?.thumbColor,
+                    trackBackgroundColor: styleSeekBarConfig?.trackBackgroundColor,
                     getPreviewScreenUrl,
                 },
             },
         },
+        middleConfig: {
+            config: { playPauseButtonConfig },
+        },
     }), [
         isTrailer,
         trackTitle,
@@ -3521,6 +3571,8 @@ const VideoPlayer = React__default.memo(({ video, style, events, features }) =>
         timeCodes,
         getPreviewScreenUrl,
         qualityConfig,
+        styleSeekBarConfig,
+        playPauseButtonConfig,
     ]);
     const adOverlayConfig = React__default.useMemo(() => ({
         config: {
@@ -3542,7 +3594,7 @@ const VideoPlayer = React__default.memo(({ video, style, events, features }) =>
             },
         },
     }), [isTrailer, trackTitle, handleClose, timeCodes, getPreviewScreenUrl]);
-    useVideoSource(trackSrc, type);
+    useVideoSource(trackSrc, type, isLiveProp);
     useSubtitles(subtitles);
     useSubtitleStyling(subtitleStyle);
     useVideoTracking(tracking, episodeList, currentEpisodeIndex, handleClose);

package/dist/store/types/StoreTypes.d.ts

@@ -57,6 +57,8 @@ export interface VideoQualityState {
     setCurrentQuality: (currentQuality: string) => void;
     streamType: StreamType;
     setStreamType: (streamType: StreamType) => void;
+    isLive: boolean;
+    setIsLive: (isLive: boolean) => void;
 }
 export interface SubtitleTrack {
     lang: string;

package/package.json

@@ -1,14 +1,9 @@
 {
   "name": "@zezosoft/react-player",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/index.js",
   "type": "module",
   "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "npx rollup -c",
-    "dev": "npx rollup -c -w",
-    "prepare": "npm run build"
-  },
   "files": [
     "dist"
   ],
@@ -60,5 +55,9 @@
     "dashjs": "^5.0.3",
     "react-icons": "^5.5.0",
     "screenfull": "^6.0.2"
+  },
+  "scripts": {
+    "build": "npx rollup -c",
+    "dev": "npx rollup -c -w"
   }
-}
+}

package/dist/VideoPlayer/MediaControls/BottomControls.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import "../_components/TimeLine/time-line.css";
-import { IControlsBottomProps } from "../../types";
-declare const BottomControls: React.FC<IControlsBottomProps>;
-export default BottomControls;

package/dist/VideoPlayer/MediaControls/ControlsHeader.d.ts

@@ -1,5 +0,0 @@
-import * as React from "react";
-import { IControlsHeaderProps } from "../../types";
-import "../_components/styles/video-controls.css";
-declare const ControlsHeader: React.FC<IControlsHeaderProps>;
-export default ControlsHeader;

package/dist/VideoPlayer/MediaControls/MiddleControls.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const MiddleControls: React.FC;
-export default MiddleControls;

package/dist/VideoPlayer/MediaControls/VideoPlayerControls.d.ts

@@ -1,4 +0,0 @@
-import * as React from "react";
-import { IPlayerConfig } from "../../types";
-declare const VideoPlayerControls: React.FC<IPlayerConfig>;
-export default VideoPlayerControls;

package/dist/VideoPlayer/_components/BottomControls.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import "./TimeLine/time-line.css";
-import { IControlsBottomProps } from "../../types";
-declare const BottomControls: React.FC<IControlsBottomProps>;
-export default BottomControls;

package/dist/VideoPlayer/_components/ControlsHeader.d.ts

@@ -1,5 +0,0 @@
-import * as React from "react";
-import { IControlsHeaderProps } from "../../types";
-import "../_components/styles/video-controls.css";
-declare const ControlsHeader: React.FC<IControlsHeaderProps>;
-export default ControlsHeader;

package/dist/VideoPlayer/_components/MiddleControls.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const MiddleControls: React.FC;
-export default MiddleControls;

package/dist/VideoPlayer/_components/Overlay.d.ts

@@ -1,4 +0,0 @@
-import * as React from "react";
-import { IPlayerConfig } from "../../types";
-declare const Overlay: React.FC<IPlayerConfig>;
-export default Overlay;

package/dist/VideoPlayer/_components/SubtitleOverlay.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { SubtitleStyleConfig } from "../hooks/useSubtitleStyling";
-interface SubtitleOverlayProps {
-    styleConfig?: SubtitleStyleConfig;
-}
-declare const SubtitleOverlay: React.FC<SubtitleOverlayProps>;
-export default SubtitleOverlay;

package/dist/VideoPlayer/_components/TimeLine/TimeLine.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-export interface TimeCode {
-    fromMs: number;
-    description: string;
-}
-export interface Props {
-    max: number;
-    currentTime: number;
-    bufferTime?: number;
-    offset?: number;
-    timeCodes?: TimeCode[];
-    hideThumbTooltip?: boolean;
-    limitTimeTooltipBySides?: boolean;
-    secondsPrefix?: string;
-    minutesPrefix?: string;
-    onChange: (time: number, offsetTime: number) => void;
-    getPreviewScreenUrl?: (hoverTimeValue: number) => string;
-    trackColor?: string;
-}
-export declare const VideoSeekSlider: React.FC<Props>;

package/dist/VideoPlayer/_components/TimeLine/_components/hoverTimeWithPreview.d.ts

@@ -1,16 +0,0 @@
-import React from "react";
-interface Props {
-    max: number;
-    hoverTimeValue: number;
-    trackWidth: number;
-    seekHoverPosition: number;
-    offset: number;
-    isThumbActive: boolean;
-    limitTimeTooltipBySides: boolean;
-    label: string;
-    secondsPrefix?: string;
-    minutesPrefix?: string;
-    getPreviewScreenUrl?: (hoverTimeValue: number) => string;
-}
-export declare const HoverTimeWithPreview: React.FC<Props>;
-export {};

package/dist/VideoPlayer/_components/TimeLine/_components/thumb.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-interface Props {
-    max: number;
-    currentTime: number;
-    isThumbActive: boolean;
-    trackColor?: string;
-}
-export declare const Thumb: React.FC<Props>;
-export {};

package/dist/VideoPlayer/_components/TimeLine/_components/timeCodeItem.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-export interface TimeCode {
-    fromMs: number;
-    description: string;
-}
-export interface Props {
-    currentTime: number;
-    seekHoverTime: number;
-    bufferTime: number;
-    startTime: number;
-    endTime: number;
-    maxTime: number;
-    label?: string;
-    isTimePassed?: boolean;
-    isBufferPassed?: boolean;
-    isHoverPassed?: boolean;
-    onHover?: (label: string) => void;
-    withGap?: boolean;
-    trackColor?: string;
-}
-export declare const TimeCodeItem: React.FC<Props>;

package/dist/VideoPlayer/_components/TimeLine/_components/timeCodes.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-import { TimeCode } from "./timeCodeItem";
-export interface Props {
-    max: number;
-    currentTime: number;
-    bufferTime: number;
-    seekHoverPosition: number;
-    timeCodes: TimeCode[] | undefined;
-    trackWidth: number;
-    mobileSeeking: boolean;
-    label: string;
-    setLabel: React.Dispatch<React.SetStateAction<string>>;
-    trackColor?: string;
-}
-export declare const TimeCodes: React.FC<Props>;

package/dist/VideoPlayer/_components/TimeLine/utils/getEndTimeByIndex.d.ts

@@ -1,2 +0,0 @@
-import { TimeCode } from "../_components/timeCodeItem";
-export declare const getEndTimeByIndex: (timeCodes: TimeCode[], index: number, max: number) => number;

package/dist/VideoPlayer/_components/TimeLine/utils/getHoverTimePosition.d.ts

@@ -1,3 +0,0 @@
-export declare function getHoverTimePosition(seekHoverPosition: number, hoverTimeElement: HTMLDivElement | null, trackWidth: number, limitTimeTooltipBySides: boolean): {
-    transform: string;
-};

package/dist/VideoPlayer/_components/TimeLine/utils/getPositionPercent.d.ts

@@ -1 +0,0 @@
-export declare function getPositionPercent(max: number, current: number): number;

package/dist/VideoPlayer/_components/TimeLine/utils/getTimeScale.d.ts

@@ -1 +0,0 @@
-export declare function getTimeScale(currentTime: number, startTime: number, endTime: number, isTimePassed: boolean): number;

package/dist/VideoPlayer/_components/TimeLine/utils/isInRange.d.ts

@@ -1 +0,0 @@
-export declare const isInRange: (time: number, start: number, end: number) => boolean;

package/dist/VideoPlayer/_components/TimeLine/utils/positionToMs.d.ts

@@ -1 +0,0 @@
-export declare function positionToMs(max: number, position: number, trackWidth: number): number;

package/dist/VideoPlayer/_components/TimeLine/utils/secondsToTime.d.ts

@@ -1,6 +0,0 @@
-export interface Time {
-    hh: string;
-    mm: string;
-    ss: string;
-}
-export declare function millisecondsToTime(ms: number, offset?: number): Time;

package/dist/VideoPlayer/_components/TimeLine/utils/timeToTimeString.d.ts

@@ -1 +0,0 @@
-export declare function timeToTimeString(max: number, seekHoverTime: number, offset?: number, minutesPrefix?: string, secondsPrefix?: string): string;

package/dist/VideoPlayer/_components/VideoPlayerControls.d.ts

@@ -1,4 +0,0 @@
-import * as React from "react";
-import { IPlayerConfig } from "../../types";
-declare const VideoPlayerControls: React.FC<IPlayerConfig>;
-export default VideoPlayerControls;

package/dist/VideoPlayer/hooks/useNetworkSpeed.d.ts

@@ -1,7 +0,0 @@
-interface NetworkSpeedInfo {
-    speed: number;
-    quality: "slow" | "medium" | "fast" | "unknown";
-    message: string;
-}
-export declare const useNetworkSpeed: () => NetworkSpeedInfo | null;
-export {};