.lh-pyro {
    display: none;
    z-index: 1;
    pointer-events: none;
}

.lh-score100 .lh-pyro {
    display: block;
}

.lh-score100 .lh-lighthouse stop:first-child {
    stop-color: hsla(200, 12%, 95%, 0);
}

.lh-score100 .lh-lighthouse stop:last-child {
    stop-color: hsla(65, 81%, 76%, 1);
}

.lh-pyro>.lh-pyro-before,
.lh-pyro>.lh-pyro-after {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation-delay: 1s, 1s, 1s;
}

.lh-pyro>.lh-pyro-after {
    animation-delay: 2.25s, 2.25s, 2.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}

@keyframes bang {
    to {
        opacity: 1;
        box-shadow: -70px -115.67px #47ebbc, -28px -99.67px #eb47a4, 58px -31.67px #7eeb47, 13px -141.67px #eb47c5, -19px 6.33px #7347eb, -2px -74.67px #ebd247, 24px -151.67px #eb47e0, 57px -138.67px #b4eb47, -51px -104.67px #479eeb, 62px 8.33px #ebcf47, -93px 0.33px #d547eb, -16px -118.67px #47bfeb, 53px -84.67px #47eb83, 66px -57.67px #eb47bf, -93px -65.67px #91eb47, 30px -13.67px #86eb47, -2px -59.67px #83eb47, -44px 1.33px #eb47eb, 61px -58.67px #47eb73, 5px -22.67px #47e8eb, -66px -28.67px #ebe247, 42px -123.67px #eb5547, -75px 26.33px #7beb47, 15px -52.67px #a147eb, 36px -51.67px #eb8347, -38px -12.67px #eb5547, -46px -59.67px #47eb81, 78px -114.67px #eb47ba, 15px -156.67px #eb47bf, -36px 1.33px #eb4783, -72px -86.67px #eba147, 31px -46.67px #ebe247, -68px 29.33px #47e2eb, -55px 19.33px #ebe047, -56px 27.33px #4776eb, -13px -91.67px #eb5547, -47px -138.67px #47ebc7, -18px -96.67px #eb47ac, 11px -88.67px #4783eb, -67px -28.67px #47baeb, 53px 10.33px #ba47eb, 11px 19.33px #5247eb, -5px -11.67px #eb4791, -68px -4.67px #47eba7, 95px -37.67px #eb478b, -67px -162.67px #eb5d47, -54px -120.67px #eb6847, 49px -12.67px #ebe047, 88px 8.33px #47ebda, 97px 33.33px #eb8147, 6px -71.67px #ebbc47;
    }
}

@keyframes gravity {
    from {
        opacity: 1;
    }

    to {
        transform: translateY(80px);
        opacity: 0;
    }
}

@keyframes position {

    0%,
    19.9% {
        margin-top: 4%;
        margin-left: 47%;
    }

    20%,
    39.9% {
        margin-top: 7%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 6%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 3%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 3%;
        margin-left: 80%;
    }
}


.lh-scores-container {
    display: flex;
    flex-direction: column;
    padding: var(--default-padding) 0;
    position: relative;
    width: 100%;
}

.lh-sticky-header {
    --gauge-circle-size: var(--gauge-circle-size-sm);
    --plugin-badge-size: 16px;
    --plugin-icon-size: 75%;
    --gauge-wrapper-width: 60px;
    --gauge-percentage-font-size: 13px;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--topbar-height);
    font-weight: 500;
    display: none;
    justify-content: center;
    background-color: var(--sticky-header-background-color);
    border-bottom: 1px solid var(--color-gray-200);
    padding-top: var(--score-container-padding);
    padding-bottom: 4px;
    z-index: 2;
    pointer-events: none;
}

.lh-devtools .lh-sticky-header {
    /* The report within DevTools is placed in a container with overflow, which changes the placement of this header unless we change `position` to `sticky.` */
    position: sticky;
}

.lh-sticky-header--visible {
    display: grid;
    grid-auto-flow: column;
    pointer-events: auto;
}

/* Disable the gauge arc animation for the sticky header, so toggling display: none
       does not play the animation. */
.lh-sticky-header .lh-gauge-arc {
    animation: none;
}

.lh-sticky-header .lh-gauge__label,
.lh-sticky-header .lh-fraction__label {
    display: none;
}

.lh-highlighter {
    width: var(--gauge-wrapper-width);
    height: 1px;
    background-color: var(--highlighter-background-color);
    /* Position at bottom of first gauge in sticky header. */
    position: absolute;
    grid-column: 1;
    bottom: -1px;
    left: 0px;
    right: 0px;
}