:root{
    color-scheme:dark;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden;
    background:#000;
}

body{
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.fp-shell{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    overflow:hidden;
    background:#000;
}

.fp-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#000;
}

.fp-topbar{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    padding:
        calc(10px + env(safe-area-inset-top))
        12px
        10px;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.62),
            rgba(0,0,0,0)
        );
    pointer-events:none;
    transition:
        opacity .22s ease,
        transform .22s ease;
}

.fp-top-actions{
    display:flex;
    gap:8px;
}

.fp-icon-btn{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    padding:0;
    color:#fff;
    background:rgba(12,14,18,.62);
    border:1px solid rgba(255,255,255,.13);
    border-radius:12px;
    backdrop-filter:blur(12px);
    text-decoration:none;
    cursor:pointer;
    pointer-events:auto;
}

.fp-icon-btn:active{
    transform:scale(.96);
}

.fp-icon-btn svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.fp-download-btn{
    color:#17120A;
    background:
        linear-gradient(
            135deg,
            #F5C75B,
            #EAB84D
        );
    border-color:#F5C75B;
    box-shadow:
        0 6px 20px rgba(234,184,77,.22);
}

.fp-download-btn svg{
    stroke-width:2;
}

.fp-play{
    position:absolute;
    left:50%;
    top:50%;
    z-index:15;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
    padding:0;
    color:#fff;
    background:transparent;
    border:0;
    cursor:pointer;
    transition:
        opacity .2s ease,
        transform .2s ease;
}

.fp-play span{
    width:70px;
    height:70px;
    display:grid;
    place-items:center;
    color:#17120A;
    background:#EAB84D;
    border-radius:50%;
    box-shadow:
        0 16px 40px rgba(0,0,0,.35),
        0 0 0 8px rgba(234,184,77,.08);
}

.fp-play svg{
    width:31px;
    height:31px;
    margin-left:4px;
    fill:currentColor;
    stroke:none;
}

.fp-play small{
    font-size:10px;
    font-weight:800;
    letter-spacing:.3px;
    text-shadow:0 2px 10px rgba(0,0,0,.6);
}

.fp-shell.is-playing .fp-play{
    opacity:0;
    pointer-events:none;
    transform:
        translate(-50%,-50%)
        scale(.92);
}

.fp-shell.ui-hidden .fp-topbar{
    opacity:0;
    transform:translateY(-10px);
}

.fp-toast{
    position:absolute;
    left:50%;
    bottom:
        calc(70px + env(safe-area-inset-bottom));
    z-index:30;
    transform:translate(-50%,14px);
    opacity:0;
    pointer-events:none;
    padding:9px 13px;
    color:#17120A;
    background:#EAB84D;
    border-radius:999px;
    font-size:9px;
    font-weight:900;
    transition:.2s ease;
}

.fp-toast.show{
    opacity:1;
    transform:translate(-50%,0);
}

@media(orientation:landscape){
    .fp-topbar{
        padding-top:
            calc(7px + env(safe-area-inset-top));
    }

    .fp-play span{
        width:62px;
        height:62px;
    }
}

/* Universal source support V1 */
.fp-embed{
    border:0;
    object-fit:initial;
}