html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/*
  Shown until the WebAssembly bundle has loaded and Compose has put its canvas on the page.
  Colours are picked to match the playground's own surface in either scheme, so the handover from
  this to the real UI is not a flash of the wrong background.
*/
#charty-loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #fdfbff;
    color: #49454f;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    transition: opacity 300ms ease;
    z-index: 10;
}

#charty-loading.is-done {
    opacity: 0;
}

.charty-loading__bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 44px;
}

.charty-loading__bars span {
    width: 11px;
    border-radius: 3px;
    background: #6650a4;
    animation: charty-grow 1.1s ease-in-out infinite;
}

.charty-loading__bars span:nth-child(2) {
    animation-delay: 0.15s;
}

.charty-loading__bars span:nth-child(3) {
    animation-delay: 0.3s;
}

.charty-loading__text {
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.01em;
}

@keyframes charty-grow {
    0%, 100% {
        height: 30%;
    }
    50% {
        height: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .charty-loading__bars span {
        animation: none;
        height: 70%;
    }
}

@media (prefers-color-scheme: dark) {
    #charty-loading {
        background: #141218;
        color: #cac4d0;
    }

    .charty-loading__bars span {
        background: #d0bcff;
    }
}