html,
body{
    margin:0;
    background:#000;
    height:100%;
    overflow:hidden;
    font-family:Arial,sans-serif;
}
#nextPanel{
    opacity:.25;
}
#viewport{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    will-change:transform;

    transform:translate3d(0,0,0);

    transition:
        transform .28s cubic-bezier(.22,1,.36,1);

    touch-action:none;

    background:#000;

}


#player{

    aspect-ratio:9/16;

    height:96vh;

    width:auto;

    max-width:430px;

    transition:opacity .18s ease;

}

#meta{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    padding:

        24px

        20px

        max(env(safe-area-inset-bottom),30px)

        20px;

    color:#fff;

    z-index:9999;

    box-sizing:border-box;

    pointer-events:none;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.75) 0%,

            rgba(0,0,0,.30) 45%,

            rgba(0,0,0,0) 100%

        );

}

#channel{

    font-size:13px;

    font-weight:600;

    opacity:.85;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:6px;

}

#title{

    margin:0;

    font-size:24px;

    line-height:1.2;

    font-weight:700;

}

#welcomeScreen{

    position:fixed;

    inset:0;

    background:#000;

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:999999;

    transition:opacity .45s ease;

    pointer-events:none;

}

#welcomeScreen.hide{

    opacity:0;

}

#welcomeLogo{

    font-size:42px;

    font-weight:700;

    margin-bottom:40px;

}

#welcomeHeadline{

    font-size:28px;

    line-height:1.3;

    text-align:center;

    max-width:320px;

}

#welcomeArrow{

    margin-top:70px;

    font-size:56px;

    animation:floatArrow 1.6s ease-in-out infinite;

}

#welcomeText{

    margin-top:16px;

    font-size:18px;

    opacity:.8;

}

@keyframes floatArrow{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-18px);
    }

    100%{
        transform:translateY(0);
    }

}






#gestureLayer{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    top:10%;

    clip-path:

        polygon(

            0 0,

            50% 0,

            50% 10%,

            100% 10%,

            100% 100%,

            0 100%

        );

    z-index:5;

    background:transparent;

}

.feedCard{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}

.feedCard img{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:brightness(.75);

}

.cardGradient{

    display:none;

}

.cardTitle{

    position:absolute;

    left:24px;

    right:24px;

    bottom:80px;

    color:#fff;

    font-size:22px;

    line-height:1.25;

    font-weight:700;

}