.ztm-offline-banner {
    position: sticky; top: 0; z-index: 2147483000; box-sizing: border-box;
    width: 100%; padding: .75rem 1rem; gap: .65rem 1.25rem;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    background: #fff4d9; color: #49350a; border-bottom: 2px solid #bd8623;
    font: 400 .95rem/1.5 "Segoe UI", sans-serif; flex-shrink: 0;
}
.ztm-offline-banner[hidden] { display: none; }
html { scroll-padding-top: var(--ztm-offline-height, 0px); }
.project-shell-header { top: var(--ztm-offline-height, 0px); }
.project-primary-navigation { top: calc(var(--project-shell-header-height, 4rem) + var(--ztm-offline-height, 0px)); }
.ztm-offline-banner span { flex: 1 1 25rem; max-width: 75rem; }
.ztm-offline-banner button, .ztm-offline-card button {
    font: inherit; cursor: pointer; border: 1px solid currentColor; border-radius: .35rem;
    background: transparent; color: inherit; padding: .55rem 1rem; flex-shrink: 0;
}
.ztm-offline-banner button:focus-visible, .ztm-offline-card button:focus-visible {
    outline: 3px solid #1687cc; outline-offset: 3px;
}
.ztm-offline-banner button:disabled, .ztm-offline-card button:disabled { cursor: wait; opacity: .7; }
.ztm-offline-page { margin: 0; min-height: 100vh; display: grid; place-items: center;
    background: #f3f6f8; color: #203549; font: 1rem/1.65 "Segoe UI", sans-serif; color-scheme: light; }
.ztm-offline-card { width: min(36rem, calc(100% - 3rem)); padding: 3rem 0; }
.ztm-offline-brand { font-weight: 650; letter-spacing: .025em; border-bottom: 1px solid #c7d5df; padding-bottom: 1rem; }
.ztm-offline-symbol { color: #117db4; font-size: 4rem; line-height: 1.2; margin-top: 2rem; }
.ztm-offline-card h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); line-height: 1.2; font-weight: 650; margin: 1rem 0; }
.ztm-offline-card button { color: white; background: #096da2; border-color: #096da2; font-weight: 600; }
.ztm-offline-progress { padding-left: 1rem; border-left: 3px solid #bd8623; margin: 1.5rem 0; }
.ztm-offline-note { font-size: .88rem; color: #506678; margin-top: 2rem; }
html[data-offline-theme="dark"] .ztm-offline-page { background: #15222d; color: #e1eaf0; color-scheme: dark; }
html[data-offline-theme="dark"] .ztm-offline-note { color: #b9cbd7; }
html[data-offline-theme="dark"] .ztm-offline-brand { border-color: #425865; }
html[data-bs-theme="dark"] .ztm-offline-banner,
html[data-offline-theme="dark"] .ztm-offline-banner { background: #382e1b; color: #ffdf96; border-color: #bd8623; }
@media (prefers-reduced-motion: no-preference) { .ztm-offline-card { animation: ztm-offline-enter .2s ease-out; } }
@keyframes ztm-offline-enter { from { opacity: .5; transform: translateY(.3rem); } to { opacity: 1; transform: none; } }
