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;
}

/* Blocked while the poster image and play button sit on top (below), so a
   tap on the still reaches our own play button instead of passing through
   to YouTube underneath. Once playback starts (.is-playing, added right
   after the play button's postMessage), taps need to reach the real
   player instead -- otherwise there's no way to pause, scrub, or bring
   YouTube's own controls back up once they auto-hide. */
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.is-playing > iframe {
    pointer-events: auto !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.
   Scoped to visual=true only (the &visual= query string on the iframe's own
   src) -- this was written to crop the tall "visual" player's built-in
   title banner by shifting it up and off frame. The fullscreen viewer now
   requests the compact classic player instead (visual=false, no title
   banner to crop), which this rule must not touch: applying the same
   -92px/1.12x offset to the small classic bar blew it up past its own
   166px wrapper and shoved it out of position. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen [data-embed-scope]:has(iframe[src*="w.soundcloud.com/player"][src*="visual=true"]) {
    overflow: hidden !important;
    background: #000000 !important;
}

html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen iframe[src*="w.soundcloud.com/player"][src*="visual=true"] {
    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;
}

/* The compact classic player: a fixed-height bar, no cropping needed --
   just fill its own wrapper (.bloc-byte-soundcloud-player, sized to the
   player's real height and pinned to the bottom of the artwork canvas). */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen iframe[src*="w.soundcloud.com/player"][src*="visual=false"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    transform: none !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;
}

/* YouTube used to fill the entire slide (100dvh) full-bleed like a cinema
   video, so this scaled the 16:9 frame up to 177.78vh (16/9 of the
   viewport height) to cover that whole portrait box edge-to-edge,
   cropping the sides. YouTube is now boxed the same way SoundCloud is --
   a shorter, bounded height above the poster row and engagement icons --
   so that same 177.78vh math massively overflowed the smaller box (the
   iframe rendered ~4x too wide, shifted far left). The real player fits
   its own box normally here instead; the video letterboxes rather than
   crops if its aspect ratio doesn't match the box exactly. */
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: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    transform: none !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]):not(.bloc-byte-act-icon) {
    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;
}

/* A room sheet opens inside the rooms iframe, so it cannot out-stack the
   nav — they are different documents. `rooms-modal-open` was already being
   toggled on the body by mobile-rooms-overlay.js but no rule consumed it,
   which is why the sales sheet rendered underneath the tab bar. Same
   treatment as the byte fullscreen above: get the nav out of the way. */
html body.rooms-modal-open #bottom-nav {
    display: none !important;
}

/* A live cross-origin page can paint past its own iframe box regardless of
   overflow:hidden on any ancestor -- confirmed in complete isolation,
   outside this app entirely. So the page cannot be trusted to crop itself
   to a box shorter than its real content, and the fix is not to give it one:
   the embed keeps its full, natural height. The caption bar and engagement
   row are normally fixed to the screen, floating on top of whatever is
   behind them; the JS that shows this card (updateBlocByteChrome in
   mobile.html) moves both into this slide's own DOM instead, right after
   the embed, so they sit in normal document flow below the full-height page
   rather than overlaying it -- the slide grows past one screen and the
   reader scrolls the rest of the way, the same as any other overlong card
   would. This only re-styles them for that moved-in state; their normal
   fixed-to-the-screen appearance for every other card is untouched.
   Placed at the very end of the file, and repeating #bloc-byte-fullscreen,
   to be sure this wins over the several earlier rules in this same file
   that set display:flex and position:fixed on these same elements. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-web-embed {
    height: auto !important;
    min-height: 100dvh !important;
    display: block !important;
}
/* Shy some of the full screen height, on purpose: with the embed filling
   every pixel, the caption bar, who-posted-it, and the engagement row sat
   completely offscreen with no visible edge of them anywhere -- nothing on
   screen said there was more below, so scrolling to find them was a guess,
   and most people never would. This is sized to the two bars' own real
   combined height with the avatar row (measured live: ~88px caption band +
   50px engagement row, plus safe-area padding) rather than a guess padded
   for the longest possible caption -- the earlier 230px reservation left a
   band of unused white space between the page and the caption on every
   normal card just to cover a case that runs longer. A card whose caption
   text is unusually long can still push its own band taller than this at
   render time; the page above it stays the one thing sized in CSS ahead of
   knowing that.
   This 155px budget was measured against the slide's full 100dvh box, but
   almost every web-embed card also carries .bloc-byte-needs-safe-top (any
   card that isn't native-camera media gets it), which adds its own
   max(44px, safe-area-inset-top) as padding-top on the slide -- on top of,
   not inside of, this box's height. The two were never subtracted
   together, so the real stack (safe-top padding + this box + info-shell +
   engagement-shell) ran taller than one screen and pushed the engagement
   row a bit past the bottom edge, under the home indicator. Subtracting
   the safe-top padding here too keeps the whole stack at exactly 100dvh
   for every web-embed card, safe-top or not (env() resolves to 0px on a
   device with no notch, so this is a no-op there). */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-web-embed > [data-embed-scope] {
    height: calc(100dvh - 155px - max(44px, env(safe-area-inset-top, 0px))) !important;
    min-height: calc(100dvh - 155px - max(44px, env(safe-area-inset-top, 0px))) !important;
    max-height: none !important;
}
/* SoundCloud rode on the general .bloc-byte-web-embed rule above once it
   also subtracted the safe-top padding, so this SoundCloud-only override
   would now just repeat the same value -- removed rather than left as a
   dead duplicate. If SoundCloud's box ever needs to differ from a plain
   web-embed's again, reintroduce this selector rather than editing the
   shared one above. */
