:where(:root) {
    --theme-lightness: 0.97;
    --theme-chroma: 0.0075;
    --theme-hue: 65;

    @media (prefers-color-scheme: dark) {
        --theme-lightness: 0.3;
    }

    min-height: calc(100dvh - 4em);
    margin: 2em;

    * {
        box-sizing: border-box;
    }

    body {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        background: oklch(
            var(--theme-lightness) var(--theme-chroma) var(--theme-hue)
        );
        min-height: inherit;
        margin: 0;
        gap: 2em;
    }
}

heroicc-logo {
    max-width: 100%;
    background: radial-gradient(
        circle at 35% 47%,
        oklch(0.78 0.2 65),
        oklch(0.78 0.2 65 / 25%) 2.25%,
        oklch(0.78 0.2 65 / 25%) 0.5%,
        oklch(0.78 0.2 65 / 0%) 35%
    );
    svg {
        max-width: inherit;
    }
}