#offline{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;background:var(--paper,#14120b);color:var(--ink,#f6efd8);text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s}
#offline.on{opacity:1;visibility:visible;pointer-events:auto}
#offline .of-ring{width:56px;height:56px;border-radius:50%;border:5px solid rgba(127,127,127,.25);border-top-color:var(--acc,#ffd83d);animation:ofSpin .8s linear infinite}
#offline b{font-size:16px;font-weight:700}
#offline small{font-size:12.5px;color:var(--mute,rgba(246,239,216,.62))}
@keyframes ofSpin{to{transform:rotate(360deg)}}