.qu-offline-status {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding: .65rem 1rem;
    background: #fff3cd;
    color: #664d03;
    border-bottom: 1px solid #d9b95f;
    box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
    font-size: .95rem;
    line-height: 1.45;
}
.qu-offline-status[hidden] { display: none !important; }
.qu-offline-status > [role="status"] { flex: 0 1 65rem; min-width: 0; overflow-wrap: anywhere; }
.qu-offline-status-space { flex: 0 0 auto; height: 0; }
.qu-offline-status-retry {
    flex: 0 0 auto;
    min-height: 44px;
    padding: .4rem .8rem;
    border: 1px solid currentColor;
    border-radius: .375rem;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.qu-offline-status-retry:hover { background: rgb(102 77 3 / 10%); }
.qu-offline-status-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.qu-offline-status-retry:disabled { cursor: progress; opacity: .7; }
.qu-skip-link:focus { top: calc(var(--qu-offline-status-height, 0px) + .5rem); }
html { scroll-padding-top: calc(var(--qu-offline-status-height, 0px) + 1rem); }
html[data-darkreader-scheme="dark"] .qu-offline-status { background: #332a12; color: #ffe5a0; border-bottom-color: #78612b; }
@media (prefers-color-scheme: dark) {
    .qu-offline-status[data-auto-dark-mode="true"] { background: #332a12; color: #ffe5a0; border-bottom-color: #78612b; }
}
@media (max-width: 575.98px) {
    .qu-offline-status { justify-content: flex-start; padding: .5rem .75rem; }
}