html body.bloc-byte-fullscreen-open,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen {
    background: #000000 !important;
    overflow: hidden !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen {
    display: flex !important;
    flex-direction: column !important;
    color: #ffffff !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen::before {
    height: calc(env(safe-area-inset-top, 0px) + 64px) !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.48), rgba(0,0,0,0)) !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-topbar {
    display: none !important;
}

/* The title and source belong to the lower story overlay. Keep the top bar
   strictly navigational so fullscreen does not repeat the same content. */
html body.bloc-byte-fullscreen-open #bloc-byte-topbar .bloc-byte-top-copy {
    display: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-topbar {
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-index-current {
    grid-column: 3 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen-scroll {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    flex: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100dvh - 176px - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 360px !important;
    background: #000000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-snap-type: y mandatory !important;
    scroll-padding: 0 !important;
    padding: 0 !important;
    touch-action: pan-y !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100dvh - 176px - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 420px !important;
    max-height: calc(100dvh - 176px - env(safe-area-inset-bottom, 0px)) !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    background: #000000 !important;
    padding: 0 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-embed-scope],
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-card-container,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-card-shell,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-media-shell,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-media-wrapper,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-media-container {
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    background: #000000 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen img,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen video,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen iframe {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    background: #000000 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen iframe[src*="platform.twitter.com"],
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen iframe[src*="twitter.com"],
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen iframe[src*="x.com"],
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-lazy-iframe--x {
    pointer-events: none !important;
    touch-action: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-embed-scope].bloc-byte-x-embed-scope,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-embed-scope]:has(iframe[src*="platform.twitter.com/embed/Tweet"]) {
    padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px !important;
    align-items: center !important;
    justify-content: center !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-lazy-iframe--x,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen iframe.bloc-twitter-embed-frame,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen iframe[src*="platform.twitter.com/embed/Tweet"] {
    width: min(550px, calc(100vw - 28px)) !important;
    max-width: min(550px, calc(100vw - 28px)) !important;
    height: min(560px, calc(100dvh - 228px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))) !important;
    max-height: min(560px, calc(100dvh - 228px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))) !important;
    min-height: 220px !important;
    margin: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-info-shell {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 130002 !important;
    min-height: 92px !important;
    padding: 13px 18px 10px !important;
    background: rgba(0,0,0,0.92) !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}

/* Engagement sheets are mounted on body, outside the cinematic overlay. Keep
   them above fullscreen while it remains open instead of revealing them only
   after the user exits fullscreen. */
html body.bloc-byte-fullscreen-open .bytes-comments-modal,
html body.bloc-byte-fullscreen-open #bytes-action-center {
    z-index: 2147483646 !important;
}

html body.bloc-byte-fullscreen-open .bytes-comments-modal {
    isolation: isolate;
    box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.48) !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-info-inner {
    max-width: 720px !important;
    margin: 0 auto !important;
    gap: 5px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-title-inline {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: inherit !important;
    font-size: clamp(19px, 4.5vw, 25px) !important;
    line-height: 1.06 !important;
    font-weight: 880 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-caption-inline {
    max-width: 100% !important;
    color: rgba(255,255,255,0.78) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.78) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 1.24 !important;
    font-weight: 650 !important;
    text-shadow: none !important;
    -webkit-line-clamp: 1 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-caption-inline.is-expanded {
    max-height: 38px !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-meta-inline {
    color: rgba(255,255,255,0.58) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.58) !important;
    font-family: inherit !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 760 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: rgba(0,0,0,0.94) !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 -10px 24px rgba(0,0,0,0.38) !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: auto !important;
    height: 70px !important;
    flex: 1 1 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell button:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 18px !important;
    right: 0 !important;
    bottom: 18px !important;
    width: 1px !important;
    background: rgba(255,255,255,0.16) !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 23px !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell span:not([hidden]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 5px !important;
    min-width: 18px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 780 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen-close {
    order: 999 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 390px) {
    html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen-scroll,
    html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] {
        height: calc(100dvh - 168px - env(safe-area-inset-bottom, 0px)) !important;
        min-height: 390px !important;
        max-height: calc(100dvh - 168px - env(safe-area-inset-bottom, 0px)) !important;
    }

    html body.bloc-byte-fullscreen-open #bloc-byte-info-shell {
        min-height: 88px !important;
        padding: 11px 16px 9px !important;
    }
}

/* NIL Moments cinematic fullscreen — loaded last by mobile.html. */
html body.bloc-byte-fullscreen-open #mobile-app-header,
html body.bloc-byte-fullscreen-open #bottom-nav {
    display: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: #000 !important;
    color: #fff !important;
    z-index: 2147483600 !important;
    --bloc-fullscreen-safe-top: max(env(safe-area-inset-top, 0px), 52px);
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 0 auto !important;
    z-index: 2147483603 !important;
    display: block !important;
    height: calc(104px + var(--bloc-fullscreen-safe-top)) !important;
    background: linear-gradient(180deg, #000 0, rgba(0,0,0,.96) calc(var(--bloc-fullscreen-safe-top) + 48px), rgba(0,0,0,.48) 76%, transparent 100%) !important;
    pointer-events: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen-scroll,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] {
    position: relative !important;
    inset: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding: 0 !important;
    background: #000 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen-scroll {
    position: fixed !important;
    inset: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] {
    isolation: isolate !important;
    overflow: hidden !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id]::before {
    content: "" !important;
    position: absolute !important;
    inset: -36px !important;
    z-index: -2 !important;
    background-image: var(--bloc-fullscreen-backdrop, none) !important;
    background-position: center !important;
    background-size: cover !important;
    filter: blur(30px) saturate(.9) brightness(.46) !important;
    transform: scale(1.08) !important;
    opacity: .94 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id]::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, transparent 42%, rgba(0,0,0,.18) 68%, rgba(0,0,0,.88) 100%) !important;
    pointer-events: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-needs-safe-top,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-camera {
    padding: 0 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-needs-safe-top > [data-embed-scope],
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-embed-scope],
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-card-container,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-card-shell,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-media-shell,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-media-wrapper,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bytes-media-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen img,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen video {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    filter: none !important;
}

/* Provider-owned controls live inside their iframe, so protecting only our
   topbar is insufficient. Keep the ambient backdrop full bleed while moving
   the interactive embed below the iPhone status/notch region. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] iframe:not([src*="youtube.com"]):not([src*="youtube-nocookie.com"]) {
    position: relative !important;
    top: auto !important;
    display: block !important;
    width: 100% !important;
    height: calc(100% - var(--bloc-fullscreen-safe-top)) !important;
    max-height: calc(100% - var(--bloc-fullscreen-safe-top)) !important;
    margin: var(--bloc-fullscreen-safe-top) 0 0 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-topbar {
    position: fixed !important;
    inset: 0 0 auto !important;
    z-index: 2147483605 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: calc(62px + var(--bloc-fullscreen-safe-top)) !important;
    padding: var(--bloc-fullscreen-safe-top) 16px 0 !important;
    pointer-events: none !important;
    color: #fff !important;
    background: #000 !important;
    border: 0 !important;
    transition: opacity .2s ease, transform .2s ease !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-top-close {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.34) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    grid-column: 2 !important;
    pointer-events: auto !important;
}

html body.bloc-byte-fullscreen-open .bloc-byte-top-copy {
    min-width: 0 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-title-current {
    display: block !important;
    overflow: hidden !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 13px !important;
    font-weight: 820 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-meta-current {
    margin-top: 3px !important;
    overflow: hidden !important;
    color: rgba(255,255,255,.64) !important;
    -webkit-text-fill-color: rgba(255,255,255,.64) !important;
    font-size: 9px !important;
    font-weight: 720 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-index-current {
    display: none !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.28) !important;
    color: rgba(255,255,255,.88) !important;
    -webkit-text-fill-color: rgba(255,255,255,.88) !important;
    font-size: 10px !important;
    font-weight: 820 !important;
    letter-spacing: .08em !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-info-shell {
    position: fixed !important;
    inset: auto 0 calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147483604 !important;
    min-height: 0 !important;
    padding: 72px 20px 10px !important;
    background: linear-gradient(180deg, transparent 0, rgba(0,0,0,.78) 42%, #000 76%, #000 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    transition: opacity .2s ease, transform .2s ease !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-info-inner {
    display: grid !important;
    gap: 5px !important;
    max-width: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.48) !important;
    pointer-events: auto !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-info-topline {
    display: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-index-inline {
    margin: 0 !important;
    color: rgba(255,255,255,.56) !important;
    -webkit-text-fill-color: rgba(255,255,255,.56) !important;
    font-size: 9px !important;
    font-weight: 760 !important;
    letter-spacing: .1em !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-index-inline::before {
    content: "CHAPTER " !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-title-inline,
html body.bloc-byte-fullscreen-open #bloc-byte-title-inline.is-full-caption {
    order: 1 !important;
    display: -webkit-box !important;
    max-height: none !important;
    overflow: hidden !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: clamp(23px, 6vw, 31px) !important;
    font-weight: 880 !important;
    line-height: 1.02 !important;
    letter-spacing: -.025em !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* Provider players render their own bottom links below our tray. Mask that
   entire safe-area so the shared Bytes controls are the only visible chrome. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen::after {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2147483603 !important;
    display: block !important;
    height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    background: #000 !important;
    pointer-events: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-cover {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #000 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-cover > img,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-cover > iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
}

/* The poster is a 16:9 thumbnail shown before playback. A generic
   [data-card-id] img rule elsewhere sets object-fit: contain, which letterboxed
   it top and bottom so the slide still opened with black bands even though the
   iframe behind it fills. Pin it to cover so the still matches the video. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-cover > img {
    object-fit: cover !important;
    object-position: center center !important;
    max-width: none !important;
    max-height: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-cover > iframe {
    z-index: 1 !important;
    pointer-events: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-cover > img {
    z-index: 2 !important;
    transition: opacity .18s ease !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-cover.is-playing > img,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-cover.is-playing > .bloc-byte-youtube-cover-play {
    opacity: 0 !important;
    pointer-events: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-cover-play {
    all: unset !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 5 !important;
    display: grid !important;
    width: 58px !important;
    height: 58px !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.86) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.9) !important;
    color: #111411 !important;
    -webkit-text-fill-color: #111411 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.96) !important;
    transform: translate(-50%, -50%) !important;
    cursor: pointer !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-cover-play i {
    margin-left: 3px !important;
    color: #111411 !important;
    -webkit-text-fill-color: #111411 !important;
    font-size: 16px !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-controls {
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 178px !important;
    z-index: 6 !important;
    display: grid !important;
    grid-template-columns: 34px auto minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 14px !important;
    background: rgba(12,12,14,.72) !important;
    color: #fff !important;
    opacity: 0 !important;
    pointer-events: none !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-cover.is-playing .bloc-byte-youtube-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-controls button {
    all: unset !important;
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    place-items: center !important;
    color: #fff !important;
	-webkit-text-fill-color: #fff !important;
    cursor: pointer !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-controls button i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-controls span {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-controls input {
    width: 100% !important;
    accent-color: #fff !important;
    touch-action: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] {
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen-scroll {
    scroll-snap-type: y mandatory !important;
    overscroll-behavior-y: contain !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-caption-inline,
html body.bloc-byte-fullscreen-open #bloc-byte-caption-inline.is-expanded {
    order: 2 !important;
    display: -webkit-box !important;
    max-height: none !important;
    overflow: hidden !important;
    color: rgba(255,255,255,.76) !important;
    -webkit-text-fill-color: rgba(255,255,255,.76) !important;
    font-size: 12px !important;
    font-weight: 560 !important;
    line-height: 1.32 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-meta-inline {
    order: 4 !important;
    color: rgba(255,255,255,.54) !important;
    -webkit-text-fill-color: rgba(255,255,255,.54) !important;
    font-size: 9px !important;
    font-weight: 740 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147483605 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: auto !important;
    height: 52px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 18px !important;
    background: rgba(14,14,16,.68) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.34) !important;
    backdrop-filter: blur(20px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
    transition: opacity .2s ease, transform .2s ease !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell button {
    all: unset !important;
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 52px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    cursor: pointer !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell button:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 14px !important;
    right: 0 !important;
    bottom: 14px !important;
    width: 1px !important;
    background: rgba(255,255,255,.1) !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 18px !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell span:not([hidden]) {
    position: absolute !important;
    top: 3px !important;
    right: calc(50% - 20px) !important;
    display: grid !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell button.is-pending {
    opacity: .55 !important;
    pointer-events: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen-close {
    display: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen.is-chrome-hidden #bloc-byte-topbar,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen.is-chrome-hidden #bloc-byte-info-shell,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen.is-chrome-hidden #bloc-byte-engagement-shell {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    pointer-events: none !important;
}

/* Native video already owns playback in fullscreen. Fill the viewport and do
   not stack the feed's decorative play control over the video. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-video-frame video {
    object-fit: cover !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-video-play {
    display: none !important;
}

/* Shared transport controls for every native fullscreen video/audio source. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-media-host {
    position: relative !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 7px 2px !important;
    z-index: 2147483606 !important;
    display: grid !important;
    grid-template-columns: 32px 32px auto minmax(54px, 1fr) 32px 32px !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 50px !important;
    padding: 7px 14px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    background: rgba(16,17,20,.72) !important;
    color: #ffffff !important;
    box-shadow: 0 -10px 26px rgba(0,0,0,.18) !important;
    backdrop-filter: blur(20px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(125%) !important;
    pointer-events: auto !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls .bloc-byte-transport-zone {
    display: flex !important;
    min-width: 0 !important;
    height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls .bloc-byte-transport-zone--timeline {
    flex-direction: column !important;
    gap: 3px !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls .bloc-byte-transport-zone--timeline [data-media-time] {
    width: 100% !important;
    text-align: center !important;
    font-size: 8px !important;
    line-height: 1 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls .bloc-byte-transport-zone--timeline [data-media-progress] {
    width: 100% !important;
    min-width: 0 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls button {
    all: unset !important;
    position: relative !important;
    display: grid !important;
    width: 32px !important;
    height: 32px !important;
    place-items: center !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    cursor: pointer !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls button i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls button small {
    position: absolute !important;
    font-size: 7px !important;
    font-weight: 900 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls [data-media-time] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 760 !important;
    white-space: nowrap !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls [data-media-progress] {
    width: 100% !important;
    min-width: 0 !important;
    accent-color: #ffffff !important;
    touch-action: none !important;
}

html body.bloc-byte-fullscreen-open:has(#bloc-byte-fullscreen .bloc-byte-native-controls) #bloc-byte-info-shell {
    bottom: calc(106px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Crop provider-owned title/branding chrome outside our fullscreen viewport.
   Playback remains inside the iframe; our exit, caption, transport, and
   engagement chrome stay fixed above it. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-embed-scope]:has(iframe[src*="w.soundcloud.com/player"]) {
    overflow: hidden !important;
    background: #000000 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen iframe[src*="w.soundcloud.com/player"] {
    position: absolute !important;
    top: -92px !important;
    left: 50% !important;
    width: 100% !important;
    height: calc(100% + 92px) !important;
    max-height: none !important;
    transform: translateX(-50%) scale(1.12) !important;
    transform-origin: center center !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-embed-scope]:has(iframe[src*="youtube.com"]),
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-embed-scope]:has(iframe[src*="youtube-nocookie.com"]) {
    overflow: hidden !important;
}

/* Sizing for these lives in the fill-crop rule further down; the old fixed
   -56px/+112px overscan fought it and only ever hid chrome by luck. */

/* Provider fullscreen: let the media run beneath the safe-area chrome instead
   of reserving a second black header, and draw the exit chevron ourselves so
   it cannot disappear with an icon-font mismatch. */
/* Every provider iframe except YouTube: a plain 100% height is right. YouTube
   ships a 16:9 frame, so height:100% in a portrait slide left black bands top
   and bottom and undid the overscan above — exclude it and let the fill-crop
   rule that follows own its sizing. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] iframe:not([src*="youtube.com"]):not([src*="youtube-nocookie.com"]) {
    height: 100% !important;
    max-height: 100% !important;
    margin-top: 0 !important;
}

/* Fill-crop YouTube: scale the 16:9 frame until it covers the portrait slide,
   cropping the sides rather than letterboxing the top and bottom. 177.78vh is
   16/9 of the viewport height, which is the width needed to cover it. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] iframe[src*="youtube.com"],
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] iframe[src*="youtube-nocookie.com"],
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-youtube-cover > iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: max(100%, 177.78vh) !important;
    height: max(100%, 56.25vw) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-topbar {
    min-height: calc(var(--bloc-fullscreen-safe-top) + 52px) !important;
    padding: var(--bloc-fullscreen-safe-top) 16px 0 !important;
    background: transparent !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-top-close i {
    display: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-top-close::before {
    content: "" !important;
    width: 11px !important;
    height: 11px !important;
    border-right: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;
    transform: translateY(-3px) rotate(45deg) !important;
}

/* Do not cover controls owned by YouTube/TikTok/etc. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen:has([data-card-id] iframe) #bloc-byte-engagement-shell {
    display: grid !important;
}

/* One persistent fullscreen shell for every media source. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen.is-chrome-hidden #bloc-byte-topbar,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen.is-chrome-hidden #bloc-byte-info-shell,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen.is-chrome-hidden #bloc-byte-engagement-shell {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-caption-more {
    all: unset !important;
    display: inline-flex !important;
    order: 3 !important;
    width: max-content !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-caption-more[hidden] {
    display: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-title-inline.is-full-caption.is-expanded,
html body.bloc-byte-fullscreen-open #bloc-byte-caption-inline.is-expanded {
    display: block !important;
    max-height: min(32vh, 250px) !important;
    overflow-y: auto !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
}

/* The details deck and engagement row are one connected control surface. */
html body.bloc-byte-fullscreen-open #bloc-byte-info-shell {
    left: 0 !important;
    right: 0 !important;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 92px 20px 10px !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, transparent 0, rgba(0,0,0,.58) 46%, rgba(0,0,0,.92) 100%) !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell {
    border-top-color: rgba(255,255,255,.16) !important;
    border-radius: 18px !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-title-inline,
html body.bloc-byte-fullscreen-open #bloc-byte-title-inline.is-full-caption {
    font-size: clamp(21px, 6vw, 25px) !important;
    line-height: 1.04 !important;
}

/* X posts are documents, not fixed-height video frames. Anchor the post near
   the top and give the provider enough vertical room to display the full post. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen[data-active-media-kind="x"] [data-embed-scope].bloc-byte-x-embed-scope,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen[data-active-media-kind="x"] [data-embed-scope]:has(iframe[src*="platform.twitter.com/embed/Tweet"]) {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: calc(var(--bloc-fullscreen-safe-top) + 62px) 14px calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: auto !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen[data-active-media-kind="x"] .bloc-lazy-iframe--x,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen[data-active-media-kind="x"] iframe.bloc-twitter-embed-frame,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen[data-active-media-kind="x"] iframe[src*="platform.twitter.com/embed/Tweet"] {
    width: min(550px, calc(100vw - 28px)) !important;
    max-width: min(550px, calc(100vw - 28px)) !important;
    height: min(820px, calc(100dvh - var(--bloc-fullscreen-safe-top) - 150px)) !important;
    max-height: none !important;
    min-height: min(620px, calc(100dvh - var(--bloc-fullscreen-safe-top) - 150px)) !important;
    margin: 0 auto !important;
    overflow: auto !important;
    pointer-events: auto !important;
    touch-action: pan-y !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen[data-active-media-kind="x"] #bloc-byte-info-shell {
    display: none !important;
}

/* Final connected media deck: caption, timeline, and engagement are one card. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id]:not(.is-active-fullscreen-byte) .bloc-byte-native-controls {
    display: none !important;
}

html body.bloc-byte-fullscreen-open:has(#bloc-byte-fullscreen .bloc-byte-native-controls) #bloc-byte-info-shell {
    left: 16px !important;
    right: 16px !important;
    bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    min-height: 104px !important;
    padding: 18px 18px 14px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background: #0d0e11 !important;
    box-shadow: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls {
    left: 16px !important;
    right: 16px !important;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: 54px !important;
    min-height: 54px !important;
    box-sizing: border-box !important;
    grid-template-columns: 28px 28px 66px minmax(70px, 1fr) 28px 28px !important;
    gap: 7px !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: #0d0e11 !important;
    box-shadow: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls [data-media-progress] {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 4px !important;
    border: 0 !important;
    border-radius: 999px !important;
    outline: 0 !important;
    background: linear-gradient(90deg, #ffffff 0 var(--media-progress, 0%), rgba(255,255,255,.24) var(--media-progress, 0%) 100%) !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls [data-media-progress]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 15px !important;
    height: 15px !important;
    border: 2px solid rgba(13,14,17,.92) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.28) !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell {
    left: 16px !important;
    right: 16px !important;
    bottom: 0 !important;
    width: auto !important;
    height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 0 18px 18px !important;
    background: #0d0e11 !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.28) !important;
}

/* The top chevron is the fullscreen exit. Keep the engagement deck to one
   five-action row; the legacy sixth close button otherwise wraps on iPhone. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen-close {
    display: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 0 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: 58px !important;
    overflow: hidden !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell button {
    height: 58px !important;
}

/* Restrained fullscreen engagement rail. */
html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell {
    left: 12px !important;
    right: 12px !important;
    bottom: 6px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    grid-template-rows: 50px !important;
    border: 0 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell button {
    display: inline-flex !important;
    flex-direction: row !important;
    height: 50px !important;
    gap: 4px !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell button:not(:last-child)::after {
    display: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell i {
    font-size: 17px !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell span:not([hidden]) {
    position: static !important;
    display: inline-flex !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 3px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.68) !important;
    -webkit-text-fill-color: rgba(255,255,255,.68) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* Fullscreen media stays visible beneath caption and transport chrome. */
html body.bloc-byte-fullscreen-open:has(#bloc-byte-fullscreen .bloc-byte-native-controls) #bloc-byte-info-shell {
    left: 20px !important;
    right: 20px !important;
    min-height: 0 !important;
    padding: 18px 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    isolation: isolate !important;
}

/* One continuous translucent fade keeps caption, transport, and engagement
   visually connected. This overrides the legacy solid-black provider mask. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen::after {
    content: "" !important;
    position: fixed !important;
    z-index: 2147483603 !important;
    inset: auto 0 0 !important;
    height: min(280px, 34dvh) !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.14) 30%, rgba(0,0,0,.58) 72%, rgba(0,0,0,.72) 100%) !important;
}

html body.bloc-byte-fullscreen-open:has(#bloc-byte-fullscreen .bloc-byte-native-controls) #bloc-byte-info-shell::before {
    display: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls {
    left: 20px !important;
    right: 20px !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Transport and engagement are one exact 20px–373px surface. Two pixels of
   internal engagement padding preserve the 44px/349px outer icon centers
   while the boxes themselves share identical edges and touch without a seam. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen#bloc-byte-fullscreen #bloc-byte-engagement-shell {
    left: 20px !important;
    right: 20px !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    grid-template-columns: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen#bloc-byte-fullscreen #bloc-byte-engagement-shell #bloc-byte-fullscreen-close {
    display: none !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen#bloc-byte-fullscreen #bloc-byte-engagement-shell button:not(#bloc-byte-fullscreen-close) {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    align-items: center !important;
    justify-content: center !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-info-shell,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-native-controls,
html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell {
    text-shadow: 0 1px 8px rgba(0,0,0,.72) !important;
}

/* ==========================================================================
   TV channel: cinematic treatment.

   The player was a flat black swipe feed. This gives each byte depth the way a
   living-room TV app does: the media floats on a soft vignette, chrome sits on
   a gradient rather than a bar, and slides settle with a subtle scale instead
   of a hard snap. Appended last so it wins over the layered rules above.
   ========================================================================== */

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen {
    background:
        radial-gradient(120% 80% at 50% 0%, #17171c 0%, #0a0a0d 42%, #000 100%) !important;
}

/* Vignette: pulls the eye to the middle of the frame. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen-scroll::after {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 3 !important;
    background:
        radial-gradient(130% 90% at 50% 45%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.55) 100%) !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen-scroll {
    background: transparent !important;
    /* `smooth` fights the native snap and makes swipes feel laggy. */
    scroll-behavior: auto !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* No transition: a snap feed should land instantly, not glide. */
    transition: none !important;
}

/* Media sits inside the frame with breathing room and a soft shadow, so it
   reads as a presented object rather than a photo pasted on black. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] img:not(.bloc-byte-youtube-cover > img),
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] video {
    /* Full-bleed frame, but `contain` so nothing is cropped: these graphics carry
       titles and logos at the very edges that `cover` sliced off. The blurred
       backdrop below fills whatever letterboxing is left, so it still reads as a
       full screen rather than a photo on black. */
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ambient fill: the byte's own artwork, blurred and overscaled behind it. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] {
    position: relative !important;
    overflow: hidden !important;
}

/* Tweet embeds overflowed the slide and rendered clipped side-by-side. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] .twitter-tweet,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] .twitter-tweet-rendered,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] iframe[id^="twitter-widget"] {
    width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 28px) !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
}

/* Chrome floats on a gradient instead of a solid bar. */
html body.bloc-byte-fullscreen-open #bloc-byte-engagement-shell {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 46%, rgba(0,0,0,0.94) 100%) !important;
    border-top: 0 !important;
    backdrop-filter: blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
    z-index: 5 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-caption-inline {
    color: rgba(255,255,255,0.9) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
    text-shadow: 0 1px 12px rgba(0,0,0,0.7) !important;
}

/* The channel plays the whole library, so the position marker is no longer a
   chapter within one season. Present it as a quiet channel position instead. */
html body.bloc-byte-fullscreen-open #bloc-byte-index-inline::before {
    content: "" !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-index-inline {
    color: rgba(255,255,255,0.42) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.42) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
}

/* Title reads as a film card: larger, tighter, with a soft lift off the media. */
html body.bloc-byte-fullscreen-open #bloc-byte-title-inline,
html body.bloc-byte-fullscreen-open #bloc-byte-title-inline.is-full-caption {
    font-size: 17px !important;
    font-weight: 750 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.24 !important;
    text-shadow: 0 2px 18px rgba(0,0,0,0.78) !important;
}

/* Tweets rendered side-by-side and clipped: the widget sets its own inline
   width, and the slide let it overflow. Clamp the whole embed scope and centre
   it, so one tweet occupies one screen. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] [data-embed-scope],
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] .bytes-card-container,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] .bytes-media-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] iframe[id^="twitter-widget"],
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-card-id] .twitter-tweet-rendered {
    width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex: 0 0 auto !important;
}