/* Pele diagrams — colours follow the bearblog theme variables, so light/dark
   switches live without re-rendering. */
.diagram {
    --pele-bg: var(--background-color);
    --pele-fg: var(--text-color);
    --pele-line: var(--text-color);
    --pele-accent: var(--link-color);
    --pele-font: var(--font-main);
    /* Strip above the diagram for the zoom controls so they never cover nodes. */
    --pele-zoom-top: 0;
    --pele-zoom-right: 0;
    position: relative;
    padding-top: 3.5rem;
    margin: 1.5em 0;
}

pre.diagram {
    white-space: pre-wrap;
}

@media (prefers-color-scheme: dark) {
    .diagram {
        --pele-muted: #9aa8ad;
        --pele-surface: #0a3440;
        --pele-surface-alt: #124452;
        --pele-border: #4d6d77;
    }
}