.unsupported-overlay{
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* more translucent so the page below is visible */
    background: rgba(255,255,255,0.75);
    text-align: left;
    padding: 1.25rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* keep the content box distinct and readable */
.unsupported-content{
    max-width: 44rem;
    color: #111;
    outline: none;
    background: rgba(255,255,255,0.96); /* slightly brighter panel for legibility */
    padding: 1.25rem;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

/* compact list styling */
.browser-list { margin-top: 0.5rem; }
.small { font-size: 0.9rem; color: #444; }

/* Instead of hiding the whole page, gently dim & blur it so users can see context */
html.js-checking body > *:not(.unsupported-overlay):not(noscript) {
    filter: blur(2px) brightness(0.65);
    /* still block interaction */
    pointer-events: none;
    user-select: none;
    /* keep layout visible (don't collapse) */
    opacity: 1;
}

/* mobile: make overlay a little more compact and full-screen for legibility */
@media (max-width: 640px) {
    .unsupported-content { width: calc(100% - 2rem); max-width: none; padding: 1rem; }
    .unsupported-overlay { padding: 1rem; align-items: flex-start; justify-content: center; }
}