.offline-notice {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  z-index: 55;
  max-width: min(92vw, 420px);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  color: var(--text-hi);
  font-size: 13.5px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--black) 70%, transparent);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.offline-notice.is-shown { opacity: 1; transform: translate(-50%, 0); }

.offline-page { display: flex; justify-content: center; padding-top: 12vh; }
.offline-card { max-width: 360px; width: 100%; text-align: center; padding: 28px 22px 20px; }
.offline-card h1 { font-size: 26px; margin: 10px 0 8px; }
.offline-card p { margin: 0 0 20px; }
.offline-icon { display: inline-flex; color: var(--purple-glow); }