.legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}
.legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}
.legend__sw {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--color-text-muted);
}
.legend__sw--in  { background: var(--color-primary); }
.legend__sw--out { background: var(--color-accent); }