.offline-notice[hidden] { display: none !important; }
.offline-notice { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 20px; background: rgba(2, 15, 29, .82); backdrop-filter: blur(8px); }
.offline-notice__panel { width: min(100%, 640px); border-top: 5px solid #f59e0b; background: #fff; box-shadow: 0 25px 70px rgba(0,0,0,.25); }
.offline-notice__panel > img { display: block; width: 230px; max-width: 80%; height: auto; margin: 18px 28px; }
.offline-notice__body { padding: clamp(28px, 6vw, 52px); background-color: #0b2c4d; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 64px 64px; color: #fff; }
.offline-notice__line { display: block; width: 85px; height: 4px; margin-bottom: 32px; background: #f59e0b; transform: skewX(-28deg); }
.offline-notice__label { margin: 0 0 10px; color: #f59e0b; font-size: 13px; font-weight: 700; letter-spacing: .17em; }
.offline-notice h2 { margin: 0 0 14px; color: #fff; font-size: clamp(36px, 6vw, 54px); line-height: 1.18; }
.offline-notice__body > p:last-of-type { max-width: 460px; margin: 0; color: #d9e4ec; font-size: 20px; line-height: 1.5; }
.offline-notice button { display: inline-flex; align-items: center; gap: 22px; margin-top: 32px; padding: 12px 20px; border: 0; background: #f59e0b; color: #0b2c4d; font: 700 18px Antonio, 'Arial Narrow', Arial, sans-serif; cursor: pointer; }
.offline-notice button:hover { background: #ffb62d; }
.offline-notice button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }