.evolution {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    contain: inline-size;

    .plot {
        position: relative;
        aspect-ratio: 4 / 5;

        canvas { display: block }
    }

    @media (min-width: 60rem) {
        .plot {
            aspect-ratio: auto;
            block-size: 30rem;
        }
    }

    #evolution-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        margin: 0;
        padding: 0;
        list-style: none;

        button {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            border: none;
            padding: 0;
            background: none;
            color: inherit;

            &[data-hidden] { opacity: 0.4 }
        }
    }
}