/* iPad web app: progress of the offline copy (added to every page by tools/build-ipad.js) */
.cc-offline { position: fixed; z-index: 90; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 999px; border: 1px solid rgba(243, 239, 232, .16); background: rgba(10, 11, 13, .84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #ece7de; font: 400 11px/1.3 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; transition: opacity .6s, transform .6s; }
.cc-offline.is-out { opacity: 0; transform: translateY(8px); }
.cc-offline i { flex: none; position: relative; width: 48px; height: 2px; overflow: hidden; background: rgba(243, 239, 232, .22); }
.cc-offline i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: #ece7de; transition: width .3s linear; }
.cc-offline i[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cc-offline, .cc-offline i::after { transition: none; } }