@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:wght@700&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; } /* Anti-FOUC: hide the page until the i18n JS swaps the English markup for the chosen language, then reveal. This CSS lives in , so the body is hidden BEFORE the first paint — no flash of English. JS adds .i18n-ready the moment labels are applied (instant on repeat visits via the label cache). The CSS-only animation is a safety net: it force-reveals after 0.6s so any page lacking the i18n bootstrap (e.g. internal admin pages) can never stay blank. */ body { visibility: hidden; animation: i18nReveal 0s linear .6s forwards; } html.i18n-ready body { visibility: visible; animation: none; } @keyframes i18nReveal { to { visibility: visible; } } /* While the body is hidden by the gate, the page background lives on , so paint the same base tone on — the brief blank shows the app's light background instead of stark white. */ html { background: var(--bg, #f7f5fa); } /* Kill stray horizontal scroll from absolutely-positioned badges / wide media. `clip` (not `hidden`) does NOT create a scroll container, so the sticky topbar keeps working. */ html, body { overflow-x: clip; max-width: 100%; } :root { --pink: #fb6f92; --pink-dark: #f25179; --purple: #c490e4; --green: #2ecc71; --red: #e74c3c; --bg: #f7f5fa; --card: #ffffff; --text: #2a2a2a; --muted: #888; --border: #e8e4ef; --shadow: 0 4px 16px rgba(0,0,0,.08); --radius: 14px; } /* Dark mode — opt-in via (set by api.js from the user's saved choice). Only the surface colours flip; the pink/purple brand accents stay so the app still feels like itself. */ html[data-theme="dark"] { --bg: #15131a; --card: #211d2b; --text: #ece9f1; --muted: #9a93a8; --border: #332d40; --shadow: 0 4px 16px rgba(0,0,0,.45); --pink: #ff8fab; } body { font-family: 'DM Sans', -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; } /* ---------- AUDIO ELEMENTS ---------- Native