/* ========================================================================== nanocosmos Product Theme ========================================================================== A dark, technical UI theme extracted from player-diagnostics.html (nanoStudio Player Diagnostics). Reusable for future diagnostics / dev-tool style pages: dark neutral panels, orange for primary/committing actions, blue for secondary actions and status, flat (no drop-shadow) surfaces, pill-shaped buttons and badges. USAGE -------------------------------------------------------------------------- 1. Load fonts in before this stylesheet: 2. Fonts: - Lexend Deca (700 Bold) — page/panel titles, buttons. - Lexend Deca (400 Regular) — header eyebrow labels only. - Source Sans Pro (400 Regular) — all other body text (labels, helper text, values, status text). This is the default body font. - Roboto Mono (400 Regular) — monospace content only (event log, raw JSON payload dumps). 3. Components documented section by section below. Each section can be lifted independently — they only depend on the :root tokens. 3a. Permission / consent gate (.engage-*, near the bottom, before the footer section): optional — only include it if the page gates a sensitive browser permission request (camera, mic, location, etc.) behind an explicit user action. Skip it entirely otherwise. 3b. Header product identity: use the product line's canonical logo image (.logo-lockup) — never spell the product name out as plain eyebrow text (e.g. don't type "nanoStream"). See the comment above .logo-lockup for the canonical asset URL per product line. 4. This copy is synced from the canonical nanocosmos-brand-guidelines skill's product-theme.css. Linked directly by instanttest.html in this repo — page-specific extensions (badges, journey cards, chart panels, error overlay, etc.) live in a page-scoped