.debug_panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: 1rem;
    background-color: white;
    color: rgb(33, 33, 33);
    font-family: monospace;
    width: 98vw;
    padding: 0.5em;
    border-radius: 0.5em;
    margin-block-start: 0.2em;
    details {
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        grid-column: 1 / -1;
        grid-row: 1 / span 3;
    }
    details::details-content {
        grid-row: 2; /* position in the second row */
        grid-column: 1 / -1; /* cover all three columns */
        padding: 1rem;
        max-height: 50vh;
        overflow: scroll;
        z-index: 2;
    }
    details:not([open])::details-content {
        display: none;
    }
    summary {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        grid-row: 1; /* First subgrid row */
        display: grid;
        padding: 1rem; /* Some breathing room */
        border-bottom: 2px solid darkgray;
        cursor: pointer; /* Update the cursor when hovered */
        grid-column: var(--n) / span 1;
        z-index: 1;
    }

    /* Style the <summary> element when <details> is [open] */
    details[open] summary {
        font-weight: bold;
    }
    .debug-content pre {
        white-space: pre-wrap;
    }
}
.debug_section > summary {
    border-radius: 0.5em;
    background-color: black;
    padding: 0.5em 2em;
    color: white;
    width: max-content;
    margin-block-start: 1.5em;
}