diff --git a/assets/styles/main.css b/assets/styles/main.css
index a313302..3a2c09b 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -531,22 +531,11 @@ body {
 }
 
 /* =========================================================================
-   Degraded mode — old/weak signage players (html.legacy set by the inline gate
-   in index.html). Assume the device can't afford animation; drop it entirely.
-   .anim has a base opacity:0 and only appears via the entrance animation, so the
-   legacy block reveals it (opacity:1), mirroring the reduced-motion resting
-   state; the ambient breathe is then cancelled.
+   Degraded mode — app-specific resting state (the generic html.legacy kill-switch
+   is prepended at build by @screenly-labs/signage-kit). .anim has a base
+   opacity:0 and only appears via the entrance animation, so reveal it here
+   (the kill-switch cancels the animation itself), mirroring reduced-motion.
    ========================================================================= */
 html.legacy .anim {
   opacity: 1;
 }
-html.legacy *,
-html.legacy *::before,
-html.legacy *::after {
-  /* biome-ignore lint/complexity/noImportantStyles: kill-switch must override the entrance/ambient animation rules */
-  animation: none !important;
-  /* biome-ignore lint/complexity/noImportantStyles: kill-switch must override any transition */
-  transition: none !important;
-  /* biome-ignore lint/complexity/noImportantStyles: release GPU layer hints on weak devices */
-  will-change: auto !important;
-}
diff --git a/build.ts b/build.ts
index 4dfe185..7cfe9f6 100644
--- a/build.ts
+++ b/build.ts
@@ -9,20 +9,11 @@
 // project subpath like https://<org>.github.io/world-clock/.
 
 import { cp, mkdir, rm } from 'node:fs/promises'
-import browserslist from 'browserslist'
-import { build as esbuild } from 'esbuild'
-import { browserslistToTargets, transform as lightningcss } from 'lightningcss'
+import { bundleJs, injectGate, processCss } from '@screenly-labs/signage-kit/build'
 import { run as syncFonts } from './sync-fonts.ts'
 
 const DIST = 'dist'
 
-// The `browserslist` field in package.json is the CSS support floor: Lightning
-// CSS down-levels the stylesheet to it. The JS is lowered separately by esbuild to
-// a fixed ES2017 syntax floor (kept at/below the browserslist minimum); esbuild
-// can't read browserslist, so keep the two in sync if you change the floor. See
-// the degraded-mode notes in index.html / main.css.
-const cssTargets = browserslistToTargets(browserslist())
-
 // Vendor the Bun-managed webfonts into ./assets/fonts before copying them on.
 await syncFonts()
 
@@ -30,22 +21,11 @@ await syncFonts()
 await rm(DIST, { recursive: true, force: true })
 await mkdir(`${DIST}/styles`, { recursive: true })
 
