diff --git a/docs/10-spa-runtime-shim.md b/docs/10-spa-runtime-shim.md
index d2be58d..03bcfa0 100644
--- a/docs/10-spa-runtime-shim.md
+++ b/docs/10-spa-runtime-shim.md
@@ -131,7 +131,69 @@ private invite-only service.
   more code, add it to the IIFE in `bin/inject-shim.py` and re-run.
 - **First-paint flash.** Because the SPA still loads its own bundle, you may
   briefly see "Jellyfin" in the tab title before the observer kicks in. Sub-100ms
-  on a fast connection - acceptable.
+  on a fast connection - acceptable. For the colour flash (dark blue / grey
+  before Cineplex CSS arrives), see "Pre-bundle critical-path styles" below.
+
+---
+
+## Pre-bundle critical-path styles
+
+A second inline block — a `<style>` tag — sits immediately AFTER `<head>` and
+BEFORE the shim `<script>`. It exists to kill the ~500ms-1s flash of Jellyfin
+default chrome (dark blue + grey + MUI blue submit button) that was visible on
+first paint at `https://arrflix.s8n.ru` before the Cineplex `@import` from
+`/Branding/Configuration` (CustomCss) finished arriving.
+
+### Why CustomCss alone is too slow
+
+CustomCss is fetched via the SPA bundle's call to `/Branding/Configuration` —
+i.e. AFTER the JS bundle parses, executes, and hydrates. So the network
+sequence is:
+
+1. HTML parses → first paint uses Jellyfin built-in CSS (dark blue / grey).
+2. JS bundle downloads, parses, executes.
+3. Bundle calls `/Branding/Configuration`, gets `CustomCss` body.
+4. `CustomCss` does `@import url("...jsdelivr.net/...cineplex.css")`.
+5. jsDelivr round-trip → Cineplex CSS arrives → re-paint to ARRFLIX brand.
+
+Steps 1-4 are dead time. The inline `<style>` runs at step 1 and pre-paints the
+black background + Netflix-red submit button so the gap is invisible.
+
+### What's in the block
+
+Lives between `<head>` and the `<script>` shim. Contents:
+
+- `:root` overrides for `--primary-background-color` / `--background-color`
+  to `#000000`.
+- `html, body, .preload, .skinBody, .skinHeader, #reactRoot, .mainAnimatedPages`
+  forced to black bg / white text.
+- `.raised, .button-submit, .emby-button[type=submit], button[type=submit]`
+  forced to Netflix red `#E50914` so the login submit button doesn't flash MUI
+  blue before the bundle skins it.
+
+It is INTENTIONALLY tiny. It only handles the "kill the wrong colours"
+critical-path goal. All real branding (logos, fonts, posters, header layout,
+hover states, etc.) still comes from Cineplex + ARRFLIX CustomCss as before.
+
+### Maintenance warning on Jellyfin upgrade
+
+This block targets specific Jellyfin class names. If a future Jellyfin web
+release renames `.skinBody`, `.skinHeader`, `.preload`, `#reactRoot`,
+`.mainAnimatedPages`, `.emby-button`, or the `--primary-background-color`
+CSS variable, the pre-bundle paint will regress to defaults until the
+selectors here are updated.
+
+After every `jellyfin/jellyfin` image bump:
+
+1. Open `https://arrflix.s8n.ru` in incognito with throttled 3G in DevTools.
+2. Confirm the page goes from blank → black (not blue/grey).
+3. Confirm the login submit button is red (not blue) before bundle finishes.
+4. If either regresses, inspect the new bundle's body class names and update
+   `web-overrides/index.html` selectors accordingly.
+
+The block does NOT live in `bin/inject-shim.py` — it's a static `<style>`,
+not a script. Edit `web-overrides/index.html` directly and redeploy via the
+`scp` step in "Deploying changes" above.
 
 ---
 
diff --git a/web-overrides/index.html b/web-overrides/index.html
index 2377ce0..4df0aec 100644
--- a/web-overrides/index.html
+++ b/web-overrides/index.html
@@ -1,4 +1,19 @@
-<!doctype html><html class="preload" dir="ltr"><head><script>/* ARRFLIX-SHIM-BEGIN */
+<!doctype html><html class="preload" dir="ltr"><head><style>/* ARRFLIX critical-path styles — render first to avoid pre-bundle flash */
+:root {
+  --primary-background-color: #000000;
+  --background-color: #000000;
+}
+html, body, .preload, .skinBody, .skinHeader, #reactRoot, .mainAnimatedPages {
+  background-color: #000000 !important;
+  color: #ffffff !important;
+}
+/* Login form's pre-bundle layout uses MUI default blue button — pre-paint Netflix red */
+.raised, .button-submit, .emby-button[type=submit], button[type=submit] {
+  background-color: #E50914 !important;
+  color: #ffffff !important;
+}
+/* Hide pre-bundle Jellyfin logo + replace with .splashLogo (already swapped to ARRFLIX in this index.html) */
+</style><script>/* ARRFLIX-SHIM-BEGIN */
 (function(){
   var TITLE = 'ARRFLIX';
   var BARE_RE = /^Jellyfin$/i;
