index3: wait for the player stylesheet before mounting a demo

asciinema-player reads its palette from the --term-color-* custom
properties once, when the terminal view mounts, and falls back to an
all-black theme (foreground, background and all 16 palette entries)
when they do not resolve.

The lazy loader only waited for the script, so on a cold load the
player could mount before the stylesheet had been applied and render
the recording black on black. Wait for both tags.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: ThomasWaldmann

index3.html

@@ -1634,20 +1634,23 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
     { borg: '2.0', title: 'guided tour', file: '_assets/borg2-demo.cast',  dur: '4 min 2 s',  speed: 1.0 },
   ];
 
-  // the player JS/CSS are heavy, so they only load once the section is near
-  let assets = null;
-  const loadAssets = () => assets ??= new Promise((resolve, reject) => {
-    const css = document.createElement('link');
-    css.rel = 'stylesheet';
-    css.href = '_assets/asciinema-player-v3.15.1.css';
-    document.head.appendChild(css);
-    const js = document.createElement('script');
-    js.src = '_assets/asciinema-player-v3.15.1.min.js';
-    js.onload = resolve;
-    js.onerror = () => reject(new Error('player load failed'));
-    document.head.appendChild(js);
+  // the player JS/CSS are heavy, so they only load once the section is near.
+  // both have to be waited for: the player reads its palette from the
+  // --term-color-* custom properties once, at mount, and falls back to an
+  // all-black theme when the stylesheet has not been applied yet.
+  const loadTag = (tag, attrs) => new Promise((resolve, reject) => {
+    const el = Object.assign(document.createElement(tag), attrs);
+    el.onload = resolve;
+    el.onerror = () => reject(new Error(`${attrs.href || attrs.src} failed to load`));
+    document.head.appendChild(el);
   });
 
+  let assets = null;
+  const loadAssets = () => assets ??= Promise.all([
+    loadTag('link', { rel: 'stylesheet', href: '_assets/asciinema-player-v3.15.1.css' }),
+    loadTag('script', { src: '_assets/asciinema-player-v3.15.1.min.js' }),
+  ]);
+
   let current = -1;
   let player = null;
   const show = (idx) => {