:root { color-scheme: dark; }
* { box-sizing: border-box; font-family: -apple-system, system-ui, Segoe UI, Roboto, Arial; }

body {
  margin: 0;
  background: #0b0b0b;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.wrap { width: min(520px, 100%); }

.card {
  background: #141414;
  border: 1px solid #222;
  border-radius: 18px;
  padding: 26px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

.logo {
  width: 140px;
  height: 140px;
  border-radius: 22px;
  object-fit: cover;
  border: 1px solid #2a2a2a;
}

h1 { margin: 16px 0 6px; font-size: 28px; }
.status { margin: 0 0 18px; opacity: .8; }

.btn {
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 700;
  background: #ffffff;
  color: #0b0b0b;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn:active { transform: scale(.99); }
.hint { margin: 18px 0 0; font-size: 14px; opacity: .75; }
Will
const CACHE = "wxan-pwa-v1";
const ASSETS = [
  "/",
  "/index.html",
  "/styles.css",
  "/app.js",
  "/manifest.webmanifest",
  "/icons/icon-192.png",
  "/icons/icon-512.png",
  "/icons/apple-touch-icon.png"
];

self.addEventListener("install", (e) => {
  e.waitUntil(caches.open(CACHE).then((c) => c.addAll(ASSETS)));
  self.skipWaiting();
});

self.addEventListener("activate", (e) => {
  e.waitUntil(self.clients.claim());
});

// Cache the app shell; DO NOT try to cache the live audio stream
self.addEventListener("fetch", (e) => {
  const url = new URL(e.request.url);

  // Leave streaming requests alone
  if (url.hostname.includes("securenetsystems.net")) return;

  e.respondWith(
    caches.match(e.request).then((cached) => cached || fetch(e.request))
  );
});