/* Modern browser View Transitions API — same-origin navigations get a smooth automatic cross-fade transition instead of the browser's default white-flash unload. Chrome 126+, Edge 126+. Older browsers ignore this rule (graceful degradation). Combined with the inline script that pre-sets [data-theme] from localStorage, this eliminates both theme flash AND navigation flash. */ @view-transition { navigation: auto; } /* Root background. The inline script sets [data-theme] BEFORE first paint so the right background applies immediately — no flash. prefers-color-scheme fallback for first-ever visit with empty localStorage. */ html, body { margin: 0; padding: 0; background: #0A0A0A; } @media (prefers-color-scheme: light) { html, body { background: #f7f4ef; } } html[data-theme="light"], html[data-theme="light"] body, body[data-theme="light"], [data-theme="light"] html, [data-theme="light"] body { background: #f7f4ef; } html[data-theme="dark"], html[data-theme="dark"] body, body[data-theme="dark"], [data-theme="dark"] html, [data-theme="dark"] body { background: #0A0A0A; } /* BaZi cosmological-wheel backdrop — port of the SPA's `.mf-info-metaphysics-bg` rule from WhatIsMonthlyForecastPage.tsx (lines 30-31). Fixed-centered SVG at 12% opacity in dark mode; in light mode, opacity 0.2 plus sepia/saturation filter so the gold becomes a warm copper tone on the cream background. Scoped to `.seo-metaphysics-bg` — does not affect any SPA page. */ .seo-metaphysics-bg { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80vmin; height: 80vmin; max-width: 900px; max-height: 900px; opacity: 0.12; pointer-events: none; z-index: 0; } .seo-metaphysics-bg img { width: 100%; height: 100%; display: block; } [data-theme="light"] .seo-metaphysics-bg { opacity: 0.2; filter: invert(0.5) sepia(0.3) saturate(2) hue-rotate(5deg); } /* Article-typography only. The SPA chrome CSS (header/footer/nav) ships inside SeoLayout's inline