/* AI Presentation Resolver 1.0 — policy-scored image and video presentation */
.ump-player {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ump-aspect-ratio, 16 / 9);
    max-height: min(var(--ump-max-height, 680px), var(--ump-max-height-vh, 82vh));
    overflow: hidden;
    background: var(--ump-background, #000);
    color: #fff;
    isolation: isolate;
}

.ump-player video {
    width: 100%;
    height: 100%;
    max-height: inherit;
    display: block;
    object-fit: var(--ump-object-fit, contain);
    object-position: var(--ump-object-position, center center);
    background: var(--ump-background, #000);
    filter: none !important;
    opacity: 1 !important;
}

.ump-player.ump-orientation-portrait {
    width: 100%;
}

.ump-player.ump-orientation-square,
.ump-player.ump-orientation-landscape,
.ump-player.ump-orientation-unknown {
    width: 100%;
}

.ump-center-toggle {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ump-center-toggle span {
    display: grid;
    place-items: center;
    width: clamp(48px, 10vw, 72px);
    height: clamp(48px, 10vw, 72px);
    padding-left: .08em;
    border-radius: 999px;
    background: rgba(0, 0, 0, .56);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .24);
    font-size: clamp(20px, 4vw, 30px);
    line-height: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ump-player.is-playing .ump-center-toggle {
    opacity: 0;
    pointer-events: none;
}

.ump-player.is-paused .ump-center-toggle,
.ump-player.is-ended .ump-center-toggle {
    opacity: 1;
    pointer-events: auto;
}

.ump-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: auto auto minmax(64px, 1fr) auto auto;
    align-items: center;
    gap: var(--ump-controls-gap, 4px);
    padding: var(--ump-controls-padding-y, 4px) var(--ump-controls-padding-x, 6px);
    background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
    transition: opacity 160ms ease;
}

.ump-controls button {
    min-width: 34px;
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .38);
    color: #fff;
    cursor: pointer;
}