/* These are two separate elements in the markup (info-shell for the
   caption/who-posted-it, engagement-shell for the icon row), normally two
   independent overlays floating at different heights on top of a photo or
   clip. Moved into the flow for a website card, sitting one after the
   other with two different paddings and no shared edge reads as two
   stacked black boxes instead of one panel. Matching padding, no radius,
   no shadow, same background on both -- so the seam between them
   disappears and it reads as one continuous section, caption above,
   icons below, the way TV's own single sheet does it. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-web-embed > #bloc-byte-info-shell {
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: 2 !important;
    background: #060807 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 16px 20px 8px !important;
}
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-web-embed > #bloc-byte-engagement-shell {
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #060807 !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 4px !important;
    /* This row used to be pinned to the bottom of the screen with the OS
       home indicator as its only neighbor, so the small gap it had was
       enough. Moved into the flow, it now sits at the literal bottom edge
       of the scrollable content instead -- env(safe-area-inset-bottom)
       alone can compute to 0 depending on how the page is presented,
       which is exactly why the row read as cut off flush against the
       edge with no breathing room below it. max() keeps a real floor
       under it either way. */
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
}
/* A doubled #bloc-byte-fullscreen#bloc-byte-fullscreen selector earlier in
   this same file sets padding: 0px 2px on this element, at higher
   specificity than a normal id + class chain -- that's what was actually
   winning and erasing the padding-bottom above. Matching the same trick to
   win the tie. It also sets left: 20px; right: 20px, which this rule never
   accounted for -- combined with width: 100% from the plain rule above, the
   row rendered 20px wider than the screen and hung off the right edge with
   the share icon cut off past it. Zeroing left/right here, at the same
   specificity, closes that gap the same way. */
html body.bloc-byte-fullscreen-open.bloc-byte-fullscreen-open #bloc-byte-fullscreen#bloc-byte-fullscreen .bloc-byte-web-embed > #bloc-byte-engagement-shell#bloc-byte-engagement-shell {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
}
/* The ::before/::after pair above exist to darken a photo or clip enough
   for white caption text to sit on top of it -- both scale to the full
   height of [data-card-id], which is now the grown, scrolling slide, so
   the dark wash meant for the last ~30% of one screen was instead landing
   across the last ~30% of a much taller page, over real content. A website
   card needs neither: its own caption/engagement bars sit below the page,
   in the flow, not on top of it, so there's nothing here for either
   pseudo-element to be darkening for. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-web-embed::before,
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-web-embed::after {
    display: none !important;
    content: none !important;
}
/* One more darkening layer, this one fixed to the viewport rather than
   scaled to the card: a vignette on the scroller itself, meant to pull the
   eye to the middle of a photo or clip. Fixed positioning means it doesn't
   move with the scroll, so it fell across whatever real content happened to
   sit at that point on screen once this card could scroll -- the site's own
   footer, in this case, with nothing else here for a vignette to be
   flattering. */
html body.bloc-byte-fullscreen-open.bloc-byte-fullscreen-web-active #bloc-byte-fullscreen-scroll::after {
    display: none !important;
    content: none !important;
}
/* A third darkening layer, this one on the overlay itself rather than the
   scroller or the card -- fixed to the bottom of the viewport regardless of
   scroll position, meant to keep the caption and engagement row visually
   connected over a photo or clip. There's no photo or clip under it for a
   website card; there's real page content, and it read exactly like the
   other two layers before them -- a fade over text that has nothing to do
   with a caption two screens below it. */
html body.bloc-byte-fullscreen-open.bloc-byte-fullscreen-web-active #bloc-byte-fullscreen::after {
    display: none !important;
    content: none !important;
}

/* The generic [data-card-id] rule near the top of this file sets padding: 0
   !important, and this file is loaded twice on the page specifically to win
   the cascade over mobile.html's own inline <style> -- its second copy
   lands after .bloc-byte-needs-safe-top's own padding-top rule in
   mobile.html, and the two are tied on specificity (one class vs one
   attribute selector, equal weight), so the later one won: a SoundCloud
   card's top padding was being erased back to 0, and its player's own
   transport controls sat under the status bar. Repeating the class name for
   extra specificity, same trick used throughout this file, to actually win
   this one for good. */
html body.bloc-byte-fullscreen-open #bloc-byte-fullscreen .bloc-byte-needs-safe-top.bloc-byte-needs-safe-top {
    padding-top: max(44px, env(safe-area-inset-top, 0px)) !important;
}