/* The browser demo page (app.html). */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #f4f5f7; }
body { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: #1d2330; }
#oxysdb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
          justify-content: center; gap: 12px; text-align: center; padding: 16px; }
#status[hidden] { display: none; }
.badge { display: inline-block; background: #b43c0c; color: #fff; font-weight: 700; font-size: 12px;
         letter-spacing: .06em; padding: 2px 8px; border-radius: 4px; }
.bar { width: min(320px, 80vw); height: 6px; background: #dfe3ea; border-radius: 3px; overflow: hidden; }
.bar[hidden] { display: none; }
.bar > span { display: block; height: 100%; width: 0; background: #2f6fde; transition: width .2s; }
.error { color: #a1260d; max-width: 640px; white-space: pre-wrap; }
a { color: #2f6fde; }