:root .rest-placeholder {
    --string-color: #BA2121;
    --key-color: #008000;
    --value-color: #0000FF;
}

:root[data-theme="dark"] .rest-placeholder {
    --string-color: #FF6347; /* Tomato */
    --key-color: #32CD32; /* Lime Green */
    --value-color: #1E90FF; /* Dodger Blue */
}

@media (prefers-color-scheme: dark) {
    :root .rest-placeholder {
        --string-color: #FF6347; /* Tomato */
        --key-color: #32CD32; /* Lime Green */
        --value-color: #1E90FF; /* Dodger Blue */
    }
}

section {
    margin: 10px;
    h1 {
        font-family: Helvetica,Arial,sans-serif;
    }
}

.rest-placeholder {
    display: block;
    color: var(--dca-gray-darkest, #333);
    margin-bottom: 1em;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 0.875em;

    .str {
        color: var(--string-color, red);
    }
    .ellipsis:not(:active) {
        display: inline-block; /* or block, depending on your needs */
        text-overflow: ellipsis;
        max-width: 60ch;
        overflow: hidden;
        white-space: nowrap;
        vertical-align: bottom; /* optional, for better alignment */
    }
    .ellipsis {
        cursor: pointer;
    }
    .key, .children {
        color: var(--key-color, red);
        font-weight: bold;
    }
    .null, .bool, .number {
        color: var(--value-color, blue);
    }
    .indent {
        padding-inline-start: 1em;
        border-inline-start: 1px solid var(--dca-gray-lightest, #f2f2f2);
        & > .sep:last-child, & > .sep:has(+ .cms-placeholder) {
            display: none;
        }
    }
}

.rest-placeholder {
    summary {
        margin-inline-start: -1.2em;
        width: fit-content;
        cursor: pointer;
    }
    details:not([open]) summary::after {
        margin-inline: 1em;
        content: '...';
        color: var(--dca-gray-dark, #666);
    }
}
