html, body, #compat {
    width:  100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: white;
    color: black;
}

#compat {
    text-align:center;
    padding: 3rem 1rem;
    max-width: 640px;
    margin: 0 auto;
    font-family: system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    html, body, #compat {
        background: black;
        color: white;
    }
}

#loader {
    width:  180px;
    height: 100%;
    margin: 0 auto;
}

#loader svg {
    width: 100%;
    height: 100%;
}

#loader svg circle {
    fill: none;
    stroke: #4285f4;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 1 300;
    stroke-dashoffset: 0;
    animation:
        rotate     1.4s linear     infinite,
        dash       1.4s ease-in-out infinite;
    transform-origin: center;
}

@keyframes rotate {
    to { transform: rotate(360deg); }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1 300;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 150 300;
        stroke-dashoffset: -75;
    }
    100% {
        stroke-dasharray: 1 300;
        stroke-dashoffset: -282;
    }
}