@xhub-short/ui 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/index.d.ts

@@ -1,18 +1,28 @@
 import { VideoItem, UIPlayerState, UIPlayerControls, UIInteractionState, UIInteractionActions } from '@xhub-short/contracts';
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-export { clsx } from 'clsx';
+export { clsx, clsx as cn } from 'clsx';
 export { ErrorBoundary, ErrorBoundaryProps, ErrorMode } from './components/ErrorBoundary/index.js';
 export { Skeleton, SkeletonAnimation, SkeletonAvatar, SkeletonProps, SkeletonText, SkeletonVideo } from './components/Skeleton/index.js';
 export { BookmarkFilledIcon, BookmarkIcon, CloseIcon, CommentIcon, HeartFilledIcon, HeartIcon, IconProps, MoreIcon, MusicIcon, PauseIcon, PlayIcon, PlusIcon, ShareIcon, UserCheckIcon, UserPlusIcon, VerifiedIcon, VolumeIcon, VolumeMutedIcon } from './components/icons/index.js';
+export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLOT_ACTIVE_ATTR as SLIDER_SLOT_ACTIVE_ATTR, SLIDER_SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY as SLIDER_SLOT_ACTIVE_DATASET_KEY, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLOT_INDEX_ATTR as SLIDER_SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY as SLIDER_SLOT_INDEX_DATASET_KEY, SLIDER_SLOT_TRANSITIONING_CLASS, SlotPosition as SliderSlotPosition, UseSliderPositionOptions, UseSliderPositionReturn, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, VirtualSliderContextValue, VirtualSliderProps, getSlotIndexFromPosition as getSliderIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext } from './components/VirtualSlider/index.js';
+export { IMAGE_CAROUSEL_CSS, ImageCarouselHeadless, ImageCarouselProps } from './components/ImageCarousel/index.js';
+export { IMAGE_POST_ACTIVE_ATTR, IMAGE_POST_ID_ATTR, IMAGE_POST_SLOT_ACTIVE_CLASS, IMAGE_POST_SLOT_CLASS, IMAGE_POST_SLOT_CLEAN_MODE_CLASS, IMAGE_POST_SLOT_CSS, ImagePostSlotActions, ImagePostSlotActionsProps, ImagePostSlotBottom, ImagePostSlotBottomProps, ImagePostSlotCaption, ImagePostSlotCaptionProps, ImagePostSlotContextValue, ImagePostSlotHeadless, ImagePostSlotHeadlessProps, ImagePostSlotMusic, ImagePostSlotMusicProps, ImagePostSlotOverlay, ImagePostSlotOverlayProps, ImagePostSlotPlayIndicator, ImagePostSlotPlayIndicatorProps, ImagePostSlotReadMore, ImagePostSlotReadMoreProps, useImagePostSlotContext, useOptionalImagePostSlotContext } from './components/ImagePostSlot/index.js';
+export { DETAIL_VIEW_CSS, DetailViewAuthor, DetailViewAuthorProps, DetailViewCaption, DetailViewCaptionProps, DetailViewContextValue, DetailViewGallery, DetailViewGalleryProps, DetailViewHeadless, DetailViewHeadlessProps, DetailViewMusic, DetailViewMusicProps, DetailViewStats, DetailViewStatsProps, useDetailViewContext } from './components/DetailView/index.js';
 export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, SlotPosition, UseVideoFeedPositionOptions, UseVideoFeedPositionReturn, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedContextValue, VideoFeedHeadless, VideoFeedHeadlessProps, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition } from './components/VideoFeed/index.js';
