.khtp-fb-feed-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    width:100%;
}

.khtp-fb-feed-card{
    --khtp-bg-image:none;
    --khtp-overlay-opacity:24%;
    --khtp-overlay-active:86%;
    --khtp-stack-offset:390px;
    --khtp-message-height:360px;
    position:relative;
    min-width:0;
    height:620px;
    overflow:hidden;
    border-radius:28px;
    background-color:#0b1b35;
    background-image:var(--khtp-bg-image);
    background-size:cover;
    background-position:center center;
    isolation:isolate;
    box-shadow:0 18px 48px rgba(3,17,43,.15);
    transform:translateZ(0);
    transition:box-shadow .55s cubic-bezier(.22,.72,.2,1);
}


.khtp-fb-feed-card.no-image{
    background-image:none;
}

.khtp-fb-feed-card.no-image .khtp-fb-card-overlay{
    opacity:var(--khtp-overlay-active);
}

.khtp-fb-feed-card.no-image .khtp-fb-card-scrim{
    opacity:.12;
}

.khtp-fb-card-overlay,
.khtp-fb-card-scrim{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.khtp-fb-card-overlay{
    z-index:0;
    background:#071b3d;
    opacity:var(--khtp-overlay-opacity);
    transition:opacity .58s cubic-bezier(.22,.72,.2,1);
}

.khtp-fb-card-scrim{
    z-index:1;
    background:linear-gradient(180deg,rgba(1,10,25,.04) 20%,rgba(2,16,39,.11) 58%,rgba(2,14,35,.74) 100%);
    transition:opacity .58s cubic-bezier(.22,.72,.2,1);
}

.khtp-fb-card-link{
    position:absolute;
    inset:0;
    z-index:2;
    border-radius:inherit;
    outline:none;
}

.khtp-fb-card-link:focus-visible{
    box-shadow:inset 0 0 0 3px rgba(255,255,255,.92);
}

.khtp-fb-card-stage{
    position:absolute;
    z-index:3;
    pointer-events:none;
    top:0;
    right:0;
    bottom:0;
    left:0;
    padding:32px 32px 28px;
    overflow:hidden;
}

.khtp-fb-feed-card.has-engagement .khtp-fb-card-stage{
    bottom:70px;
}

.khtp-fb-content-stack{
    width:100%;
    transform:translateY(var(--khtp-stack-offset));
    transition:transform .68s cubic-bezier(.16,1,.3,1);
    will-change:transform;
}

.khtp-fb-author{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
    text-shadow:0 2px 14px rgba(0,0,0,.28);
}

.khtp-fb-avatar{
    width:54px;
    height:54px;
    flex:0 0 54px;
    border-radius:50%;
    object-fit:cover;
    background:#fff;
    box-shadow:0 4px 16px rgba(0,0,0,.16);
}

.khtp-fb-avatar--fallback{
    display:grid;
    place-items:center;
    color:#1877f2;
    font:800 31px/1 Arial,sans-serif;
}

.khtp-fb-author-copy{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.khtp-fb-page-name{
    display:block;
    max-width:100%;
    overflow:hidden;
    color:#fff;
    font-family:inherit;
    font-size:18px;
    line-height:1.22;
    font-weight:700;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.khtp-fb-date{
    color:#fff;
    font-size:14px;
    line-height:1.35;
    font-weight:500;
    opacity:.92;
}

.khtp-fb-message-viewport{
    position:relative;
    max-height:var(--khtp-message-height);
    margin-top:26px;
    overflow:hidden;
    opacity:0;
    transform:translateY(16px);
    pointer-events:none;
    overscroll-behavior:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
    transition:opacity .42s ease .12s,transform .62s cubic-bezier(.16,1,.3,1) .08s;
}

.khtp-fb-message-viewport.is-empty{display:none;}

.khtp-fb-message{
    color:#fff;
    font-family:inherit;
    font-size:17px;
    line-height:1.62;
    font-weight:500;
    letter-spacing:-.01em;
    text-shadow:0 1px 12px rgba(0,0,0,.22);
}

.khtp-fb-message-viewport::-webkit-scrollbar{display:none;width:0;height:0;}

.khtp-fb-message br + br{line-height:1.2;}
.khtp-fb-hashtag{color:#2d76ff;font-weight:600;}

.khtp-fb-engagement{
    position:absolute;
    z-index:5;
    right:0;
    bottom:0;
    left:0;
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:0 32px;
    border-top:1px solid rgba(255,255,255,.18);
    background-color:rgba(3,17,43,.62);
    color:#aab5c4;
    font-size:15px;
    line-height:1;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    transition:color .4s ease,background-color .5s cubic-bezier(.22,.72,.2,1);
    pointer-events:none;
}

.khtp-fb-stat{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    white-space:nowrap;
}

.khtp-fb-stat svg{
    width:24px;
    height:24px;
    flex:0 0 24px;
    fill:currentColor;
    opacity:.9;
}

.khtp-fb-stat b{font-weight:700;color:inherit;}
.khtp-fb-stat em{font-style:normal;font-weight:500;}

.khtp-fb-feed-card.is-active,
.khtp-fb-feed-card.is-static{
    box-shadow:0 18px 48px rgba(3,17,43,.15);
}

.khtp-fb-feed-card.is-active .khtp-fb-card-overlay,
.khtp-fb-feed-card.is-static .khtp-fb-card-overlay{
    opacity:var(--khtp-overlay-active);
}

.khtp-fb-feed-card.is-active .khtp-fb-card-scrim,
.khtp-fb-feed-card.is-static .khtp-fb-card-scrim{
    opacity:.22;
}

.khtp-fb-feed-card.is-active .khtp-fb-content-stack,
.khtp-fb-feed-card.is-static .khtp-fb-content-stack{
    transform:translateY(0);
}

.khtp-fb-feed-card.is-active .khtp-fb-message-viewport,
.khtp-fb-feed-card.is-static .khtp-fb-message-viewport{
    opacity:1;
    transform:translateY(0);
    overflow-y:auto;
    pointer-events:auto;
    touch-action:pan-y;
}

.khtp-fb-feed-card.is-active .khtp-fb-engagement,
.khtp-fb-feed-card.is-static .khtp-fb-engagement{
    color:#c6cfda;
    background-color:rgba(3,17,43,.76);
}

.khtp-fb-feed-grid.is-editor-preview .khtp-fb-card-link{pointer-events:none;}

.khtp-fb-feed-notice{
    padding:17px 18px;
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
    color:#374151;
    font-size:14px;
}

@media (max-width:1024px){
    .khtp-fb-feed-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:767px){
    .khtp-fb-feed-grid{grid-template-columns:1fr;gap:18px;}
    .khtp-fb-feed-card{height:560px;border-radius:22px;}
    .khtp-fb-card-stage{padding:25px 24px 22px;}
    .khtp-fb-feed-card.has-engagement .khtp-fb-card-stage{bottom:64px;}
    .khtp-fb-page-name{font-size:17px;}
    .khtp-fb-date{font-size:13px;}
    .khtp-fb-message-viewport{margin-top:22px;}
    .khtp-fb-message{font-size:16px;line-height:1.58;}
    .khtp-fb-engagement{min-height:64px;padding:0 24px;font-size:14px;}
    .khtp-fb-stat svg{width:22px;height:22px;flex-basis:22px;}
}

@media (hover:none){
    .khtp-fb-feed-card{
        background-size:cover!important;
        transform:none!important;
    }
    .khtp-fb-feed-card .khtp-fb-card-overlay{opacity:var(--khtp-overlay-active);}
    .khtp-fb-feed-card .khtp-fb-card-scrim{opacity:.22;}
    .khtp-fb-feed-card .khtp-fb-content-stack{transform:translateY(0);}
    .khtp-fb-feed-card .khtp-fb-message-viewport{opacity:1;transform:none;overflow-y:auto;pointer-events:auto;touch-action:pan-y;}
}

@media (prefers-reduced-motion:reduce){
    .khtp-fb-feed-card,
    .khtp-fb-card-overlay,
    .khtp-fb-card-scrim,
    .khtp-fb-content-stack,
    .khtp-fb-message-viewport{transition:none!important;}
}