/* ============================================================ bg-trace.css — INVESTIGATION ambient background as PURE CSS. Active when (the default). ?bg=img reverts to the JPEG in assets/. Shift+B toggles live. Investigation only — Chat and Dashboard still use their JPEGs. HOW IT WAS BUILT: the source PNG is decomposed by greedy residual fitting into elliptical radial-gradients. Each new layer is seeded at the current worst-error pixel, its geometry grid-searched, and its alpha profile solved per ring by least squares as proper alpha-over against what is already underneath. Each layer carries a smoothstep tail past its fitted edge so no ellipse boundary shows as a visible arc. Verified by rendering in headless Chrome and diffing vs the source: dark — 5 layers, mean 1.79/255, RMSE 2.34, max 14, 0.46%% of px >8 light — 4 layers, mean 1.15/255, RMSE 1.56, max 14, 0.30%% of px >8 ============================================================ */ /* ---- glow tracking ------------------------------------------------------ The warm glow must stay centred on the three mode buttons, which live in the stage — so its centre has to move when the nav or history panel opens. WARM layers take `+ var(--glow-dx)`; the cool corner bleeds do NOT, because they are viewport framing and sliding them would pull them off their corners. --glow-dx is written by the bgGlow() observer in index.html. --glow-anchor is where the visible glow sits when --glow-dx is 0, measured from the render (dark: luminance peak 48.6%; light: warm-layer centre 51%). JS needs it to convert "button centre" into a delta. ------------------------------------------------------------------------ */ @property --glow-dx { syntax:""; inherits:true; initial-value:0px } html[data-bgmode="css"][data-module="investigation"]{ --glow-anchor:48.6%; --bgfall:#1d1e21; --bg: radial-gradient(ellipse 108.5% 232.5% at 3.2% 98.8%, rgba(25,34,54,1.0000) 0%, rgba(25,34,54,1.0000) 1.34%, rgba(25,34,54,1.0000) 4.03%, rgba(25,34,54,0.9322) 6.72%, rgba(25,34,54,0.8178) 9.41%, rgba(25,34,54,0.7079) 12.10%, rgba(25,34,54,0.6116) 14.78%, rgba(25,34,54,0.5233) 17.47%, rgba(25,34,54,0.4525) 20.16%, rgba(25,34,54,0.3980) 22.85%, rgba(25,34,54,0.3480) 25.54%, rgba(25,34,54,0.3105) 28.23%, rgba(25,34,54,0.2830) 30.91%, rgba(25,34,54,0.2585) 33.60%, rgba(25,34,54,0.2340) 36.29%, rgba(25,34,54,0.2043) 38.98%, rgba(25,34,54,0.1691) 41.67%, rgba(25,34,54,0.1116) 44.35%, rgba(25,34,54,0.0657) 47.04%, rgba(25,34,54,0.0434) 49.73%, rgba(25,34,54,0.0434) 52.42%, rgba(25,34,54,0.0347) 55.11%, rgba(25,34,54,0.0191) 57.80%, rgba(25,34,54,0.0182) 60.48%, rgba(25,34,54,0.0182) 63.17%, rgba(25,34,54,0.0174) 68.95%, rgba(25,34,54,0.0154) 73.39%, rgba(25,34,54,0.0124) 77.82%, rgba(25,34,54,0.0091) 82.26%, rgba(25,34,54,0.0058) 86.69%, rgba(25,34,54,0.0028) 91.13%, rgba(25,34,54,0.0008) 95.56%, rgba(25,34,54,0.0000) 100.00%), radial-gradient(ellipse 38.8% 38.8% at calc(46.2% + var(--glow-dx,0px)) 0.4%, rgba(140,89,55,1.0000) 0%, rgba(140,89,55,1.0000) 1.34%, rgba(140,89,55,1.0000) 4.03%, rgba(140,89,55,0.9616) 6.72%, rgba(140,89,55,0.8271) 9.41%, rgba(140,89,55,0.7253) 12.10%, rgba(140,89,55,0.6335) 14.78%, rgba(140,89,55,0.5256) 17.47%, rgba(140,89,55,0.4078) 20.16%, rgba(140,89,55,0.2800) 22.85%, rgba(140,89,55,0.2215) 25.54%, rgba(140,89,55,0.1200) 28.23%, rgba(140,89,55,0.0507) 30.91%, rgba(140,89,55,0.0014) 33.60%, rgba(140,89,55,0.0000) 36.29%, rgba(140,89,55,0.0000) 38.98%, rgba(140,89,55,0.0000) 41.67%, rgba(140,89,55,0.0000) 44.35%, rgba(140,89,55,0.0000) 47.04%, rgba(140,89,55,0.0000) 49.73%, rgba(140,89,55,0.0000) 52.42%, rgba(140,89,55,0.0000) 55.11%, rgba(140,89,55,0.0000) 57.80%, rgba(140,89,55,0.0000) 60.48%, rgba(140,89,55,0.0000) 63.17%, rgba(140,89,55,0.0000) 68.95%, rgba(140,89,55,0.0000) 73.39%, rgba(140,89,55,0.0000) 77.82%, rgba(140,89,55,0.0000) 82.26%, rgba(140,89,55,0.0000) 86.69%, rgba(140,89,55,0.0000) 91.13%, rgba(140,89,55,0.0000) 95.56%, rgba(140,89,55,0.0000) 100.00%), radial-gradient(ellipse 38.8% 108.5% at calc(58.2% + var(--glow-dx,0px)) -8.6%, rgba(116,82,60,0.9616) 0%, rgba(116,82,60,0.9616) 1.34%, rgba(116,82,60,0.9616) 4.03%, rgba(116,82,60,0.9616) 6.72%, rgba(116,82,60,0.9616) 9.41%, rgba(116,82,60,0.8696) 12.10%, rgba(116,82,60,0.8038) 14.78%, rgba(116,82,60,0.7038) 17.47%, rgba(116,82,60,0.5972) 20.16%, rgba(116,82,60,0.4923) 22.85%, rgba(116,82,60,0.4075) 25.54%, rgba(116,82,60,0.3436) 28.23%, rgba(116,82,60,0.2865) 30.91%, rgba(116,82,60,0.2342) 33.60%, rgba(116,82,60,0.1823) 36.29%, rgba(116,82,60,0.1371) 38.98%, rgba(116,82,60,0.1097) 41.67%, rgba(116,82,60,0.0745) 44.35%, rgba(116,82,60,0.0557) 47.04%, rgba(116,82,60,0.0268) 49.73%, rgba(116,82,60,0.0172) 52.42%, rgba(116,82,60,0.0057) 55.11%, rgba(116,82,60,0.0000) 57.80%, rgba(116,82,60,0.0000) 60.48%, rgba(116,82,60,0.0000) 63.17%, rgba(116,82,60,0.0000) 68.95%, rgba(116,82,60,0.0000) 73.39%, rgba(116,82,60,0.0000) 77.82%, rgba(116,82,60,0.0000) 82.26%, rgba(116,82,60,0.0000) 86.69%, rgba(116,82,60,0.0000) 91.13%, rgba(116,82,60,0.0000) 95.56%, rgba(116,82,60,0.0000) 100.00%), radial-gradient(ellipse 62.0% 232.5% at 81.2% -17.6%, rgba(51,51,70,0.9242) 0%, rgba(51,51,70,0.9242) 1.34%, rgba(51,51,70,0.9242) 4.03%, rgba(51,51,70,0.9242) 6.72%, rgba(51,51,70,0.9242) 9.41%, rgba(51,51,70,0.7861) 12.10%, rgba(51,51,70,0.6428) 14.78%, rgba(51,51,70,0.5188) 17.47%, rgba(51,51,70,0.4326) 20.16%, rgba(51,51,70,0.3613) 22.85%, rgba(51,51,70,0.3036) 25.54%, rgba(51,51,70,0.2550) 28.23%, rgba(51,51,70,0.2143) 30.91%, rgba(51,51,70,0.1898) 33.60%, rgba(51,51,70,0.1783) 36.29%, rgba(51,51,70,0.1597) 38.98%, rgba(51,51,70,0.1439) 41.67%, rgba(51,51,70,0.1226) 44.35%, rgba(51,51,70,0.1020) 47.04%, rgba(51,51,70,0.0909) 49.73%, rgba(51,51,70,0.0909) 52.42%, rgba(51,51,70,0.0909) 55.11%, rgba(51,51,70,0.0909) 57.80%, rgba(51,51,70,0.0909) 60.48%, rgba(51,51,70,0.0909) 63.17%, rgba(51,51,70,0.0870) 68.95%, rgba(51,51,70,0.0767) 73.39%, rgba(51,51,70,0.0622) 77.82%, rgba(51,51,70,0.0455) 82.26%, rgba(51,51,70,0.0288) 86.69%, rgba(51,51,70,0.0142) 91.13%, rgba(51,51,70,0.0039) 95.56%, rgba(51,51,70,0.0000) 100.00%), radial-gradient(ellipse 108.5% 178.2% at calc(46.2% + var(--glow-dx,0px)) 0.4%, rgba(124,81,53,1.0000) 0%, rgba(124,81,53,1.0000) 1.34%, rgba(124,81,53,1.0000) 4.03%, rgba(124,81,53,0.9698) 6.72%, rgba(124,81,53,0.8531) 9.41%, rgba(124,81,53,0.7337) 12.10%, rgba(124,81,53,0.6296) 14.78%, rgba(124,81,53,0.5297) 17.47%, rgba(124,81,53,0.4458) 20.16%, rgba(124,81,53,0.3745) 22.85%, rgba(124,81,53,0.3145) 25.54%, rgba(124,81,53,0.2647) 28.23%, rgba(124,81,53,0.2219) 30.91%, rgba(124,81,53,0.1839) 33.60%, rgba(124,81,53,0.1523) 36.29%, rgba(124,81,53,0.1248) 38.98%, rgba(124,81,53,0.1009) 41.67%, rgba(124,81,53,0.0878) 44.35%, rgba(124,81,53,0.0727) 47.04%, rgba(124,81,53,0.0577) 49.73%, rgba(124,81,53,0.0477) 52.42%, rgba(124,81,53,0.0400) 55.11%, rgba(124,81,53,0.0298) 57.80%, rgba(124,81,53,0.0208) 60.48%, rgba(124,81,53,0.0133) 63.17%, rgba(124,81,53,0.0128) 68.95%, rgba(124,81,53,0.0113) 73.39%, rgba(124,81,53,0.0091) 77.82%, rgba(124,81,53,0.0067) 82.26%, rgba(124,81,53,0.0042) 86.69%, rgba(124,81,53,0.0021) 91.13%, rgba(124,81,53,0.0006) 95.56%, rgba(124,81,53,0.0000) 100.00%); } html[data-bgmode="css"][data-theme="light"][data-module="investigation"]{ --glow-anchor:51%; --bgfall:#fedbc8; --bg: radial-gradient(ellipse 108.5% 178.2% at 108.2% 18.4%, rgba(246,243,242,1.0000) 0%, rgba(246,243,242,1.0000) 1.34%, rgba(246,243,242,1.0000) 4.03%, rgba(246,243,242,1.0000) 6.72%, rgba(246,243,242,0.9797) 9.41%, rgba(246,243,242,0.9468) 12.10%, rgba(246,243,242,0.8990) 14.78%, rgba(246,243,242,0.8260) 17.47%, rgba(246,243,242,0.7310) 20.16%, rgba(246,243,242,0.6407) 22.85%, rgba(246,243,242,0.5110) 25.54%, rgba(246,243,242,0.3753) 28.23%, rgba(246,243,242,0.2365) 30.91%, rgba(246,243,242,0.1491) 33.60%, rgba(246,243,242,0.0873) 36.29%, rgba(246,243,242,0.0482) 38.98%, rgba(246,243,242,0.0482) 41.67%, rgba(246,243,242,0.0482) 44.35%, rgba(246,243,242,0.0482) 47.04%, rgba(246,243,242,0.0482) 49.73%, rgba(246,243,242,0.0482) 52.42%, rgba(246,243,242,0.0317) 55.11%, rgba(246,243,242,0.0000) 57.80%, rgba(246,243,242,0.0000) 60.48%, rgba(246,243,242,0.0000) 63.17%, rgba(246,243,242,0.0000) 68.95%, rgba(246,243,242,0.0000) 73.39%, rgba(246,243,242,0.0000) 77.82%, rgba(246,243,242,0.0000) 82.26%, rgba(246,243,242,0.0000) 86.69%, rgba(246,243,242,0.0000) 91.13%, rgba(246,243,242,0.0000) 95.56%, rgba(246,243,242,0.0000) 100.00%), radial-gradient(ellipse 108.5% 232.5% at -8.8% 18.4%, rgba(246,242,242,0.9832) 0%, rgba(246,242,242,0.9832) 1.34%, rgba(246,242,242,0.9832) 4.03%, rgba(246,242,242,0.9832) 6.72%, rgba(246,242,242,0.9832) 9.41%, rgba(246,242,242,0.9489) 12.10%, rgba(246,242,242,0.9096) 14.78%, rgba(246,242,242,0.8380) 17.47%, rgba(246,242,242,0.7379) 20.16%, rgba(246,242,242,0.6180) 22.85%, rgba(246,242,242,0.4518) 25.54%, rgba(246,242,242,0.2612) 28.23%, rgba(246,242,242,0.0783) 30.91%, rgba(246,242,242,0.0000) 33.60%, rgba(246,242,242,0.0000) 36.29%, rgba(246,242,242,0.0000) 38.98%, rgba(246,242,242,0.0000) 41.67%, rgba(246,242,242,0.0000) 44.35%, rgba(246,242,242,0.0000) 47.04%, rgba(246,242,242,0.0000) 49.73%, rgba(246,242,242,0.0000) 52.42%, rgba(246,242,242,0.0000) 55.11%, rgba(246,242,242,0.0000) 57.80%, rgba(246,242,242,0.0000) 60.48%, rgba(246,242,242,0.0000) 63.17%, rgba(246,242,242,0.0000) 68.95%, rgba(246,242,242,0.0000) 73.39%, rgba(246,242,242,0.0000) 77.82%, rgba(246,242,242,0.0000) 82.26%, rgba(246,242,242,0.0000) 86.69%, rgba(246,242,242,0.0000) 91.13%, rgba(246,242,242,0.0000) 95.56%, rgba(246,242,242,0.0000) 100.00%), radial-gradient(ellipse 85.3% 232.5% at calc(51.2% + var(--glow-dx,0px)) -16.8%, rgba(254,215,192,1.0000) 0%, rgba(254,215,192,1.0000) 1.34%, rgba(254,215,192,1.0000) 4.03%, rgba(254,215,192,1.0000) 6.72%, rgba(254,215,192,0.9443) 9.41%, rgba(254,215,192,0.7903) 12.10%, rgba(254,215,192,0.6266) 14.78%, rgba(254,215,192,0.4940) 17.47%, rgba(254,215,192,0.3853) 20.16%, rgba(254,215,192,0.2943) 22.85%, rgba(254,215,192,0.2124) 25.54%, rgba(254,215,192,0.1409) 28.23%, rgba(254,215,192,0.0842) 30.91%, rgba(254,215,192,0.0429) 33.60%, rgba(254,215,192,0.0099) 36.29%, rgba(254,215,192,0.0000) 38.98%, rgba(254,215,192,0.0000) 41.67%, rgba(254,215,192,0.0000) 44.35%, rgba(254,215,192,0.0000) 47.04%, rgba(254,215,192,0.0000) 49.73%, rgba(254,215,192,0.0000) 52.42%, rgba(254,215,192,0.0000) 55.11%, rgba(254,215,192,0.0000) 57.80%, rgba(254,215,192,0.0000) 60.48%, rgba(254,215,192,0.0000) 63.17%, rgba(254,215,192,0.0000) 68.95%, rgba(254,215,192,0.0000) 73.39%, rgba(254,215,192,0.0000) 77.82%, rgba(254,215,192,0.0000) 82.26%, rgba(254,215,192,0.0000) 86.69%, rgba(254,215,192,0.0000) 91.13%, rgba(254,215,192,0.0000) 95.56%, rgba(254,215,192,0.0000) 100.00%), radial-gradient(ellipse 232.5% 108.5% at 67.8% 79.3%, rgba(245,243,243,1.0000) 0%, rgba(245,243,243,1.0000) 1.34%, rgba(245,243,243,1.0000) 4.03%, rgba(245,243,243,1.0000) 6.72%, rgba(245,243,243,1.0000) 9.41%, rgba(245,243,243,0.9974) 12.10%, rgba(245,243,243,0.9881) 14.78%, rgba(245,243,243,0.9769) 17.47%, rgba(245,243,243,0.9592) 20.16%, rgba(245,243,243,0.9293) 22.85%, rgba(245,243,243,0.9004) 25.54%, rgba(245,243,243,0.8719) 28.23%, rgba(245,243,243,0.8557) 30.91%, rgba(245,243,243,0.8531) 33.60%, rgba(245,243,243,0.8397) 36.29%, rgba(245,243,243,0.8143) 38.98%, rgba(245,243,243,0.7844) 41.67%, rgba(245,243,243,0.7523) 44.35%, rgba(245,243,243,0.7175) 47.04%, rgba(245,243,243,0.6868) 49.73%, rgba(245,243,243,0.6474) 52.42%, rgba(245,243,243,0.6110) 55.11%, rgba(245,243,243,0.5731) 57.80%, rgba(245,243,243,0.5379) 60.48%, rgba(245,243,243,0.4947) 63.17%, rgba(245,243,243,0.4735) 68.95%, rgba(245,243,243,0.4174) 73.39%, rgba(245,243,243,0.3382) 77.82%, rgba(245,243,243,0.2474) 82.26%, rgba(245,243,243,0.1565) 86.69%, rgba(245,243,243,0.0773) 91.13%, rgba(245,243,243,0.0213) 95.56%, rgba(245,243,243,0.0000) 100.00%); } /* ------------------------------------------------------------ GRAIN — only when the CSS background is active. TWO-FREQUENCY. The JPEGs carry baked-in grain so molecules.css keeps its synthetic grain low (.1/.05) to avoid doubling up. The CSS gradient has none, so this carries it all. The source grain is BIMODAL — coarse mottle AND fine speckle. Measured as a share of grain energy by feature size: >66px 33-66 17-33 8-16 4-8 2-4 source 4.7% 19.3% 34.0% 18.7% 11.3% 17.6% old 1-freq 11.2% 5.8% 11.5% 13.8% 29.1% 41.4% <- all speckle this 7.1% 18.4% 35.4% 13.7% 13.3% 17.5% A single feTurbulence CANNOT do this: fractalNoise octave power falls as 1/4^i, so the base frequency dominates and extra octaves add almost no fine energy (best single-frequency fit still left 2-8px at 2.4% against the source's 29%). Hence two turbulence rects in one SVG - coarse bf .035 (~28px clumps) with a fine bf .4 (~2.5px speckle) rect over it at opacity .60. Spectral distance to source: 0.117, vs 0.608 for the best single-frequency version. TILE SCALE still matters: the SVG is 1:1 with background-size 330px, so baseFrequency reads directly in px. Do not shrink the tile without raising both frequencies - at ~1px the noise hits Nyquist, Chrome renders it as an alternating per-pixel checkerboard, and the eye averages it back to flat grey (invisible at ANY opacity - that was the original bug). AMOUNT: opacity .23. Two windows disagree - a wide crop with a 16px detrend says .17 matches (SD 1.36 vs source 1.34), a narrow strip with a 12px detrend says it is light, because a 12px detrend erases the 28px clumps it is meant to measure. Settled visually against the source at 1:1; .30 was too heavy. Light stays faint on purpose: mix-blend-mode:overlay barely modulates a near-white base, AND the light source is itself nearly grain-free (SD 0.353 vs 1.337). Forcing it would be less faithful. To make it visible, light would need soft-light/multiply - overlay cannot deliver it. ------------------------------------------------------------ */ html[data-bgmode="css"][data-module="investigation"]{ --grain:url("data:image/svg+xml,"); } html[data-bgmode="css"][data-module="investigation"] .screen::before{ background-size:330px 330px; opacity:.23; } html[data-bgmode="css"][data-theme="light"][data-module="investigation"] .screen::before{ opacity:.10; }