.screenshot {
    margin: 2rem auto;
    max-width: 900px;
    padding: 0 1rem;
    text-align: center;
}

.screenshot img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.screenshot-preview {
    margin: 0.75rem 0;
}

.screenshot-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    display: block;
}

/* Light/dark responsive screenshots: show screenshot-light by default, screenshot-dark in dark mode */
img.screenshot-dark {
    display: none;
}

/* System dark mode (auto), not manually overridden to light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) img.screenshot-light {
        display: none;
    }

    :root:not([data-theme="light"]) img.screenshot-dark {
        display: block;
    }
}

/* Manually forced dark mode */
:root[data-theme="dark"] img.screenshot-light {
    display: none;
}

:root[data-theme="dark"] img.screenshot-dark {
    display: block;
}