-export { HeartInstance, LOADING_ATTR, LOADING_DATASET_KEY, LikeAnimationStyle, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, VideoSlotContextValue, VideoSlotHeadless, VideoSlotHeadlessExtendedProps, VideoSlotLikeAnimation, VideoSlotLikeAnimationProps, VideoSlotLikeAnimationRef, VideoSlotOverlay, VideoSlotOverlayProps, VideoSlotOverlayRegionProps, VideoSlotPoster, VideoSlotPosterProps, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from './components/VideoSlot/index.js';
+export { HeartInstance, LOADING_ATTR, LOADING_DATASET_KEY, LikeAnimationStyle, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, ReportedVideoOverlay, ReportedVideoOverlayProps, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, VideoSlotContextValue, VideoSlotHeadless, VideoSlotHeadlessExtendedProps, VideoSlotLikeAnimation, VideoSlotLikeAnimationProps, VideoSlotLikeAnimationRef, VideoSlotOverlay, VideoSlotOverlayProps, VideoSlotOverlayRegionProps, VideoSlotPoster, VideoSlotPosterProps, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from './components/VideoSlot/index.js';
+export { V as VideoSlotPlayIndicator, a as VideoSlotPlayIndicatorProps } from './VideoSlotPlayIndicator-DPs8Xt5C.js';
 export { BUFFERING_STATE_CLASS, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, UseAutoFirstFrameCaptureConfig, UseFirstFrameCaptureConfig, UseFirstFrameCaptureReturn, UseVideoElementConfig, UseVideoElementReturn, VIDEO_CLASS, VIDEO_PLAYER_CSS, Z_INDEX as VIDEO_PLAYER_Z_INDEX, Z_INDEX_CSS_VARS as VIDEO_PLAYER_Z_INDEX_CSS_VARS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoErrorOrigin, VideoPlayerHeadless, VideoPlayerHeadlessExtendedProps, VideoSourceType, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from './components/VideoPlayer/index.js';
 export { PROGRESS_BAR_CSS, ProgressBarHeadless, ProgressBarHeadlessExtendedProps, calculateProgress, formatTime } from './components/ProgressBar/index.js';
 export { ACTION_BAR_CSS, ActionBarBookmark, ActionBarComment, ActionBarHeadless, ActionBarHeadlessExtendedProps, ActionBarLike, ActionBarShare, ActionButton, ActionButtonExtendedProps, BookmarkButton, BookmarkButtonProps, CommentButton, CommentButtonProps, LikeButton, LikeButtonProps, ShareButton, ShareButtonProps } from './components/ActionBar/index.js';
 export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorAvatarProps, AuthorDescription, AuthorDescriptionProps, AuthorInfoContext, AuthorInfoContextValue, AuthorInfoHeadless, AuthorInfoHeadlessExtendedProps, AuthorInfoVariant, AuthorName, AuthorNameProps, AvatarSize, FollowButton, FollowButtonProps, FollowButtonSize, useAuthorInfoContext, useOptionalAuthorInfoContext } from './components/AuthorInfo/index.js';
 export { VIDEO_INFO_CSS, VideoAuthorName, VideoAuthorNameProps, VideoCaption, VideoCaptionProps, VideoHashtags, VideoHashtagsProps, VideoInfoContext, VideoInfoContextValue, VideoInfoHeadless, VideoInfoHeadlessExtendedProps, VideoLocation, VideoLocationProps, VideoMusic, VideoMusicProps, useOptionalVideoInfoContext, useVideoInfoContext } from './components/VideoInfo/index.js';
-import * as _use_gesture_react from '@use-gesture/react';
+export { n as COMMENT_SHEET_CSS, f as CommentInput, g as CommentInputProps, h as CommentItemComponent, i as CommentItemProps, d as CommentList, e as CommentListProps, C as CommentSheet, j as CommentSheetContext, l as CommentSheetContextValue, a as CommentSheetHeadless, b as CommentSheetHeadlessProps, m as CommentSheetI18n, R as ReplyTarget, S as SheetHeader, c as SheetHeaderProps, u as useCommentSheetContext, k as useOptionalCommentSheetContext } from './CommentSheet.css-DyEc3Sro.js';
+export { ADVANCE_MENU_CSS, AdvanceMenuHeadless, AdvanceMenuHeadlessProps, AdvanceMenuItemProps, AdvanceMenuSectionTitleProps, AdvanceMenuSeparatorProps } from './components/AdvanceMenu/index.js';
+export { DEFAULT_SPEEDS, SPEED_PICKER_CSS, SpeedPickerHeadless, SpeedPickerHeadlessProps } from './components/SpeedPicker/index.js';
+export { QUALITY_PICKER_CSS, QualityPickerHeadless, QualityPickerHeadlessProps } from './components/QualityPicker/index.js';
+export { CLEAN_MODE_OVERLAY_CSS, CleanModeOverlayHeadless, CleanModeOverlayHeadlessProps, injectCleanModeOverlayCSS } from './components/CleanModeOverlay/index.js';
+export { REPORT_SHEET_CSS, ReportSheetHeadless, ReportSheetHeadlessProps, ReportSheetState, injectReportSheetCSS } from './components/ReportSheet/index.js';
 import 'react/jsx-runtime';
 
 /**
@@ -85,8 +95,26 @@ declare function areStylesInjected(): boolean;
  * - Works with any bundler (Next.js, Vite, Webpack)
  *
  * Design Tokens from: User-provided tokens (Urbanist font, light/dark mode)
+ *
+ * ## CSS Layers
+ *
+ * SDK styles use `@layer sv` for low specificity. This allows host apps to
+ * override styles easily WITHOUT using `!important`.
+ *
+ * Host app can override by:
+ * 1. Using any CSS without @layer (higher priority)
+ * 2. Overriding CSS Variables (recommended for theming)
+ * 3. Using `@layer host { }` declared AFTER `sv` layer
+ *
+ * @example
+ * ```css
+ * // Host app styles - no !important needed
+ * .my-custom-action-bar {
+ *   gap: 20px; // Overrides SDK's gap easily
+ * }
+ * ```
  */
-declare const CSS_CONTENT = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   XHub-short UI Styles - Auto-injected\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   FONT LOADING\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&display=swap');\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CSS VARIABLES - Light Mode (Default)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n:root {\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     COLOR TOKENS - Light Mode\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  --sv-color-primary: #164c8e;\n  --sv-color-primary-alpha: #164c8e5b;\n  --sv-color-secondary: #9fc5e9;\n  --sv-color-tertiary: #e9f8ff;\n  --sv-color-quaternary: #164c8e5b;\n\n  --sv-color-contrast-positive: #121212;\n  --sv-color-contrast-negative: #ffffff;\n\n  --sv-color-accent: #a2a2a2;\n  --sv-color-accent-2: #6b7271;\n  --sv-color-accent-stroke: #e5e6e6;\n\n  --sv-color-error: #ff434e;\n  --sv-color-success: #1da031;\n  --sv-color-warning: #daa000;\n  --sv-color-info: #29c8f0;\n\n  /* Semantic aliases */\n  --sv-color-background: var(--sv-color-contrast-negative);\n  --sv-color-text: var(--sv-color-contrast-positive);\n  --sv-color-text-secondary: var(--sv-color-accent-2);\n  --sv-color-text-muted: var(--sv-color-accent);\n  --sv-color-border: var(--sv-color-accent-stroke);\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     TYPOGRAPHY TOKENS - Mobile (Default)\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  --sv-font-family: 'Urbanist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n  --sv-font-family-display: 'SF Pro Display', 'Urbanist', system-ui, sans-serif;\n\n  --sv-font-size-xxs: 10px;\n  --sv-font-size-xs: 12px;\n  --sv-font-size-sm: 13px;\n  --sv-font-size-md: 14px;\n  --sv-font-size-lg: 16px;\n  --sv-font-size-xl: 20px;\n\n  --sv-font-weight-regular: 400;\n  --sv-font-weight-medium: 500;\n  --sv-font-weight-semibold: 600;\n  --sv-font-weight-bold: 700;\n\n  --sv-line-height-tight: 1.2;\n  --sv-line-height-normal: 1.4;\n  --sv-line-height-relaxed: 1.6;\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     SPACING TOKENS\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  --sv-spacing-xxs: 2px;\n  --sv-spacing-xs: 4px;\n  --sv-spacing-sm: 8px;\n  --sv-spacing-md: 12px;\n  --sv-spacing-lg: 16px;\n  --sv-spacing-xl: 24px;\n  --sv-spacing-xxl: 32px;\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     BORDER RADIUS\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  --sv-radius-sm: 4px;\n  --sv-radius-md: 8px;\n  --sv-radius-lg: 12px;\n  --sv-radius-xl: 16px;\n  --sv-radius-full: 9999px;\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     TRANSITIONS\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  --sv-transition-fast: 150ms ease;\n  --sv-transition-normal: 250ms ease;\n  --sv-transition-slow: 350ms ease;\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Z-INDEX LAYERS\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  --sv-z-base: 1;\n  --sv-z-video: 1;\n  --sv-z-overlay: 10;\n  --sv-z-controls: 20;\n  --sv-z-modal: 100;\n  --sv-z-toast: 1000;\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     SHADOWS\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  --sv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n  --sv-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\n  --sv-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CSS VARIABLES - Dark Mode\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* System preference */\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme=\"light\"]) {\n    --sv-color-primary: #a6cec7;\n    --sv-color-primary-alpha: #164c8e5b;\n    --sv-color-secondary: #143a0c;\n    --sv-color-tertiary: #252825;\n    --sv-color-quaternary: #164c8e5b;\n\n    --sv-color-contrast-positive: #ffffff;\n    --sv-color-contrast-negative: #121212;\n\n    --sv-color-accent: #6b7271;\n    --sv-color-accent-2: #d2dddb;\n    --sv-color-accent-stroke: #373737;\n\n    --sv-color-error: #b62a32;\n    --sv-color-success: #20a634;\n    --sv-color-warning: #c29823;\n    --sv-color-info: #1fa0c0;\n\n    /* Semantic aliases update automatically */\n    --sv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);\n    --sv-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);\n    --sv-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);\n  }\n}\n\n/* Explicit dark mode (override) */\n[data-theme=\"dark\"],\n.dark {\n  --sv-color-primary: #a6cec7;\n  --sv-color-primary-alpha: #164c8e5b;\n  --sv-color-secondary: #143a0c;\n  --sv-color-tertiary: #252825;\n  --sv-color-quaternary: #164c8e5b;\n\n  --sv-color-contrast-positive: #ffffff;\n  --sv-color-contrast-negative: #121212;\n\n  --sv-color-accent: #6b7271;\n  --sv-color-accent-2: #d2dddb;\n  --sv-color-accent-stroke: #373737;\n\n  --sv-color-error: #b62a32;\n  --sv-color-success: #20a634;\n  --sv-color-warning: #c29823;\n  --sv-color-info: #1fa0c0;\n\n  --sv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);\n  --sv-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);\n  --sv-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   TABLET BREAKPOINT - Typography scaling\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@media (min-width: 768px) {\n  :root {\n    --sv-font-size-xxs: 11px;\n    --sv-font-size-xs: 13px;\n    --sv-font-size-sm: 14px;\n    --sv-font-size-md: 16px;\n    --sv-font-size-lg: 18px;\n    --sv-font-size-xl: 24px;\n  }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   BASE STYLES\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-root {\n  font-family: var(--sv-font-family);\n  font-size: var(--sv-font-size-md);\n  font-weight: var(--sv-font-weight-regular);\n  line-height: var(--sv-line-height-normal);\n  color: var(--sv-color-text);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   FEED CONTAINER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-feed {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background: var(--sv-color-contrast-negative);\n  touch-action: pan-y;\n  -webkit-overflow-scrolling: touch;\n}\n\n.sv-feed::-webkit-scrollbar {\n  display: none;\n}\n\n.sv-feed {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   VIDEO SLOT\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-slot {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--sv-color-contrast-negative);\n  will-change: transform;\n}\n\n.sv-slot--active {\n  z-index: var(--sv-z-video);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   VIDEO PLAYER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-player {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: var(--sv-color-contrast-negative);\n}\n\n.sv-player__video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  background: var(--sv-color-contrast-negative);\n}\n\n.sv-player__poster {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  z-index: 1;\n  transition: opacity var(--sv-transition-normal);\n}\n\n.sv-player__poster--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.sv-player__overlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    to bottom,\n    transparent 0%,\n    transparent 50%,\n    rgba(0, 0, 0, 0.3) 100%\n  );\n  pointer-events: none;\n  z-index: var(--sv-z-overlay);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PROGRESS BAR\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.2);\n  z-index: var(--sv-z-controls);\n}\n\n.sv-progress__bar {\n  height: 100%;\n  background: var(--sv-color-contrast-positive);\n  transition: width 100ms linear;\n  will-change: width;\n}\n\n.sv-progress__bar--buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.3);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   INTERACTION BAR (Right side actions)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-actions {\n  position: absolute;\n  right: var(--sv-spacing-md);\n  bottom: 120px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--sv-spacing-xl);\n  z-index: var(--sv-z-controls);\n}\n\n.sv-action-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--sv-spacing-xs);\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--sv-color-contrast-positive);\n  transition: transform var(--sv-transition-fast);\n  -webkit-tap-highlight-color: transparent;\n}\n\n.sv-action-btn:active {\n  transform: scale(0.9);\n}\n\n.sv-action-btn__icon {\n  width: 44px;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.3);\n  border-radius: var(--sv-radius-full);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n\n.sv-action-btn__icon svg {\n  width: 24px;\n  height: 24px;\n  fill: currentColor;\n}\n\n.sv-action-btn__count {\n  font-size: var(--sv-font-size-xs);\n  font-weight: var(--sv-font-weight-semibold);\n  color: var(--sv-color-contrast-positive);\n}\n\n/* Like button states */\n.sv-action-btn--liked .sv-action-btn__icon {\n  color: var(--sv-color-error);\n}\n\n.sv-action-btn--liked .sv-action-btn__icon svg {\n  animation: sv-like-pop 0.3s ease;\n}\n\n@keyframes sv-like-pop {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.3); }\n  100% { transform: scale(1); }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   AUTHOR INFO (Bottom left)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author {\n  position: absolute;\n  left: var(--sv-spacing-md);\n  bottom: 80px;\n  display: flex;\n  flex-direction: column;\n  gap: var(--sv-spacing-md);\n  max-width: calc(100% - 80px);\n  z-index: var(--sv-z-controls);\n}\n\n.sv-author__row {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-spacing-md);\n}\n\n.sv-author__avatar {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--sv-radius-full);\n  border: 2px solid var(--sv-color-contrast-positive);\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n.sv-author__info {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sv-spacing-xxs);\n  min-width: 0;\n}\n\n.sv-author__name {\n  font-size: var(--sv-font-size-lg);\n  font-weight: var(--sv-font-weight-semibold);\n  color: var(--sv-color-contrast-positive);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sv-author__handle {\n  font-size: var(--sv-font-size-sm);\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.sv-author__description {\n  font-size: var(--sv-font-size-sm);\n  color: var(--sv-color-contrast-positive);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  line-height: var(--sv-line-height-relaxed);\n}\n\n/* Follow button */\n.sv-follow-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--sv-spacing-xs) var(--sv-spacing-md);\n  font-size: var(--sv-font-size-sm);\n  font-weight: var(--sv-font-weight-semibold);\n  font-family: var(--sv-font-family);\n  color: var(--sv-color-contrast-negative);\n  background: var(--sv-color-primary);\n  border: none;\n  border-radius: var(--sv-radius-sm);\n  cursor: pointer;\n  transition: all var(--sv-transition-fast);\n  -webkit-tap-highlight-color: transparent;\n}\n\n.sv-follow-btn:active {\n  transform: scale(0.95);\n}\n\n.sv-follow-btn--following {\n  background: transparent;\n  color: var(--sv-color-contrast-positive);\n  border: 1px solid var(--sv-color-contrast-positive);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   SPINNER / LOADING\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-spinner {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sv-spinner__circle {\n  width: 32px;\n  height: 32px;\n  border: 3px solid rgba(255, 255, 255, 0.2);\n  border-top-color: var(--sv-color-contrast-positive);\n  border-radius: var(--sv-radius-full);\n  animation: sv-spin 0.8s linear infinite;\n}\n\n.sv-spinner--sm .sv-spinner__circle {\n  width: 20px;\n  height: 20px;\n  border-width: 2px;\n}\n\n.sv-spinner--lg .sv-spinner__circle {\n  width: 48px;\n  height: 48px;\n  border-width: 4px;\n}\n\n@keyframes sv-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MUSIC INFO (Bottom - optional)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-music {\n  position: absolute;\n  left: var(--sv-spacing-md);\n  bottom: var(--sv-spacing-lg);\n  display: flex;\n  align-items: center;\n  gap: var(--sv-spacing-sm);\n  max-width: calc(100% - 80px);\n  z-index: var(--sv-z-controls);\n}\n\n.sv-music__icon {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n}\n\n.sv-music__text {\n  font-size: var(--sv-font-size-sm);\n  color: var(--sv-color-contrast-positive);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sv-music__marquee {\n  animation: sv-marquee 10s linear infinite;\n}\n\n@keyframes sv-marquee {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(-50%); }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   UTILITIES\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.sv-tap-highlight-none {\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* Prevent text selection during gestures */\n.sv-no-select {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/* Hardware acceleration hint */\n.sv-gpu {\n  transform: translateZ(0);\n  will-change: transform;\n}\n";
+declare const CSS_CONTENT = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   XHub-short UI Styles - Auto-injected\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CSS LAYER DECLARATION\n   \n   Declare the 'sv' layer first. All SDK component styles go into this layer.\n   Host app styles WITHOUT @layer automatically have HIGHER priority.\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@layer sv;\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   FONT LOADING (outside layer - needs to be global)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&display=swap');\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CSS VARIABLES - Light Mode (Default)\n   Outside layer so host app can easily override variables\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n:root {\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     COLOR TOKENS - Light Mode\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  --sv-color-primary: #164c8e;\n  --sv-color-primary-alpha: #164c8e5b;\n  --sv-color-secondary: #9fc5e9;\n  --sv-color-tertiary: #e9f8ff;\n  --sv-color-quaternary: #164c8e5b;\n\n  --sv-color-contrast-positive: #121212;\n  --sv-color-contrast-negative: #ffffff;\n\n  --sv-color-accent: #a2a2a2;\n  --sv-color-accent-2: #6b7271;\n  --sv-color-accent-stroke: #e5e6e6;\n\n  --sv-color-error: #ff434e;\n  --sv-color-success: #1da031;\n  --sv-color-warning: #daa000;\n  --sv-color-info: #29c8f0;\n\n  /* Semantic aliases */\n  --sv-color-background: var(--sv-color-contrast-negative);\n  --sv-color-text: var(--sv-color-contrast-positive);\n  --sv-color-text-secondary: var(--sv-color-accent-2);\n  --sv-color-text-muted: var(--sv-color-accent);\n  --sv-color-border: var(--sv-color-accent-stroke);\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     TYPOGRAPHY TOKENS - Mobile (Default)\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  --sv-font-family: 'Urbanist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n  --sv-font-family-display: 'SF Pro Display', 'Urbanist', system-ui, sans-serif;\n\n  --sv-font-size-xxs: 10px;\n  --sv-font-size-xs: 12px;\n  --sv-font-size-sm: 13px;\n  --sv-font-size-md: 14px;\n  --sv-font-size-lg: 16px;\n  --sv-font-size-xl: 20px;\n\n  --sv-font-weight-regular: 400;\n  --sv-font-weight-medium: 500;\n  --sv-font-weight-semibold: 600;\n  --sv-font-weight-bold: 700;\n\n  --sv-line-height-tight: 1.2;\n  --sv-line-height-normal: 1.4;\n  --sv-line-height-relaxed: 1.6;\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     SPACING TOKENS\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  --sv-spacing-xxs: 2px;\n  --sv-spacing-xs: 4px;\n  --sv-spacing-sm: 8px;\n  --sv-spacing-md: 12px;\n  --sv-spacing-lg: 16px;\n  --sv-spacing-xl: 24px;\n  --sv-spacing-xxl: 32px;\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     BORDER RADIUS\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  --sv-radius-sm: 4px;\n  --sv-radius-md: 8px;\n  --sv-radius-lg: 12px;\n  --sv-radius-xl: 16px;\n  --sv-radius-full: 9999px;\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     TRANSITIONS\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  --sv-transition-fast: 150ms ease;\n  --sv-transition-normal: 250ms ease;\n  --sv-transition-slow: 350ms ease;\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Z-INDEX LAYERS\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  --sv-z-base: 1;\n  --sv-z-video: 1;\n  --sv-z-overlay: 10;\n  --sv-z-controls: 20;\n  --sv-z-modal: 100;\n  --sv-z-toast: 1000;\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     SHADOWS\n     \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  --sv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n  --sv-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\n  --sv-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CSS VARIABLES - Dark Mode\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* System preference */\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme=\"light\"]) {\n    --sv-color-primary: #a6cec7;\n    --sv-color-primary-alpha: #164c8e5b;\n    --sv-color-secondary: #143a0c;\n    --sv-color-tertiary: #252825;\n    --sv-color-quaternary: #164c8e5b;\n\n    --sv-color-contrast-positive: #ffffff;\n    --sv-color-contrast-negative: #121212;\n\n    --sv-color-accent: #6b7271;\n    --sv-color-accent-2: #d2dddb;\n    --sv-color-accent-stroke: #373737;\n\n    --sv-color-error: #b62a32;\n    --sv-color-success: #20a634;\n    --sv-color-warning: #c29823;\n    --sv-color-info: #1fa0c0;\n\n    /* Semantic aliases update automatically */\n    --sv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);\n    --sv-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);\n    --sv-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);\n  }\n}\n\n/* Explicit dark mode (override) */\n[data-theme=\"dark\"],\n.dark {\n  --sv-color-primary: #a6cec7;\n  --sv-color-primary-alpha: #164c8e5b;\n  --sv-color-secondary: #143a0c;\n  --sv-color-tertiary: #252825;\n  --sv-color-quaternary: #164c8e5b;\n\n  --sv-color-contrast-positive: #ffffff;\n  --sv-color-contrast-negative: #121212;\n\n  --sv-color-accent: #6b7271;\n  --sv-color-accent-2: #d2dddb;\n  --sv-color-accent-stroke: #373737;\n\n  --sv-color-error: #b62a32;\n  --sv-color-success: #20a634;\n  --sv-color-warning: #c29823;\n  --sv-color-info: #1fa0c0;\n\n  --sv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);\n  --sv-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);\n  --sv-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   TABLET BREAKPOINT - Typography scaling\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@media (min-width: 768px) {\n  :root {\n    --sv-font-size-xxs: 11px;\n    --sv-font-size-xs: 13px;\n    --sv-font-size-sm: 14px;\n    --sv-font-size-md: 16px;\n    --sv-font-size-lg: 18px;\n    --sv-font-size-xl: 24px;\n  }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   BASE STYLES - Inside @layer sv for easy host app overrides\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@layer sv {\n\n.sv-root {\n  font-family: var(--sv-font-family);\n  font-size: var(--sv-font-size-md);\n  font-weight: var(--sv-font-weight-regular);\n  line-height: var(--sv-line-height-normal);\n  color: var(--sv-color-text);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   FEED CONTAINER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-feed {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background: var(--sv-color-contrast-negative);\n  touch-action: pan-y;\n  -webkit-overflow-scrolling: touch;\n}\n\n.sv-feed::-webkit-scrollbar {\n  display: none;\n}\n\n.sv-feed {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   VIDEO SLOT\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-slot {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--sv-color-contrast-negative);\n  will-change: transform;\n}\n\n.sv-slot--active {\n  z-index: var(--sv-z-video);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   VIDEO PLAYER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-player {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: var(--sv-color-contrast-negative);\n}\n\n.sv-player__video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  background: var(--sv-color-contrast-negative);\n}\n\n.sv-player__poster {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  z-index: 1;\n  transition: opacity var(--sv-transition-normal);\n}\n\n.sv-player__poster--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.sv-player__overlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    to bottom,\n    transparent 0%,\n    transparent 50%,\n    rgba(0, 0, 0, 0.3) 100%\n  );\n  pointer-events: none;\n  z-index: var(--sv-z-overlay);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PROGRESS BAR\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: rgba(255, 255, 255, 0.2);\n  z-index: var(--sv-z-controls);\n}\n\n.sv-progress__bar {\n  height: 100%;\n  background: var(--sv-color-contrast-positive);\n  transition: width 100ms linear;\n  will-change: width;\n}\n\n.sv-progress__bar--buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.3);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   INTERACTION BAR (Right side actions)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-actions {\n  position: absolute;\n  right: var(--sv-spacing-md);\n  bottom: 120px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--sv-spacing-xl);\n  z-index: var(--sv-z-controls);\n}\n\n.sv-action-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--sv-spacing-xs);\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--sv-color-contrast-positive);\n  transition: transform var(--sv-transition-fast);\n  -webkit-tap-highlight-color: transparent;\n}\n\n.sv-action-btn:active {\n  transform: scale(0.9);\n}\n\n.sv-action-btn__icon {\n  width: 44px;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.3);\n  border-radius: var(--sv-radius-full);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n\n.sv-action-btn__icon svg {\n  width: 24px;\n  height: 24px;\n  fill: currentColor;\n}\n\n.sv-action-btn__count {\n  font-size: var(--sv-font-size-xs);\n  font-weight: var(--sv-font-weight-semibold);\n  color: var(--sv-color-contrast-positive);\n}\n\n/* Like button states */\n.sv-action-btn--liked .sv-action-btn__icon {\n  color: var(--sv-color-error);\n}\n\n.sv-action-btn--liked .sv-action-btn__icon svg {\n  animation: sv-like-pop 0.3s ease;\n}\n\n@keyframes sv-like-pop {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.3); }\n  100% { transform: scale(1); }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   AUTHOR INFO (Bottom left)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author {\n  position: absolute;\n  left: var(--sv-spacing-md);\n  bottom: 80px;\n  display: flex;\n  flex-direction: column;\n  gap: var(--sv-spacing-md);\n  max-width: calc(100% - 80px);\n  z-index: var(--sv-z-controls);\n}\n\n.sv-author__row {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-spacing-md);\n}\n\n.sv-author__avatar {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--sv-radius-full);\n  border: 2px solid var(--sv-color-contrast-positive);\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n.sv-author__info {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sv-spacing-xxs);\n  min-width: 0;\n}\n\n.sv-author__name {\n  font-size: var(--sv-font-size-lg);\n  font-weight: var(--sv-font-weight-semibold);\n  color: var(--sv-color-contrast-positive);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sv-author__handle {\n  font-size: var(--sv-font-size-sm);\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.sv-author__description {\n  font-size: var(--sv-font-size-sm);\n  color: var(--sv-color-contrast-positive);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  line-height: var(--sv-line-height-relaxed);\n}\n\n/* Follow button */\n.sv-follow-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--sv-spacing-xs) var(--sv-spacing-md);\n  font-size: var(--sv-font-size-sm);\n  font-weight: var(--sv-font-weight-semibold);\n  font-family: var(--sv-font-family);\n  color: var(--sv-color-contrast-negative);\n  background: var(--sv-color-primary);\n  border: none;\n  border-radius: var(--sv-radius-sm);\n  cursor: pointer;\n  transition: all var(--sv-transition-fast);\n  -webkit-tap-highlight-color: transparent;\n}\n\n.sv-follow-btn:active {\n  transform: scale(0.95);\n}\n\n.sv-follow-btn--following {\n  background: transparent;\n  color: var(--sv-color-contrast-positive);\n  border: 1px solid var(--sv-color-contrast-positive);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   SPINNER / LOADING\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-spinner {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sv-spinner__circle {\n  width: 32px;\n  height: 32px;\n  border: 3px solid rgba(255, 255, 255, 0.2);\n  border-top-color: var(--sv-color-contrast-positive);\n  border-radius: var(--sv-radius-full);\n  animation: sv-spin 0.8s linear infinite;\n}\n\n.sv-spinner--sm .sv-spinner__circle {\n  width: 20px;\n  height: 20px;\n  border-width: 2px;\n}\n\n.sv-spinner--lg .sv-spinner__circle {\n  width: 48px;\n  height: 48px;\n  border-width: 4px;\n}\n\n@keyframes sv-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MUSIC INFO (Bottom - optional)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-music {\n  position: absolute;\n  left: var(--sv-spacing-md);\n  bottom: var(--sv-spacing-lg);\n  display: flex;\n  align-items: center;\n  gap: var(--sv-spacing-sm);\n  max-width: calc(100% - 80px);\n  z-index: var(--sv-z-controls);\n}\n\n.sv-music__icon {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n}\n\n.sv-music__text {\n  font-size: var(--sv-font-size-sm);\n  color: var(--sv-color-contrast-positive);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sv-music__marquee {\n  animation: sv-marquee 10s linear infinite;\n}\n\n@keyframes sv-marquee {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(-50%); }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   UTILITIES\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.sv-tap-highlight-none {\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* Prevent text selection during gestures */\n.sv-no-select {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/* Hardware acceleration hint */\n.sv-gpu {\n  transform: translateZ(0);\n  will-change: transform;\n}\n\n} /* End @layer sv */\n";
 
 /**
  * Styles Module
@@ -147,6 +175,7 @@ declare const Components: {
     VideoFeedHeadless: () => null;
     VideoSlotHeadless: () => null;
     VideoPlayerHeadless: () => null;
+    CommentSheetHeadless: () => null;
     ErrorBoundary: () => null;
     Skeleton: () => null;
 };
@@ -354,8 +383,12 @@ interface UseDoubleTapConfig {
     onSingleTap?: () => void;
     /** Callback for double tap with position */
     onDoubleTap?: (position: TapPosition) => void;
+    /** Callback for long press (hold > longPressDelay without moving) */
+    onLongPress?: (position: TapPosition) => void;
     /** Delay in ms to detect double tap (default: 300) */
     doubleTapDelay?: number;
+    /** Delay in ms to detect long press (default: 500) */
+    longPressDelay?: number;
     /** Whether the hook is disabled */
     disabled?: boolean;
     /**
@@ -369,6 +402,7 @@ interface UseDoubleTapReturn {
     /** Event handlers to spread onto the target element */
     handlers: {
         onPointerDown: (e: React.PointerEvent) => void;
+        onPointerMove: (e: React.PointerEvent) => void;
         onPointerUp: (e: React.PointerEvent) => void;
         onClick: (e: React.MouseEvent) => void;
     };
@@ -395,7 +429,7 @@ interface UseDoubleTapReturn {
  * Returns tap position as percentage (0-100) relative to container.
  * Falls back to center (50, 50) if container ref is null.
  */
-declare function useDoubleTap({ containerRef, onSingleTap, onDoubleTap, doubleTapDelay, disabled, movementThreshold, }: UseDoubleTapConfig): UseDoubleTapReturn;
+declare function useDoubleTap({ containerRef, onSingleTap, onDoubleTap, onLongPress, doubleTapDelay, longPressDelay, disabled, movementThreshold, }: UseDoubleTapConfig): UseDoubleTapReturn;
 
 /**
  * CustomLayout - Fully Composable Layout
@@ -563,6 +597,12 @@ interface DefaultLayoutProps {
     error?: Error | null;
     /** Retry callback */
     onRetry?: () => void;
+    /** Network error text (default: "No internet connection") */
+    networkErrorText?: string;
+    /** Generic error text (default: "Video failed to load") */
+    genericErrorText?: string;
+    /** Retry button text (default: "Tap to retry") */
+    retryText?: string;
     /** Additional class name */
     className?: string;
     /** Test ID */
@@ -633,6 +673,14 @@ interface MinimalLayoutProps {
     error?: Error | null;
     /** Retry callback */
     onRetry?: () => void;
+    /** Error fallback text (default: "Video failed to load") */
+    errorFallbackText?: string;
+    /** Retry button text (default: "Retry") */
+    retryText?: string;
+    /** Play button aria-label (default: "Play") */
+    playAriaLabel?: string;
+    /** Pause button aria-label (default: "Pause") */
+    pauseAriaLabel?: string;
     /** Called when play button is clicked */
     onPlayClick?: () => void;
     /** Additional class name */
@@ -640,7 +688,7 @@ interface MinimalLayoutProps {
     /** Test ID */
     testId?: string;
 }
-declare function MinimalLayout({ video: _video, index: _index, playerState, playerControls, renderPlayer, renderPoster, renderProgressBar, renderError, playIcon, pauseIcon, showPoster, showPlayButton, showProgressBar, autoHidePlayButton, hideDelay, error, onRetry, onPlayClick, className, testId, }: MinimalLayoutProps): ReactElement;
+declare function MinimalLayout({ video: _video, index: _index, playerState, playerControls, renderPlayer, renderPoster, renderProgressBar, renderError, playIcon, pauseIcon, showPoster, showPlayButton, showProgressBar, autoHidePlayButton, hideDelay, error, onRetry, onPlayClick, className, testId, errorFallbackText, retryText, playAriaLabel, pauseAriaLabel, }: MinimalLayoutProps): ReactElement;
 declare namespace MinimalLayout {
     var displayName: string;
 }
@@ -674,9 +722,36 @@ declare const Layouts: {
  *
  * Features:
  * - Deduplication: Each component's CSS is injected only once
+ * - Persistent by default: CSS stays in DOM after injection (no cleanup overhead)
  * - SSR-safe: Checks for document existence
- * - Cleanup-ready: Returns remove function
  * - Hydration-aware: Checks for existing styles from SSR
+ * - **CSS Layers**: All component CSS is wrapped in `@layer sv` for easy host overrides
+ *
+ * ## CSS Layers for Host App Overrides
+ *
+ * All SDK component styles are injected inside `@layer sv`. This means:
+ * - Host app CSS without @layer has HIGHER priority
+ * - No need for `!important` to override SDK styles
+ *
+ * @example
+ * ```css
+ * // Host app can easily override without !important
+ * .my-custom-button {
+ *   background: blue; // Overrides SDK styles easily
+ * }
+ * ```
+ *
+ * ## Why No Auto-Cleanup?
+ *
+ * In a video feed app, components like VideoPlayer, ActionBar, etc. are
+ * continuously mounted/unmounted as user scrolls. Removing and re-injecting
+ * CSS would be wasteful since:
+ * 1. These components will be needed again immediately
+ * 2. CSS injection triggers style recalculation (performance cost)
+ * 3. The CSS payload is small (~5-10KB total for all components)
+ *
+ * CSS is only removed via explicit `removeComponentCSS()` or `removeAllComponentCSS()`
+ * calls, typically only needed for testing cleanup.
  *
  * @example
  * ```tsx
@@ -694,17 +769,38 @@ declare const Layouts: {
  * }
  * ```
  */
+/**
+ * Options for CSS injection
+ */
+interface InjectCSSOptions {
+    /**
+     * Whether to wrap CSS in @layer sv.
+     *
+     * - `true` (default): CSS wrapped in @layer sv, host app can override easily
+     * - `false`: CSS injected without layer, useful for critical components
+     *   that need to resist global resets like `* { margin: 0; padding: 0; }`
+     *
+     * @default true
+     */
+    layered?: boolean;
+}
 /**
  * Inject CSS for a specific component.
  *
+ * CSS is injected once and persists in the DOM. This is optimal for
+ * video feed apps where components are frequently mounted/unmounted.
+ *
  * @param componentId - Unique identifier for the component (e.g., 'video-player')
  * @param css - CSS string to inject
- * @returns Cleanup function to remove the injected styles
+ * @param options - Injection options
+ * @returns Empty cleanup function (CSS persists intentionally)
  */
-declare function injectComponentCSS(componentId: string, css: string): () => void;
+declare function injectComponentCSS(componentId: string, css: string, options?: InjectCSSOptions): () => void;
 /**
  * Remove CSS for a specific component.
- * Useful for cleanup in tests or component unmount.
+ * Mainly used for testing cleanup.
+ *
+ * Note: In normal app usage, CSS persists and this is rarely needed.
  *
  * @param componentId - Component identifier to remove
  */
@@ -717,70 +813,6 @@ declare function removeComponentCSS(componentId: string): void;
  */
 declare function isComponentCSSInjected(componentId: string): boolean;
 
-/**
- * Lazy Loading Wrapper for @use-gesture/react
- *
- * This module provides lazy loading for the gesture library (~8KB gzip).
- * Only VideoFeed component needs gestures, so we don't want to bundle it
- * for components that don't use it.
- *
- * @example
- * ```tsx
- * // In VideoFeed component
- * import { useEffect, useState } from 'react';
- * import { loadGesture, type GestureModule } from '../../utils/lazyGesture';
- *
- * export function VideoFeed() {
- *   const [gesture, setGesture] = useState<GestureModule | null>(null);
- *
- *   useEffect(() => {
- *     loadGesture().then(setGesture);
- *   }, []);
- *
- *   if (!gesture) {
- *     return <div>Loading...</div>;
- *   }
- *
- *   const { useDrag } = gesture;
- *   // ... use gesture hooks
- * }
- * ```
- */
-/** Type for the gesture module */
-type GestureModule = typeof _use_gesture_react;
-/**
- * Lazy load @use-gesture/react library.
- *
- * Benefits:
- * - Only loaded when actually needed
- * - Cached after first load
- * - Single pending promise prevents duplicate loads
- *
- * @returns Promise resolving to the gesture module
- */
-declare function loadGesture(): Promise<GestureModule>;
-/**
- * Check if gesture library is loaded.
- * Useful for conditional rendering.
- *
- * @returns true if module is loaded and cached
- */
-declare function isGestureLoaded(): boolean;
-/**
- * Preload gesture library without awaiting.
- * Call this early if you know gestures will be needed soon.
- *
- * @example
- * ```tsx
- * // In app initialization
- * import { preloadGesture } from '@xhub-short/ui/utils/lazyGesture';
- *
- * // Start loading early
- * preloadGesture();
- * ```
- */
-declare function preloadGesture(): void;
-
 /**
  * Format Count Utility
  *
@@ -835,24 +867,4 @@ declare function formatCountWithSeparators(count: number, locale?: string): stri
  */
 declare function parseFormattedCount(formatted: string): number;
 
-/**
- * UI Utilities
- *
- * Internal utilities for the UI package.
- * Most are not exported publicly - they're used internally by components.
- */
-
-/**
- * Merge class names with SDK prefix awareness.
- * Wrapper around clsx for consistent className handling.
- *
- * @example
- * ```tsx
- * import { cn } from '../../utils';
- *
- * <div className={cn('sv-video-player', isActive && 'sv-video-player--active', className)} />
- * ```
- */
-declare function cn(...inputs: (string | undefined | null | false | Record<string, boolean>)[]): string;
-
-export { CSS_CONTENT, CSS_VAR_PREFIX, type CacheStats, Components, CustomLayout, type CustomLayoutProps, DefaultLayout, type DefaultLayoutProps, type FirstFrameCacheConfig, type FormatCountOptions, type GestureModule, Layouts, MinimalLayout, type MinimalLayoutProps, type TapPosition, type Theme, type UseDoubleTapConfig, type UseDoubleTapReturn, areStylesInjected, cn, createFirstFrameCache, firstFrameCache, formatCount, formatCountWithSeparators, getTheme, injectComponentCSS, injectSDKStyles, isComponentCSSInjected, isDarkMode, isGestureLoaded, loadGesture, parseFormattedCount, preloadGesture, removeComponentCSS, removeStyles, setTheme, useCustomLayout, useDoubleTap, useStyles };
+export { CSS_CONTENT, CSS_VAR_PREFIX, type CacheStats, Components, CustomLayout, type CustomLayoutProps, DefaultLayout, type DefaultLayoutProps, type FirstFrameCacheConfig, type FormatCountOptions, Layouts, MinimalLayout, type MinimalLayoutProps, type TapPosition, type Theme, type UseDoubleTapConfig, type UseDoubleTapReturn, areStylesInjected, createFirstFrameCache, firstFrameCache, formatCount, formatCountWithSeparators, getTheme, injectComponentCSS, injectSDKStyles, isComponentCSSInjected, isDarkMode, parseFormattedCount, removeComponentCSS, removeStyles, setTheme, useCustomLayout, useDoubleTap, useStyles };