.ump-time {
    font-size: var(--ump-control-time-font-size, 11px);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ump-progress {
    width: 100%;
    min-width: 0;
    accent-color: #fff;
    cursor: pointer;
}

.ump-player.is-playing:not(:hover):not(:focus-within) .ump-controls {
    opacity: .72;
}

@media (max-width: 680px) {
    .ump-player {
        max-height: min(var(--ump-max-height, 680px), 78vh);
    }

    .ump-controls {
        grid-template-columns: auto minmax(56px, 1fr) auto auto;
        gap: var(--ump-mobile-controls-gap, var(--ump-controls-gap, 4px));
        padding: var(--ump-mobile-controls-padding-y, var(--ump-controls-padding-y, 4px)) var(--ump-mobile-controls-padding-x, var(--ump-controls-padding-x, 6px));
    }

    .ump-time {
        display: none;
    }

    .ump-center-toggle span {
        width: var(--ump-center-play-size, 44px);
        height: var(--ump-center-play-size, 44px);
        font-size: var(--ump-center-play-font-size, 18px);
    }
}

/* Remove dimensions inherited from the legacy native video rules. */
.cam-universal-video,
.universal-video-detail {
    width: 100%;
    max-height: none;
    background: transparent;
    overflow: visible;
}

.media-processing-card .ump-player {
    border-radius: 12px;
}


/* AI-resolved single image geometry */
.aipr-media.cam-media-single,
.cam-detail-gallery.aipr-media {
    width: 100%;
    aspect-ratio: var(--aipr-aspect-ratio, auto);
    max-height: min(
        var(--aipr-max-height-px, 860px),
        var(--aipr-max-height-vh, 82vh)
    );
    overflow: hidden;
    background: var(--aipr-background, #000);
}

.aipr-media.cam-media-single {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
}

.aipr-media.cam-media-single .cam-media-tile,
.cam-detail-gallery.aipr-media {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.aipr-media.cam-media-single .cam-media-tile {
    display: block !important;
    grid-area: auto !important;
}

.aipr-media.cam-media-single img,
.cam-detail-gallery.aipr-media img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: var(--aipr-object-fit, cover) !important;
    object-position: var(--aipr-object-position, center center) !important;
    background: var(--aipr-background, #000);
}

.ump-full-bleed,
.aipr-media {
    border-radius: 0;
}

@media (max-width: 680px) {
    .aipr-media.cam-media-single,
    .cam-detail-gallery.aipr-media {
        max-height: min(
            var(--aipr-max-height-px, 860px),
            var(--aipr-max-height-vh, 82vh)
        );
    }
}


/* 3.5.11.2 — single-image full-bleed isolation from legacy geometry */
.cam-media-single.aipr-media,
.cam-detail-gallery.aipr-media {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    place-items: stretch !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    background: var(--aipr-background, #000) !important;
}

.cam-media-single.aipr-media .cam-media-tile {
    box-sizing: border-box !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    overflow: hidden !important;
}

.cam-media-single.aipr-media img,
.cam-detail-gallery.aipr-media img {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    object-fit: var(--aipr-object-fit, cover) !important;
    object-position: var(--aipr-object-position, center center) !important;
}

.aipr-runtime-resolved {
    aspect-ratio: var(--aipr-aspect-ratio, auto) !important;
}

@media (max-width: 680px) {
    .cam-media-single.aipr-media,
    .cam-detail-gallery.aipr-media {
        width: 100% !important;
        margin-inline: 0 !important;
    }
}


/*
 * 3.5.11.3 — authoritative single-image presentation layer
 * These selectors intentionally exceed the specificity of
 * post-media-edge-to-edge-3.0.0.2.css while leaving mosaic rules untouched.
 */
.marketplace-cam-card .cam-media-single.aipr-media,
.marketplace-cam-card.description-first .cam-media-single.aipr-media {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(
        var(--aipr-max-height-px, 860px),
        var(--aipr-max-height-vh, 82vh)
    ) !important;
    aspect-ratio: var(--aipr-aspect-ratio, auto) !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--aipr-background, #000) !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

.marketplace-cam-card .cam-media-single.aipr-media .cam-media-tile,
.marketplace-cam-card.description-first .cam-media-single.aipr-media .cam-media-tile {
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

.marketplace-cam-card .cam-media-single.aipr-media .cam-media-tile img,
.marketplace-cam-card.description-first .cam-media-single.aipr-media .cam-media-tile img,
.marketplace-cam-card .cam-media-single.aipr-media img,
.marketplace-cam-card.description-first .cam-media-single.aipr-media img {
    box-sizing: border-box !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: var(--aipr-object-fit, cover) !important;
    object-position: var(--aipr-object-position, center center) !important;
    transform: none !important;
}

.marketplace-cam-card .cam-media-single.aipr-media::before,
.marketplace-cam-card .cam-media-single.aipr-media::after,
.marketplace-cam-card .cam-media-single.aipr-media .cam-media-tile::before,
.marketplace-cam-card .cam-media-single.aipr-media .cam-media-tile::after {
    content: none !important;
    display: none !important;
}

.cam-detail-gallery.aipr-media {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: min(
        var(--aipr-max-height-px, 860px),
        var(--aipr-max-height-vh, 82vh)
    ) !important;
    aspect-ratio: var(--aipr-aspect-ratio, auto) !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--aipr-background, #000) !important;
    overflow: hidden !important;
}

.cam-detail-gallery.aipr-media > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 100% !important;
    object-fit: var(--aipr-object-fit, cover) !important;
    object-position: var(--aipr-object-position, center center) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

@media (max-width: 820px) {
    .marketplace-cam-card .cam-media-single.aipr-media,
    .marketplace-cam-card.description-first .cam-media-single.aipr-media,
    .cam-detail-gallery.aipr-media {
        width: 100% !important;
        margin-inline: 0 !important;
        border-radius: 0 !important;
    }
}


/* Universal Media Engine 3.6 — progressive image experience */
[data-ume-image] {
    background: var(--ume-placeholder-background, #eceff3);
    transition:
        filter var(--ume-transition-ms, 220ms) ease,
        opacity var(--ume-transition-ms, 220ms) ease,
        transform var(--ume-transition-ms, 220ms) ease;
}

[data-ume-image][data-ume-progressive="1"]:not(.ume-loaded) {
    filter: blur(var(--ume-blur-px, 18px));
    transform: scale(1.04);
}

[data-ume-image].ume-loading {
    opacity: .94;
}

[data-ume-image].ume-loaded {
    filter: none;
    opacity: 1;
    transform: none;
}

[data-ume-image].ume-error {
    filter: none;
    opacity: .72;
}

.ume-media-skeleton {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            100deg,
            rgba(255,255,255,0) 20%,
            rgba(255,255,255,.28) 40%,
            rgba(255,255,255,0) 60%
        ),
        var(--ume-placeholder-background, #eceff3);
    background-size: 200% 100%;
    animation: ume-skeleton 1.15s linear infinite;
}

.ume-loaded + .ume-media-skeleton,
.ume-media-ready .ume-media-skeleton {
    display: none;
}

@keyframes ume-skeleton {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    [data-ume-image],
    .ume-media-skeleton {
        transition: none !important;
        animation: none !important;
    }
}

/* 4.2.0.5 — Safari Video End-State Progress Normalization */
.ump-progress {
    -webkit-appearance: none;
    appearance: none;
    height: var(--ump-progress-track-height, 1px);
    border: 0;
    border-radius: 999px;
    outline: none;
    background: linear-gradient(
        to right,
        var(--ump-progress-fill, #fff) 0,
        var(--ump-progress-fill, #fff) var(--ump-progress-percent, 0%),
        var(--ump-progress-remaining, rgba(255,255,255,.38)) var(--ump-progress-percent, 0%),
        var(--ump-progress-remaining, rgba(255,255,255,.38)) 100%
    );
}

.ump-progress::-webkit-slider-runnable-track {
    height: var(--ump-progress-track-height, 1px);
    border: 0;
    border-radius: 999px;
    background: transparent;
}

.ump-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--ump-progress-thumb-size, 10px);
    height: var(--ump-progress-thumb-size, 10px);
    margin-top: calc((var(--ump-progress-track-height, 1px) - var(--ump-progress-thumb-size, 10px)) / 2);
    border: 0;
    border-radius: 50%;
    background: var(--ump-progress-fill, #fff);
    box-shadow: 0 1px 5px rgba(0,0,0,.34);
}

.ump-progress::-moz-range-track {
    height: var(--ump-progress-track-height, 1px);
    border: 0;
    border-radius: 999px;
    background: var(--ump-progress-remaining, rgba(255,255,255,.38));
}

.ump-progress::-moz-range-progress {
    height: var(--ump-progress-track-height, 1px);
    border-radius: 999px;
    background: var(--ump-progress-fill, #fff);
}

.ump-progress::-moz-range-thumb {
    width: var(--ump-progress-thumb-size, 10px);
    height: var(--ump-progress-thumb-size, 10px);
    border: 0;
    border-radius: 50%;
    background: var(--ump-progress-fill, #fff);
    box-shadow: 0 1px 5px rgba(0,0,0,.34);
}


/* 4.3.0.1 — Canonical Video Control Token Parity */
[data-ump-player] .ump-controls {
    gap: var(--ump-controls-gap, 4px);
    padding: var(--ump-controls-padding-y, 4px) var(--ump-controls-padding-x, 6px);
    border-radius: var(--ump-controls-radius, 0);
    background: var(--ump-controls-background, linear-gradient(to top, rgba(0,0,0,.76), rgba(0,0,0,0)));
}
[data-ump-player] .ump-controls button {
    width: var(--ump-control-button-size, 30px);
    height: var(--ump-control-button-size, 30px);
    min-width: var(--ump-control-button-size, 30px);
    min-height: var(--ump-control-button-size, 30px);
    border-radius: var(--ump-control-button-radius, 999px);
    background: var(--ump-control-button-background, rgba(0,0,0,.24));
    font-size: var(--ump-control-button-font-size, 16px);
}
[data-ump-player] .ump-time {
    font-size: var(--ump-control-time-font-size, 11px);
}
[data-ump-player] .ump-center-toggle {
    width: var(--ump-center-play-size, 44px);
    height: var(--ump-center-play-size, 44px);
    min-width: var(--ump-center-play-size, 44px);
    min-height: var(--ump-center-play-size, 44px);
    background: var(--ump-center-play-background, rgba(0,0,0,.48));
    font-size: var(--ump-center-play-font-size, 18px);
}
[data-ump-player] .ump-progress {
    height: var(--ump-progress-track-height, 1px);
}


/* 4.3.0.2 — interaction-state video control tokens */
[data-ump-player] .ump-progress,
[data-ump-player] .ump-progress::-webkit-slider-runnable-track,
[data-ump-player] .ump-progress::-moz-range-track,
[data-ump-player] .ump-progress::-moz-range-progress {
    height: var(--ump-progress-track-height, 1px);
}
[data-ump-player]:hover .ump-progress,
[data-ump-player]:focus-within .ump-progress,
[data-ump-player]:hover .ump-progress::-webkit-slider-runnable-track,
[data-ump-player]:focus-within .ump-progress::-webkit-slider-runnable-track,
[data-ump-player]:hover .ump-progress::-moz-range-track,
[data-ump-player]:focus-within .ump-progress::-moz-range-track,
[data-ump-player]:hover .ump-progress::-moz-range-progress,
[data-ump-player]:focus-within .ump-progress::-moz-range-progress {
    height: var(--ump-progress-hover-track-height, var(--ump-progress-track-height, 1px));
}
[data-ump-player].is-progress-dragging .ump-progress,
[data-ump-player].is-progress-dragging .ump-progress::-webkit-slider-runnable-track,
[data-ump-player].is-progress-dragging .ump-progress::-moz-range-track,
[data-ump-player].is-progress-dragging .ump-progress::-moz-range-progress {
    height: var(--ump-progress-drag-track-height, var(--ump-progress-active-track-height, 1px));
}
[data-ump-player] .ump-progress::-webkit-slider-thumb {
    margin-top: calc((var(--ump-progress-track-height, 1px) - var(--ump-progress-thumb-size, 10px)) / 2);
}
[data-ump-player]:hover .ump-progress::-webkit-slider-thumb,
[data-ump-player]:focus-within .ump-progress::-webkit-slider-thumb {
    margin-top: calc((var(--ump-progress-hover-track-height, var(--ump-progress-track-height, 1px)) - var(--ump-progress-thumb-size, 10px)) / 2);
}
[data-ump-player].is-progress-dragging .ump-progress::-webkit-slider-thumb {
    margin-top: calc((var(--ump-progress-drag-track-height, var(--ump-progress-active-track-height, 1px)) - var(--ump-progress-thumb-size, 10px)) / 2);
}
@media (max-width: 680px) {
    [data-ump-player] .ump-progress,
    [data-ump-player] .ump-progress::-webkit-slider-runnable-track,
    [data-ump-player] .ump-progress::-moz-range-track,
    [data-ump-player] .ump-progress::-moz-range-progress {
        height: var(--ump-mobile-progress-track-height, var(--ump-progress-track-height, 1px));
    }
    [data-ump-player]:hover .ump-progress,
    [data-ump-player]:focus-within .ump-progress,
    [data-ump-player]:hover .ump-progress::-webkit-slider-runnable-track,
    [data-ump-player]:focus-within .ump-progress::-webkit-slider-runnable-track,
    [data-ump-player]:hover .ump-progress::-moz-range-track,
    [data-ump-player]:focus-within .ump-progress::-moz-range-track,
    [data-ump-player]:hover .ump-progress::-moz-range-progress,
    [data-ump-player]:focus-within .ump-progress::-moz-range-progress {
        height: var(--ump-mobile-progress-hover-track-height, var(--ump-mobile-progress-track-height, 1px));
    }
    [data-ump-player].is-progress-dragging .ump-progress,
    [data-ump-player].is-progress-dragging .ump-progress::-webkit-slider-runnable-track,
    [data-ump-player].is-progress-dragging .ump-progress::-moz-range-track,
    [data-ump-player].is-progress-dragging .ump-progress::-moz-range-progress {
        height: var(--ump-mobile-progress-drag-track-height, var(--ump-progress-drag-track-height, 3px));
    }
}


/* 4.3.0.3 — Canonical Video Control State Presentation Parity */
[data-ump-player].has-facebook-minimal-controls .ump-controls {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity var(--ump-controls-transition-duration, 180ms) var(--ump-controls-transition-easing, ease-out),
        background var(--ump-controls-transition-duration, 180ms) var(--ump-controls-transition-easing, ease-out),
        padding var(--ump-controls-transition-duration, 180ms) var(--ump-controls-transition-easing, ease-out),
        gap var(--ump-controls-transition-duration, 180ms) var(--ump-controls-transition-easing, ease-out);
}
[data-ump-player].has-facebook-minimal-controls.is-controls-visible .ump-controls,
[data-ump-player].has-facebook-minimal-controls.is-paused .ump-controls,
[data-ump-player].has-facebook-minimal-controls.is-ended .ump-controls {
    gap: var(--ump-controls-gap, 4px);
    padding: var(--ump-controls-padding-y, 4px) var(--ump-controls-padding-x, 6px);
    background: var(--ump-controls-background, linear-gradient(to top, rgba(0,0,0,.76), rgba(0,0,0,0)));
}
[data-ump-player].has-facebook-minimal-controls.is-controls-visible .ump-controls button,
[data-ump-player].has-facebook-minimal-controls.is-paused .ump-controls button,
[data-ump-player].has-facebook-minimal-controls.is-ended .ump-controls button {
    opacity: var(--ump-visible-button-opacity, 1);
    pointer-events: auto;
}
[data-ump-player].has-facebook-minimal-controls.is-controls-visible .ump-time,
[data-ump-player].has-facebook-minimal-controls.is-paused .ump-time,
[data-ump-player].has-facebook-minimal-controls.is-ended .ump-time {
    opacity: var(--ump-visible-time-opacity, .9);
}
[data-ump-player].has-facebook-minimal-controls.is-paused .ump-center-toggle,
[data-ump-player].has-facebook-minimal-controls.is-ended .ump-center-toggle {
    opacity: var(--ump-visible-center-play-opacity, 1);
    pointer-events: auto;
}
[data-ump-player].has-facebook-minimal-controls.is-playing.is-controls-idle.controls-idle-progress-only .ump-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ump-idle-controls-gap, 0);
    padding: var(--ump-idle-controls-padding-y, 0) var(--ump-idle-controls-padding-x, 0);
    background: var(--ump-idle-controls-background, transparent);
}
[data-ump-player].has-facebook-minimal-controls.is-playing.is-controls-idle.controls-idle-progress-only .ump-controls > :not(.ump-progress) {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
[data-ump-player].has-facebook-minimal-controls.is-playing.is-controls-idle.controls-idle-progress-only .ump-controls button {
    opacity: var(--ump-idle-button-opacity, 0);
}
[data-ump-player].has-facebook-minimal-controls.is-playing.is-controls-idle.controls-idle-progress-only .ump-time {
    opacity: var(--ump-idle-time-opacity, 0);
}
[data-ump-player].has-facebook-minimal-controls.is-playing.is-controls-idle.controls-idle-progress-only .ump-progress {
    display: block;
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
    cursor: default;
}
[data-ump-player].has-facebook-minimal-controls.is-playing.is-controls-idle .ump-center-toggle {
    opacity: var(--ump-idle-center-play-opacity, 0);
    pointer-events: none;
}
[data-ump-player].has-facebook-minimal-controls.controls-hide-thumb-idle.is-playing.is-controls-idle .ump-progress::-webkit-slider-thumb {
    opacity: 0;
}
[data-ump-player].has-facebook-minimal-controls.controls-hide-thumb-idle.is-playing.is-controls-idle .ump-progress::-moz-range-thumb {
    opacity: 0;
}
[data-ump-player].has-facebook-minimal-controls.is-progress-dragging .ump-controls,
[data-ump-player].has-facebook-minimal-controls.is-progress-dragging .ump-controls > * {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* 4.3.0.4 — Global Range Style Isolation Fix */
[data-ump-player] input.ump-progress[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    height: var(--ump-progress-track-height, 1px);
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ump-progress-track-radius, 999px);
    outline: 0;
    background: linear-gradient(
        to right,
        var(--ump-progress-fill, #fff) 0,
        var(--ump-progress-fill, #fff) var(--ump-progress-percent, 0%),
        var(--ump-progress-remaining, rgba(255,255,255,.38)) var(--ump-progress-percent, 0%),
        var(--ump-progress-remaining, rgba(255,255,255,.38)) 100%
    );
    box-shadow: none;
    box-sizing: border-box;
    line-height: 0;
    font-size: 0;
}

[data-ump-player] input.ump-progress[type="range"]::-webkit-slider-runnable-track {
    height: var(--ump-progress-track-height, 1px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ump-progress-track-radius, 999px);
    background: transparent;
    box-shadow: none;
}

[data-ump-player] input.ump-progress[type="range"]::-moz-range-track,
[data-ump-player] input.ump-progress[type="range"]::-moz-range-progress {
    height: var(--ump-progress-track-height, 1px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ump-progress-track-radius, 999px);
    box-shadow: none;
}

/* 4.3.1 — Viewer-First Video Experience & Inline Sound Toggle */
[data-ump-player][data-ump-viewer-first="1"] {
    cursor: pointer;
}

[data-ump-player][data-ump-viewer-first="1"] .ump-controls,
[data-ump-player][data-ump-viewer-first="1"] .ump-center-toggle,
[data-ump-player][data-ump-viewer-first="1"] .ump-progress {
    display: none !important;
}

.ump-inline-sound-toggle {
    position: absolute;
    right: var(--ump-inline-sound-offset-x, 10px);
    bottom: var(--ump-inline-sound-offset-y, 10px);
    z-index: 7;
    display: grid;
    place-items: center;
    width: var(--ump-inline-sound-button-size, 32px);
    height: var(--ump-inline-sound-button-size, 32px);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ump-inline-sound-radius, 999px);
    background: var(--ump-inline-sound-background, rgba(0,0,0,.42));
    color: var(--ump-inline-sound-color, #fff);
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(var(--ump-inline-sound-backdrop-blur, 6px));
    -webkit-backdrop-filter: blur(var(--ump-inline-sound-backdrop-blur, 6px));
}

.ump-inline-sound-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ump-inline-sound-toggle .ump-sound-icon {
    width: var(--ump-inline-sound-icon-size, 17px);
    height: var(--ump-inline-sound-icon-size, 17px);
    display: block;
    fill: currentColor;
    pointer-events: none;
}

.ump-inline-sound-toggle.is-unmuted .ump-sound-muted-slash {
    display: none;
}

.ump-inline-sound-toggle.is-muted .ump-sound-muted-slash {
    display: block;
}