.offline-slot{top:calc(var(--sat) + var(--header-h) + var(--s-2));left:var(--edge-l,var(--gutter));right:var(--edge-r,var(--gutter));z-index:34;pointer-events:none;justify-content:center;display:flex;position:fixed}.offline-banner{box-sizing:border-box;align-items:center;gap:var(--s-2);max-width:100%;min-height:var(--tap);padding:var(--s-2) var(--s-4);border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-ink);box-shadow:var(--shadow-2), var(--rim);font-family:var(--font-body);font-size:var(--fs-sm);line-height:var(--lh-snug);text-align:center;text-wrap:balance;pointer-events:auto;margin:0;animation:.35s cubic-bezier(.2,.8,.2,1) both offline-in;display:inline-flex}.offline-banner svg{color:var(--c-accent);flex:none}body:has(.offline-banner) :is(.love-main,.keepsake-main):before{content:"";height:calc(var(--tap) + var(--s-3));display:block}@media (max-width:359px){.offline-banner{gap:var(--s-1);padding-inline:var(--s-3);font-size:var(--fs-xs)}}@keyframes offline-in{0%{opacity:0;translate:0 calc(var(--s-2) * -1)}}@media (prefers-reduced-motion:reduce){.offline-banner{animation:none}}@media (forced-colors:active){.offline-banner{background:canvas;border:1px solid canvastext}}img.photo-missing{object-fit:cover;cursor:pointer;outline-offset:-8px;outline:2px solid #e7a9c6}html[data-theme=night] img.photo-missing{filter:brightness(.6)saturate(.9)}