/* Community home is a reading surface, not a stack of nested cards. */
    html body.community-active #community-main-area {
        --community-feed-ink: #0b0b0d;
        --community-feed-muted: rgba(11, 11, 13, 0.50);
        --community-feed-faint: rgba(11, 11, 13, 0.34);
    }

    html[data-theme^="dark"] body.community-active #community-main-area,
    body[data-theme^="dark"].community-active #community-main-area {
        --community-feed-ink: #f7f7f8;
        --community-feed-muted: rgba(247, 247, 248, 0.58);
        --community-feed-faint: rgba(247, 247, 248, 0.38);
    }

    html body.community-active #arena-grid {
        --community-feed-ink: #0b0b0d;
        --community-feed-muted: rgba(11, 11, 13, 0.50);
        --community-feed-faint: rgba(11, 11, 13, 0.34);
        background: #ffffff !important;
        padding-top: 4px !important;
    }

    html[data-theme^="dark"] body.community-active #arena-grid,
    body[data-theme^="dark"].community-active #arena-grid {
        --community-feed-ink: #f7f7f8;
        --community-feed-muted: rgba(247, 247, 248, 0.58);
        --community-feed-faint: rgba(247, 247, 248, 0.38);
        background: #050506 !important;
    }

    html body.community-active #community-feed-shell {
        gap: 0 !important;
    }

    /* Keep the feed tabs on the same left rail as compose, rooms, and posts. */
    /* Latest / Media is off the community home: the row sat between the header
       and the first post, pushing the feed down so two words you rarely acted
       on read as chrome in the way. Hidden, not deleted — the buttons,
       setCommunityFeedMode() and the media filter all still work, so bringing
       it back is this one line. */
    html body.community-active #community-feed-modes.community-feed-modes {
        width: 100% !important;
        margin: 0 0 6px !important;
        padding: 0 20px !important;
        display: none !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 22px !important;
        box-sizing: border-box !important;
    }

    html body.community-active #community-feed-modes.community-feed-modes > button {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        text-indent: 0 !important;
        font-weight: 540 !important;
    }

    html body.community-active #community-feed-modes.community-feed-modes > button.is-active {
        font-weight: 650 !important;
    }

    html body.community-active .community-quick-compose {
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    html body.community-active .community-quick-compose-shell {
        width: 100% !important;
        min-height: 56px !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) 34px 34px !important;
        column-gap: 4px !important;
        align-items: center !important;
        border: 1px solid rgba(11, 11, 13, 0.075) !important;
        border-radius: 18px !important;
        outline: 0 !important;
        background: #ffffff !important;
        color: var(--community-feed-ink) !important;
        box-shadow: 0 5px 18px rgba(11, 11, 13, 0.035) !important;
        text-align: left !important;
    }

    html[data-theme^="dark"] body.community-active .community-quick-compose-shell,
    body[data-theme^="dark"].community-active .community-quick-compose-shell {
        border-color: rgba(247, 247, 248, 0.10) !important;
        background: rgba(247, 247, 248, 0.055) !important;
        box-shadow: none !important;
    }

    html body.community-active .community-quick-compose-avatar {
        width: 38px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 13px !important;
        background: rgba(11, 11, 13, 0.055) !important;
        color: var(--community-feed-muted) !important;
        font-size: 12px !important;
        font-weight: 760 !important;
    }

    html body.community-active .community-quick-compose-avatar img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    html body.community-active .community-quick-compose-input,
    html[data-theme] body.community-active #community-main-area #community-quick-compose-input[type="text"] {
        width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        color: var(--community-feed-muted) !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        font-weight: 520 !important;
    }

    html body.community-active .community-quick-compose-input:focus,
    html[data-theme] body.community-active #community-main-area #community-quick-compose-input[type="text"]:focus {
        color: var(--community-feed-ink) !important;
        -webkit-text-fill-color: currentColor !important;
    }

    html body.community-active .community-quick-compose-input::placeholder,
    html[data-theme] body.community-active #community-main-area #community-quick-compose-input[type="text"]::placeholder {
        color: var(--community-feed-muted) !important;
        -webkit-text-fill-color: var(--community-feed-muted) !important;
        opacity: 1 !important;
    }

    html body.community-active .community-quick-compose-media {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 999px !important;
        outline: 0 !important;
        background: transparent !important;
        color: var(--community-feed-ink) !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
        font-size: 15px !important;
    }

    html body.community-active .community-quick-compose-media.has-media {
        position: relative !important;
        background: transparent !important;
        color: var(--community-feed-ink) !important;
        -webkit-text-fill-color: currentColor !important;
    }

    html body.community-active .community-quick-compose-media.has-media::after {
        content: "" !important;
        position: absolute !important;
        top: 4px !important;
        right: 3px !important;
        width: 6px !important;
        height: 6px !important;
        border: 2px solid #ffffff !important;
        border-radius: 999px !important;
        background: var(--community-feed-ink) !important;
    }

    html body.community-active .community-quick-compose-send {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 999px !important;
        outline: 0 !important;
        background: transparent !important;
        color: var(--community-feed-ink) !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
        font-size: 15px !important;
    }

    html body.community-active .community-quick-compose-send:disabled {
        opacity: 0.42 !important;
    }

    html body.community-active #community-room-rail.community-room-rail {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 20px 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        scroll-padding-inline: 20px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body.community-active #community-room-rail.community-room-rail[hidden] {
        display: none !important;
    }

    html body.community-active #community-room-rail.community-room-rail::-webkit-scrollbar {
        display: none !important;
    }

    html body.community-active #community-room-rail .community-room-card,
    html body.community-active #community-room-rail .community-room-card.is-all {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 156px !important;
        height: 36px !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 0 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(11, 11, 13, 0.10) !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        color: #343438 !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
    }

    html body.community-active #community-room-rail .community-room-card.is-active {
        border-color: var(--community-feed-ink) !important;
        background: var(--community-feed-ink) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        box-shadow: none !important;
    }

    html[data-theme^="dark"] body.community-active #community-room-rail .community-room-card,
    body[data-theme^="dark"].community-active #community-room-rail .community-room-card {
        border-color: rgba(247, 247, 248, 0.16) !important;
        background: transparent !important;
        background-color: transparent !important;
        color: rgba(247, 247, 248, 0.72) !important;
    }

    html[data-theme^="dark"] body.community-active #community-room-rail .community-room-card.is-active,
    body[data-theme^="dark"].community-active #community-room-rail .community-room-card.is-active {
        border-color: #f7f7f8 !important;
        background: #f7f7f8 !important;
        color: #09090b !important;
        -webkit-text-fill-color: #09090b !important;
    }

    html body.community-active #community-room-rail .community-room-kicker,
    html body.community-active #community-room-rail .community-room-preview,
    html body.community-active #community-room-rail .community-room-count {
        display: none !important;
    }

    html body.community-active #community-room-rail .community-room-title,
    html body.community-active #community-room-rail .community-room-card.is-all .community-room-title {
        max-width: 126px !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: currentColor !important;
        -webkit-text-fill-color: currentColor !important;
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 520 !important;
        letter-spacing: -0.005em !important;
        text-transform: none !important;
    }

    html body.community-active #community-room-rail .community-room-card::before,
    html body.community-active #community-room-rail .community-room-card::after {
        content: none !important;
        display: none !important;
        background: none !important;
        box-shadow: none !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card,
    html body.community-active #arena-grid .mobile-community-card.community-feed-hero,
    html body.community-active #arena-grid .mobile-community-card.community-feed-media,
    html body.community-active #arena-grid .mobile-community-card.community-feed-note,
    html body.community-active #arena-grid .mobile-community-card.community-feed-essay,
    html body.community-active #arena-grid .mobile-community-card.signal-short,
    html body.community-active #arena-grid .mobile-community-card.signal-medium,
    html body.community-active #arena-grid .mobile-community-card.signal-long {
        display: grid !important;
        grid-template-columns: 36px minmax(0, 1fr) !important;
        column-gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 18px 20px 16px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card + .bloc-card.mobile-community-card {
        margin-top: 0 !important;
        border-top: 1px solid rgba(9, 9, 11, 0.08) !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card::before,
    html body.community-active #arena-grid .bloc-card.mobile-community-card::after {
        content: none !important;
        display: none !important;
    }

    html body.community-active #arena-grid .mobile-community-card-meta-wrap {
        display: contents !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-meta-row {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 36px minmax(0, 1fr) auto !important;
        grid-template-rows: 17px 15px !important;
        column-gap: 12px !important;
        row-gap: 1px !important;
        min-height: 36px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: start !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .profile-avatar,
    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-meta-row .profile-avatar {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: rgba(11, 11, 13, 0.035) !important;
        box-shadow: none !important;
    }

    html[data-theme^="dark"] body.community-active #arena-grid .bloc-card.mobile-community-card .profile-avatar,
    body[data-theme^="dark"].community-active #arena-grid .bloc-card.mobile-community-card .profile-avatar {
        background: rgba(247, 247, 248, 0.08) !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .profile-avatar img,
    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-meta-row .profile-avatar img {
        border-radius: 50% !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-author {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: end !important;
        color: var(--community-feed-ink) !important;
        -webkit-text-fill-color: var(--community-feed-ink) !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
        font-weight: 620 !important;
        letter-spacing: -0.005em !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-timestamp {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: start !important;
        max-width: 150px !important;
        color: var(--community-feed-muted) !important;
        -webkit-text-fill-color: var(--community-feed-muted) !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        font-weight: 430 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
        align-self: center !important;
        justify-self: end !important;
        width: auto !important;
        max-width: 104px !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 5px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--community-feed-faint) !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        font-weight: 520 !important;
        letter-spacing: 0.07em !important;
        text-transform: uppercase !important;
    }

    html body.community-active #arena-grid .mobile-community-rebyte-meta {
        grid-column: 2 / -1 !important;
        justify-self: start !important;
        width: auto !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 0 9px !important;
        padding: 0 !important;
        gap: 5px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--community-feed-faint) !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-message {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 10px 0 11px !important;
        padding: 0 !important;
        display: block !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-message p,
    html body.community-active #arena-grid .bloc-card.mobile-community-card.signal-short .mobile-community-message p,
    html body.community-active #arena-grid .bloc-card.mobile-community-card.signal-medium .mobile-community-message p,
    html body.community-active #arena-grid .bloc-card.mobile-community-card.signal-long .mobile-community-message p,
    html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-message p {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--community-feed-ink) !important;
        -webkit-text-fill-color: var(--community-feed-ink) !important;
        font-size: clamp(14px, 3.5vw, 15px) !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
    }

    html body.community-active #arena-grid .mobile-community-media-stage {
        grid-column: 1 / -1 !important;
        margin-top: 3px !important;
        margin-bottom: 12px !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-actions {
        grid-column: 2 !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.community-active #arena-grid .mobile-community-actions > div.bytes-tv-mobile-hero-rail {
        display: grid !important;
        grid-template-columns: repeat(5, 32px) !important;
        align-items: center !important;
        justify-items: center !important;
        justify-content: space-between !important;
        width: calc(100% + 15px) !important;
        min-width: 0 !important;
        max-width: calc(100% + 15px) !important;
        min-height: 32px !important;
        margin: 0 -7.5px !important;
        gap: 0 !important;
    }

    html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button,
    html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--community-feed-muted) !important;
        -webkit-text-fill-color: currentColor !important;
    }

    html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement,
    html body.community-active #arena-grid .mobile-community-actions .community-feed-action.is-active,
    html body.community-active #arena-grid .mobile-community-actions .community-feed-action.is-rebyted {
        color: var(--community-feed-ink) !important;
        -webkit-text-fill-color: currentColor !important;
    }

    /* A quiet inset rule separates posts without turning the feed into cards. */
    html body.community-active #arena-grid .bloc-card.mobile-community-card {
        position: relative !important;
        padding-top: 20px !important;
        padding-bottom: 19px !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card + .bloc-card.mobile-community-card {
        margin-top: 0 !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card + .bloc-card.mobile-community-card::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 68px !important;
        right: 20px !important;
        width: auto !important;
        height: 1px !important;
        background: rgba(11, 11, 13, 0.085) !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    html[data-theme^="dark"] body.community-active #arena-grid .bloc-card.mobile-community-card + .bloc-card.mobile-community-card::before,
    body[data-theme^="dark"].community-active #arena-grid .bloc-card.mobile-community-card + .bloc-card.mobile-community-card::before {
        background: rgba(247, 247, 248, 0.12) !important;
    }

    /* Media follows the same content rail as the message and engagement row. */
    html body.community-active #arena-grid .mobile-community-media-stage,
    html body.community-active #arena-grid .mobile-community-media-stage.mobile-community-raw-media {
        grid-column: 2 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 9px 0 15px !important;
        padding: 0 !important;
        justify-content: stretch !important;
        overflow: hidden !important;
        border-radius: 18px !important;
    }

    /* Stills keep their own proportions. A fixed 4/3 with object-fit: cover was
       slicing the top and bottom off every portrait photo; the wrapper now grows
       to the image so nothing is clipped and the media stays flush with the
       engagement row beneath it. */
    /* A coverage card is not a still.
       It brings its own picture with its own corners, and the tint behind a
       photograph shows around it as a grey box drawn on something that was
       already a shape. The rules below are for stills; this is not one. */
    html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview:has(.community-coverage-card) {
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview,
    html body.community-active #arena-grid .mobile-community-media-stage img {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        display: block !important;
        border: 0 !important;
        border-radius: 18px !important;
        background: rgba(11, 11, 13, 0.035) !important;
        box-shadow: none !important;
        object-fit: contain !important;
    }

    /* Community scrolls like Moments does.
     *
     * Market, Map and TV are each a fixed panel that reaches the floor with
     * its own scroller inside, so the feed passes behind the glass nav pill
     * and there is no dead white band under it. Community was the exception:
     * a relative block in normal flow that grew to whatever its posts came
     * to, which put the scroll on the page instead of the panel and left it
     * stopping short of the bottom.
     *
     * The clearance for the pill lives as padding inside the scroller, not as
     * a gap under the panel — a gap just shows the body colour through.
     */
    html body.community-active #community-main-area {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    html body.stream-active .mobile-live-recording-wrap .mobile-live-recording-status,
    html body.stream-active .mobile-live-recording-wrap .mobile-live-recording-status *,
    html body.stream-active .mobile-live-recording-wrap .mobile-live-viewer-count,
    html body.stream-active .mobile-live-recording-wrap .mobile-live-viewer-count *,
    html body.stream-active .mobile-live-recording-wrap .mobile-live-sound-btn,
    html body.stream-active .mobile-live-recording-wrap .mobile-live-sound-btn * {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    html body.stream-active .mobile-live-recording-wrap .mobile-live-recording-status,
    html body.stream-active .mobile-live-recording-wrap .mobile-live-viewer-count,
    html body.stream-active .mobile-live-recording-wrap .mobile-live-sound-btn {
        background: rgba(0, 0, 0, 0.74) !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
    }