fix(ui): themeable .kino root backdrop (--kino-bg)

.changeset/themeable-root-bg.md

@@ -0,0 +1,8 @@
+---
+"@karnstack/kino": patch
+---
+
+The `.kino` root backdrop is now a `--kino-bg` token (default `black`), so a
+host embedding the player over a light page can theme it (e.g. `--kino-bg:
+transparent`) instead of flashing black before the media paints. Default is
+unchanged, so existing players stay black.

README.md

@@ -298,6 +298,7 @@ For deeper control, every visual is driven by CSS custom properties on the `.kin
 | Custom property         | Default                                       | Role                                          |
 | ----------------------- | --------------------------------------------- | --------------------------------------------- |
 | `--kino-accent`         | `oklch(50.8% 0.118 165.612)`                  | Accent color (progress, active items, ranges) |
+| `--kino-bg`             | `black`                                       | Root backdrop behind the media/stage          |
 | `--kino-radius`         | `12px`                                        | Corner radius of glass surfaces               |
 | `--kino-surface`        | `color-mix(in oklab, black 55%, transparent)` | Glass surface fill                            |
 | `--kino-surface-strong` | `color-mix(in oklab, black 70%, transparent)` | Stronger surface (idle play button)           |

src/styles/kino.css

@@ -1,6 +1,9 @@
 .kino {
   /* theme tokens (overridable via inline style or a theme prop) */
   --kino-accent: oklch(50.8% 0.118 165.612);
+  /* Root backdrop behind the media/stage. Black suits real video; a scenes
+     host over a light page can override it (e.g. --kino-bg: transparent). */
+  --kino-bg: black;
   --kino-radius: 12px;
   --kino-surface: color-mix(in oklab, black 55%, transparent);
   --kino-surface-strong: color-mix(in oklab, black 70%, transparent);
@@ -19,7 +22,7 @@
   height: 100%;
   color: var(--kino-text);
   font-family: ui-sans-serif, system-ui, sans-serif;
-  background: black;
+  background: var(--kino-bg);
   overflow: hidden;
   /* container queries so captions/flash scale with the player, not the page */
   container-type: inline-size;