-// JS:  esbuild bundles main.ts (inlining clocks.ts + the polyfills shim) into one
-//      minified ES module and lowers modern syntax (?., ??, spread) to the ES2017
-//      floor so old signage players can parse it. Kept as an ES module (the page
-//      still loads it with <script type="module">, supported at the floor); only
-//      the syntax level changes.
-// CSS: Lightning CSS down-levels to the browserslist floor and minifies;
-//      url(../fonts/...) refs are left untouched.
+// JS: kit bundler, format:'esm' so the page keeps loading it with
+// <script type="module">. CSS: kit pipeline with the shared kill-switch prepended
+// (the app's own @supports container-query fallback + .anim reveal stay in the CSS).
 try {
-  await esbuild({
-    entryPoints: ['src/main.ts'],
-    bundle: true,
-    minify: true,
-    format: 'esm',
-    target: ['es2017'],
-    outfile: `${DIST}/main.js`
-  })
+  await bundleJs('src/main.ts', `${DIST}/main.js`, { format: 'esm' })
 } catch (error) {
   console.error('✗ JS build failed')
   console.error(error)
@@ -54,13 +34,11 @@ try {
 console.log(`✓ JS: ${DIST}/main.js`)
 
 try {
-  const { code: cssCode } = lightningcss({
-    filename: 'assets/styles/main.css',
-    code: await Bun.file('assets/styles/main.css').bytes(),
-    minify: true,
-    targets: cssTargets
+  const css = await processCss(await Bun.file('assets/styles/main.css').text(), {
+    includeDegraded: true,
+    filename: 'assets/styles/main.css'
   })
-  await Bun.write(`${DIST}/styles/main.css`, cssCode)
+  await Bun.write(`${DIST}/styles/main.css`, css)
 } catch (error) {
   console.error('✗ CSS build failed')
   console.error(error)
@@ -68,8 +46,16 @@ try {
 }
 console.log(`✓ CSS: ${DIST}/styles/main.css`)
 
-// Copy the HTML shell and the vendored fonts verbatim.
-await Bun.write(`${DIST}/index.html`, Bun.file('index.html'))
+// Copy the HTML shell (with the shared degraded-mode gate injected) and the fonts.
+// injectGate throws if it can't find the stylesheet anchor, so a template change
+// that drops the gate fails the build loudly instead of shipping a gate-less page.
+try {
+  await Bun.write(`${DIST}/index.html`, injectGate(await Bun.file('index.html').text()))
+} catch (error) {
+  console.error('✗ Failed to inject the degraded-mode gate into index.html')
+  console.error(error)
+  process.exit(1)
+}
 console.log(`✓ HTML: ${DIST}/index.html`)
 
 await cp('assets/fonts', `${DIST}/fonts`, { recursive: true })
diff --git a/bun.lock b/bun.lock
index 652e486..78e3041 100644
--- a/bun.lock
+++ b/bun.lock
@@ -7,6 +7,7 @@
       "dependencies": {
         "@fontsource-variable/fraunces": "^5.2.9",
         "@fontsource-variable/hanken-grotesk": "^5.2.8",
+        "@screenly-labs/signage-kit": "github:Screenly-Labs/signage-kit#2026.7.0",
       },
       "devDependencies": {
         "@biomejs/biome": "^2.5.1",
@@ -93,6 +94,8 @@
 
     "@fontsource-variable/hanken-grotesk": ["@fontsource-variable/hanken-grotesk@5.2.8", "", {}, "sha512-K7hu09ZKReBc7EifRLeM4K94NZBrxFEg0nGcISmVwlFQOJo4EmYkLXTWEwr5JcNW4z2hr5zy8vLS2sxC8JDmrQ=="],
 
+    "@screenly-labs/signage-kit": ["@screenly-labs/signage-kit@github:Screenly-Labs/signage-kit#eb470fb", { "peerDependencies": { "@csstools/postcss-cascade-layers": "^6", "browserslist": "^4", "esbuild": "^0.28", "lightningcss": "^1.32", "postcss": "^8" }, "optionalPeers": ["@csstools/postcss-cascade-layers", "postcss"] }, "Screenly-Labs-signage-kit-eb470fb", "sha512-acuAb2R/77crUjgnT9GFVlNdpgUTzvK5OLRRsZsZ30dZcJ7ThH/f8al2janEIJWC1JoyqTiarJ2x1uAH6In86A=="],
+
     "@types/bun": ["@types/bun@1.3.14", "", { "dependencies": { "bun-types": "1.3.14" } }, "sha512-h1hFqFVcvAvD9j9K7ZW7vd82aSA+rTdznZa+5bwvCwqSB1jmmfLcbIWhOLx1/+boy/xmjgCs/OMUL8hRJSmnPw=="],
 
     "@types/node": ["@types/node@26.0.1", "", { "dependencies": { "undici-types": "~8.3.0" } }, "sha512-fc3KiUoBt6kie0N9bIW3E47vZsuaMf0PM2AaUpLCLT0s/LvX1nxAim6Fc049cNxODPpGm6qRAuUOB86SkRuPQw=="],
diff --git a/index.html b/index.html
index ab0a8c8..046e9eb 100644
--- a/index.html
+++ b/index.html
@@ -36,24 +36,8 @@
       type="font/woff2"
       crossorigin
     />
-    <!-- Degraded mode for older/weaker signage players. Runs before the
-         stylesheet so html.legacy is set on the first paint: flags the device as
-         legacy when the browser engine is old (no Element.replaceChildren, a
-         2020-era API) or the hardware looks weak, then the stylesheet drops all
-         animation. classList.add keeps it idempotent. -->
-    <script>
-      (function () {
-        try {
-          var slow =
-            (navigator.deviceMemory && navigator.deviceMemory <= 2) ||
-            (navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 2)
-          var old = !('replaceChildren' in Element.prototype)
-          if (slow || old) document.documentElement.classList.add('legacy')
-        } catch (e) {
-          document.documentElement.classList.add('legacy')
-        }
-      })()
-    </script>
+    <!-- The degraded-mode gate is injected here at build time by
+         @screenly-labs/signage-kit (injectGate), before the stylesheet. -->
     <link rel="stylesheet" href="./styles/main.css" />
     <script type="module" src="./main.js"></script>
   </head>
diff --git a/package.json b/package.json
index 38dbca6..c12dcad 100644
--- a/package.json
+++ b/package.json
@@ -17,15 +17,10 @@
     "serve": "bun run build.ts && bunx serve dist"
   },
   "license": "AGPL-3.0-only",
-  "browserslist": [
-    "chrome >= 87",
-    "firefox >= 78",
-    "safari >= 14.1",
-    "edge >= 87"
-  ],
   "dependencies": {
     "@fontsource-variable/fraunces": "^5.2.9",
-    "@fontsource-variable/hanken-grotesk": "^5.2.8"
+    "@fontsource-variable/hanken-grotesk": "^5.2.8",
+    "@screenly-labs/signage-kit": "github:Screenly-Labs/signage-kit#2026.7.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.1",
diff --git a/src/main.ts b/src/main.ts
index 06f8532..4816ae3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,8 +5,8 @@
 // index.html — no framework, no server.
 
 // Side-effect import: installs the replaceChildren shim for the older-browser
-// degraded mode. Must stay first so the shim is in place before any render.
-import './polyfills'
+// degraded mode (shared across all apps). Must stay first.
+import '@screenly-labs/signage-kit/polyfills'
 import {
   buildFormatters,
   type ClockConfig,
diff --git a/src/polyfills.ts b/src/polyfills.ts
deleted file mode 100644
index 4262c22..0000000
--- a/src/polyfills.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// Minimal runtime shim for the older-browser degraded mode. esbuild lowers modern
-// *syntax* (?., ??, spread) at build time, but it does not add missing runtime
-// APIs. The one DOM gap the apps can hit at the support floor is
-// Element.prototype.replaceChildren (Chrome 86 / Safari 14, 2020); it's included
-// as a defensive shim even in apps that don't call it directly. Everything else
-// the apps use (fetch, Intl, URLSearchParams) predates the floor, so no core-js.
-//
-// Imported only for its side effect (installing the shim) as the first line of
-// main.ts; it exports nothing.
-
-if (typeof Element !== 'undefined' && !Element.prototype.replaceChildren) {
-  Element.prototype.replaceChildren = function replaceChildren(
-    this: Element,
-    ...nodes: (Node | string)[]
-  ): void {
-    // Build the new children in a fragment first so a bad node throws before we
-    // touch the element, keeping the swap effectively atomic like the native API.
-    const frag = document.createDocumentFragment()
-    frag.append(...nodes)
-    while (this.firstChild) this.removeChild(this.firstChild)
-    this.appendChild(frag)
-  }
-}