/** * Kepler Works "deep space" backdrop — sparse starfield + subtle depth. * Inspired by the Diagram premium dark aesthetic (see diagram-figma on Webflow). * Apply: */ body.keplerworks-deep-space { /* Void: near-black, slightly cool (prints still use foreground content). */ --keplerworks-void: #050508; position: relative; overflow-x: hidden; } /* Pages that don't already set a dark base (e.g. checkout) */ html[data-theme="dark"] body.keplerworks-deep-space:not(.diagram-phase1):not(.diagram-phase2) { background-color: var(--keplerworks-void); color: #e8ecf4; } html[data-theme="light"] body.keplerworks-deep-space { background-color: var(--chalk, #f6f4f0); color: var(--ink, #000000); } html[data-theme="light"] body.keplerworks-deep-space:not(.diagram-phase1):not(.diagram-phase2) { background-color: var(--chalk, #f6f4f0); color: var(--ink, #000000); } body.keplerworks-deep-space::before, body.keplerworks-deep-space::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; } html[data-theme="light"] body.keplerworks-deep-space::after { display: block; transform: none; background: radial-gradient(1px 1px at 6% 14%, rgba(0, 0, 0, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 19% 28%, rgba(0, 0, 0, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 31% 8%, rgba(0, 0, 0, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 44% 24%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 57% 12%, rgba(0, 0, 0, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 69% 36%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 81% 16%, rgba(0, 0, 0, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 93% 30%, rgba(0, 0, 0, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 11% 52%, rgba(0, 0, 0, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 26% 68%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 39% 44%, rgba(0, 0, 0, 0.2) 50%, transparent 52%), radial-gradient(1px 1px at 53% 58%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 66% 48%, rgba(0, 0, 0, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 79% 64%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 91% 52%, rgba(0, 0, 0, 0.2) 50%, transparent 52%), radial-gradient(2px 2px at 24% 18%, rgba(0, 0, 0, 0.42) 50%, transparent 55%), radial-gradient(2px 2px at 62% 26%, rgba(0, 0, 0, 0.38) 50%, transparent 55%), radial-gradient(2px 2px at 86% 40%, rgba(0, 0, 0, 0.36) 50%, transparent 55%), /* Secondary scatter — light theme density boost */ radial-gradient(1px 1px at 3% 18%, rgba(0, 0, 0, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 8% 42%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 13% 62%, rgba(0, 0, 0, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 17% 34%, rgba(0, 0, 0, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 22% 8%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 25% 46%, rgba(0, 0, 0, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 29% 72%, rgba(0, 0, 0, 0.2) 50%, transparent 52%), radial-gradient(1px 1px at 35% 14%, rgba(0, 0, 0, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 38% 38%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 41% 56%, rgba(0, 0, 0, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 46% 8%, rgba(0, 0, 0, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 50% 28%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 54% 66%, rgba(0, 0, 0, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 58% 34%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 63% 18%, rgba(0, 0, 0, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 67% 44%, rgba(0, 0, 0, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 72% 58%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 76% 8%, rgba(0, 0, 0, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 80% 34%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 84% 68%, rgba(0, 0, 0, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 88% 22%, rgba(0, 0, 0, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 92% 78%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 96% 46%, rgba(0, 0, 0, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 7% 88%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 18% 92%, rgba(0, 0, 0, 0.2) 50%, transparent 52%), radial-gradient(1px 1px at 32% 84%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 48% 92%, rgba(0, 0, 0, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 61% 82%, rgba(0, 0, 0, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 74% 88%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 87% 92%, rgba(0, 0, 0, 0.2) 50%, transparent 52%), radial-gradient(2px 2px at 33% 62%, rgba(0, 0, 0, 0.4) 50%, transparent 55%), radial-gradient(2px 2px at 71% 48%, rgba(0, 0, 0, 0.38) 50%, transparent 55%), radial-gradient(2px 2px at 52% 78%, rgba(0, 0, 0, 0.36) 50%, transparent 55%); opacity: 0.65; } /* Star layer: dense field with deliberate clustering — approximates * natural constellations rather than the uniform grid the earlier * sparse field produced. Mix of 1px pinpricks (the bulk), a handful of * 2px stars, and a couple of 3px "bright" stars with soft halos for depth. */ html[data-theme="dark"] body.keplerworks-deep-space::before { transform: translate3d(0, calc(var(--diagramParallaxY, 0) * -0.035px), 0); background: /* Cluster A — upper-left, tight grouping */ radial-gradient(1px 1px at 8% 10%, rgba(255, 255, 255, 0.72) 50%, transparent 52%), radial-gradient(1px 1px at 10% 13%, rgba(255, 255, 255, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 12% 8%, rgba(255, 255, 255, 0.6) 50%, transparent 52%), radial-gradient(1px 1px at 14% 15%, rgba(255, 255, 255, 0.38) 50%, transparent 52%), radial-gradient(1px 1px at 9% 18%, rgba(255, 255, 255, 0.45) 50%, transparent 52%), radial-gradient(1px 1px at 16% 11%, rgba(210, 225, 255, 0.55) 50%, transparent 52%), radial-gradient(1px 1px at 13% 20%, rgba(255, 255, 255, 0.32) 50%, transparent 52%), radial-gradient(2px 2px at 11% 12%, rgba(255, 255, 255, 0.7) 50%, transparent 55%), /* Cluster B — upper-mid, 'belt' arrangement */ radial-gradient(1px 1px at 34% 22%, rgba(255, 255, 255, 0.55) 50%, transparent 52%), radial-gradient(1px 1px at 36% 24%, rgba(255, 255, 255, 0.72) 50%, transparent 52%), radial-gradient(1px 1px at 38% 26%, rgba(255, 255, 255, 0.65) 50%, transparent 52%), radial-gradient(1px 1px at 40% 28%, rgba(255, 255, 255, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 35% 20%, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 39% 23%, rgba(255, 255, 255, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 32% 28%, rgba(180, 205, 255, 0.55) 50%, transparent 52%), radial-gradient(2px 2px at 37% 25%, rgba(255, 255, 255, 0.72) 50%, transparent 55%), /* Cluster C — right-top, looser group */ radial-gradient(1px 1px at 73% 12%, rgba(255, 255, 255, 0.58) 50%, transparent 52%), radial-gradient(1px 1px at 76% 16%, rgba(255, 255, 255, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 78% 10%, rgba(255, 255, 255, 0.52) 50%, transparent 52%), radial-gradient(1px 1px at 81% 18%, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 79% 14%, rgba(255, 235, 215, 0.48) 50%, transparent 52%), radial-gradient(1px 1px at 74% 20%, rgba(255, 255, 255, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 82% 12%, rgba(255, 255, 255, 0.44) 50%, transparent 52%), /* Cluster D — centre-mid, sparse wide */ radial-gradient(1px 1px at 48% 46%, rgba(255, 255, 255, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 51% 44%, rgba(255, 255, 255, 0.6) 50%, transparent 52%), radial-gradient(1px 1px at 54% 48%, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 52% 50%, rgba(255, 255, 255, 0.42) 50%, transparent 52%), radial-gradient(2px 2px at 50% 45%, rgba(220, 230, 255, 0.55) 50%, transparent 55%), /* Cluster E — left-mid, dense (hint of globular cluster) */ radial-gradient(1px 1px at 20% 54%, rgba(255, 255, 255, 0.72) 50%, transparent 52%), radial-gradient(1px 1px at 21% 56%, rgba(255, 255, 255, 0.52) 50%, transparent 52%), radial-gradient(1px 1px at 22% 53%, rgba(255, 255, 255, 0.62) 50%, transparent 52%), radial-gradient(1px 1px at 19% 57%, rgba(255, 255, 255, 0.4) 50%, transparent 52%), radial-gradient(1px 1px at 23% 55%, rgba(255, 255, 255, 0.48) 50%, transparent 52%), radial-gradient(1px 1px at 22% 58%, rgba(230, 225, 200, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 20% 52%, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 24% 57%, rgba(255, 255, 255, 0.44) 50%, transparent 52%), radial-gradient(1px 1px at 18% 55%, rgba(255, 255, 255, 0.3) 50%, transparent 52%), /* Cluster F — bottom-right, bright pair */ radial-gradient(1px 1px at 82% 76%, rgba(255, 255, 255, 0.68) 50%, transparent 52%), radial-gradient(1px 1px at 85% 78%, rgba(255, 255, 255, 0.45) 50%, transparent 52%), radial-gradient(1px 1px at 86% 74%, rgba(255, 255, 255, 0.54) 50%, transparent 52%), radial-gradient(1px 1px at 80% 80%, rgba(255, 255, 255, 0.38) 50%, transparent 52%), radial-gradient(1px 1px at 84% 82%, rgba(255, 230, 210, 0.5) 50%, transparent 52%), radial-gradient(2px 2px at 83% 77%, rgba(255, 255, 255, 0.68) 50%, transparent 55%), /* Cluster G — bottom-left, loose scatter */ radial-gradient(1px 1px at 9% 84%, rgba(255, 255, 255, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 11% 88%, rgba(255, 255, 255, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 14% 86%, rgba(255, 255, 255, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 17% 92%, rgba(255, 255, 255, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 12% 82%, rgba(200, 215, 255, 0.48) 50%, transparent 52%), /* Cluster H — mid-bottom */ radial-gradient(1px 1px at 49% 74%, rgba(255, 255, 255, 0.55) 50%, transparent 52%), radial-gradient(1px 1px at 52% 76%, rgba(255, 255, 255, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 55% 78%, rgba(255, 255, 255, 0.6) 50%, transparent 52%), radial-gradient(1px 1px at 51% 80%, rgba(255, 255, 255, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 54% 72%, rgba(255, 255, 255, 0.46) 50%, transparent 52%), /* Cluster I — right-mid */ radial-gradient(1px 1px at 90% 54%, rgba(255, 255, 255, 0.62) 50%, transparent 52%), radial-gradient(1px 1px at 92% 58%, rgba(255, 255, 255, 0.4) 50%, transparent 52%), radial-gradient(1px 1px at 94% 52%, rgba(255, 255, 255, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 95% 60%, rgba(180, 210, 255, 0.45) 50%, transparent 52%), radial-gradient(1px 1px at 88% 56%, rgba(255, 255, 255, 0.36) 50%, transparent 52%), /* Cluster J — top-centre, mini-group */ radial-gradient(1px 1px at 55% 6%, rgba(255, 255, 255, 0.58) 50%, transparent 52%), radial-gradient(1px 1px at 57% 9%, rgba(255, 255, 255, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 60% 7%, rgba(255, 255, 255, 0.52) 50%, transparent 52%), radial-gradient(1px 1px at 58% 11%, rgba(255, 255, 255, 0.35) 50%, transparent 52%), /* Loose scatter — spread across the whole field */ radial-gradient(1px 1px at 4% 32%, rgba(255, 255, 255, 0.4) 50%, transparent 52%), radial-gradient(1px 1px at 6% 64%, rgba(255, 255, 255, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 3% 48%, rgba(255, 255, 255, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 5% 76%, rgba(255, 255, 255, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 2% 22%, rgba(210, 220, 255, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 27% 4%, rgba(255, 255, 255, 0.36) 50%, transparent 52%), radial-gradient(1px 1px at 28% 36%, rgba(255, 255, 255, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 29% 68%, rgba(255, 255, 255, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 26% 72%, rgba(255, 230, 205, 0.36) 50%, transparent 52%), radial-gradient(1px 1px at 30% 48%, rgba(255, 255, 255, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 42% 6%, rgba(255, 255, 255, 0.4) 50%, transparent 52%), radial-gradient(1px 1px at 45% 36%, rgba(255, 255, 255, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 44% 62%, rgba(255, 255, 255, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 46% 94%, rgba(255, 255, 255, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 48% 16%, rgba(200, 220, 255, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 63% 32%, rgba(255, 255, 255, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 65% 62%, rgba(255, 255, 255, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 66% 4%, rgba(255, 255, 255, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 68% 94%, rgba(255, 255, 255, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 61% 68%, rgba(255, 240, 220, 0.4) 50%, transparent 52%), radial-gradient(1px 1px at 70% 44%, rgba(255, 255, 255, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 72% 62%, rgba(255, 255, 255, 0.2) 50%, transparent 52%), radial-gradient(1px 1px at 88% 4%, rgba(255, 255, 255, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 96% 8%, rgba(255, 255, 255, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 98% 34%, rgba(255, 255, 255, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 97% 88%, rgba(255, 255, 255, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 89% 46%, rgba(200, 215, 255, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 42% 52%, rgba(255, 255, 255, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 33% 56%, rgba(255, 255, 255, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 62% 86%, rgba(255, 255, 255, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 73% 30%, rgba(255, 255, 255, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 77% 62%, rgba(255, 255, 255, 0.38) 50%, transparent 52%), radial-gradient(1px 1px at 24% 40%, rgba(255, 255, 255, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 18% 38%, rgba(255, 255, 255, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 7% 72%, rgba(255, 235, 220, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 12% 66%, rgba(255, 255, 255, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 38% 82%, rgba(255, 255, 255, 0.4) 50%, transparent 52%), radial-gradient(1px 1px at 41% 68%, rgba(255, 255, 255, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 68% 14%, rgba(255, 255, 255, 0.36) 50%, transparent 52%), radial-gradient(1px 1px at 60% 38%, rgba(255, 255, 255, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 86% 32%, rgba(255, 255, 255, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 80% 50%, rgba(255, 255, 255, 0.38) 50%, transparent 52%), radial-gradient(1px 1px at 53% 60%, rgba(255, 255, 255, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 69% 86%, rgba(255, 255, 255, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 75% 90%, rgba(255, 255, 255, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 33% 90%, rgba(255, 255, 255, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 56% 88%, rgba(255, 230, 205, 0.34) 50%, transparent 52%), /* Larger 2px "brighter" stars — the foreground magnitudes */ radial-gradient(2px 2px at 16% 42%, rgba(255, 255, 255, 0.7) 50%, transparent 55%), radial-gradient(2px 2px at 67% 54%, rgba(255, 255, 255, 0.6) 50%, transparent 55%), radial-gradient(2px 2px at 26% 80%, rgba(220, 230, 255, 0.7) 50%, transparent 55%), radial-gradient(2px 2px at 91% 36%, rgba(255, 235, 215, 0.6) 50%, transparent 55%), /* Two 3px standout stars with a gentle glow to anchor the field */ radial-gradient(3px 3px at 31% 14%, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0.15) 65%, transparent 80%), radial-gradient(3px 3px at 74% 68%, rgba(255, 245, 230, 0.85) 40%, rgba(255, 245, 230, 0.15) 65%, transparent 80%); opacity: 0.94; } html[data-theme="light"] body.keplerworks-deep-space::before { transform: translate3d(0, calc(var(--diagramParallaxY, 0) * -0.035px), 0); background: /* Cluster A — upper-left, tight grouping */ radial-gradient(1px 1px at 8% 10%, rgba(10, 15, 26, 0.72) 50%, transparent 52%), radial-gradient(1px 1px at 10% 13%, rgba(10, 15, 26, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 12% 8%, rgba(10, 15, 26, 0.6) 50%, transparent 52%), radial-gradient(1px 1px at 14% 15%, rgba(10, 15, 26, 0.38) 50%, transparent 52%), radial-gradient(1px 1px at 9% 18%, rgba(10, 15, 26, 0.45) 50%, transparent 52%), radial-gradient(1px 1px at 16% 11%, rgba(30, 45, 70, 0.55) 50%, transparent 52%), radial-gradient(1px 1px at 13% 20%, rgba(10, 15, 26, 0.32) 50%, transparent 52%), radial-gradient(2px 2px at 11% 12%, rgba(10, 15, 26, 0.7) 50%, transparent 55%), /* Cluster B — upper-mid, 'belt' arrangement */ radial-gradient(1px 1px at 34% 22%, rgba(10, 15, 26, 0.55) 50%, transparent 52%), radial-gradient(1px 1px at 36% 24%, rgba(10, 15, 26, 0.72) 50%, transparent 52%), radial-gradient(1px 1px at 38% 26%, rgba(10, 15, 26, 0.65) 50%, transparent 52%), radial-gradient(1px 1px at 40% 28%, rgba(10, 15, 26, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 35% 20%, rgba(10, 15, 26, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 39% 23%, rgba(10, 15, 26, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 32% 28%, rgba(35, 50, 75, 0.55) 50%, transparent 52%), radial-gradient(2px 2px at 37% 25%, rgba(10, 15, 26, 0.72) 50%, transparent 55%), /* Cluster C — right-top, looser group */ radial-gradient(1px 1px at 73% 12%, rgba(10, 15, 26, 0.58) 50%, transparent 52%), radial-gradient(1px 1px at 76% 16%, rgba(10, 15, 26, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 78% 10%, rgba(10, 15, 26, 0.52) 50%, transparent 52%), radial-gradient(1px 1px at 81% 18%, rgba(10, 15, 26, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 79% 14%, rgba(40, 35, 30, 0.48) 50%, transparent 52%), radial-gradient(1px 1px at 74% 20%, rgba(10, 15, 26, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 82% 12%, rgba(10, 15, 26, 0.44) 50%, transparent 52%), /* Cluster D — centre-mid, sparse wide */ radial-gradient(1px 1px at 48% 46%, rgba(10, 15, 26, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 51% 44%, rgba(10, 15, 26, 0.6) 50%, transparent 52%), radial-gradient(1px 1px at 54% 48%, rgba(10, 15, 26, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 52% 50%, rgba(10, 15, 26, 0.42) 50%, transparent 52%), radial-gradient(2px 2px at 50% 45%, rgba(25, 38, 58, 0.55) 50%, transparent 55%), /* Cluster E — left-mid, dense (hint of globular cluster) */ radial-gradient(1px 1px at 20% 54%, rgba(10, 15, 26, 0.72) 50%, transparent 52%), radial-gradient(1px 1px at 21% 56%, rgba(10, 15, 26, 0.52) 50%, transparent 52%), radial-gradient(1px 1px at 22% 53%, rgba(10, 15, 26, 0.62) 50%, transparent 52%), radial-gradient(1px 1px at 19% 57%, rgba(10, 15, 26, 0.4) 50%, transparent 52%), radial-gradient(1px 1px at 23% 55%, rgba(10, 15, 26, 0.48) 50%, transparent 52%), radial-gradient(1px 1px at 22% 58%, rgba(35, 32, 28, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 20% 52%, rgba(10, 15, 26, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 24% 57%, rgba(10, 15, 26, 0.44) 50%, transparent 52%), radial-gradient(1px 1px at 18% 55%, rgba(10, 15, 26, 0.3) 50%, transparent 52%), /* Cluster F — bottom-right, bright pair */ radial-gradient(1px 1px at 82% 76%, rgba(10, 15, 26, 0.68) 50%, transparent 52%), radial-gradient(1px 1px at 85% 78%, rgba(10, 15, 26, 0.45) 50%, transparent 52%), radial-gradient(1px 1px at 86% 74%, rgba(10, 15, 26, 0.54) 50%, transparent 52%), radial-gradient(1px 1px at 80% 80%, rgba(10, 15, 26, 0.38) 50%, transparent 52%), radial-gradient(1px 1px at 84% 82%, rgba(255, 230, 210, 0.5) 50%, transparent 52%), radial-gradient(2px 2px at 83% 77%, rgba(10, 15, 26, 0.68) 50%, transparent 55%), /* Cluster G — bottom-left, loose scatter */ radial-gradient(1px 1px at 9% 84%, rgba(10, 15, 26, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 11% 88%, rgba(10, 15, 26, 0.35) 50%, transparent 52%), radial-gradient(1px 1px at 14% 86%, rgba(10, 15, 26, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 17% 92%, rgba(10, 15, 26, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 12% 82%, rgba(30, 45, 70, 0.48) 50%, transparent 52%), /* Cluster H — mid-bottom */ radial-gradient(1px 1px at 49% 74%, rgba(10, 15, 26, 0.55) 50%, transparent 52%), radial-gradient(1px 1px at 52% 76%, rgba(10, 15, 26, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 55% 78%, rgba(10, 15, 26, 0.6) 50%, transparent 52%), radial-gradient(1px 1px at 51% 80%, rgba(10, 15, 26, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 54% 72%, rgba(10, 15, 26, 0.46) 50%, transparent 52%), /* Cluster I — right-mid */ radial-gradient(1px 1px at 90% 54%, rgba(10, 15, 26, 0.62) 50%, transparent 52%), radial-gradient(1px 1px at 92% 58%, rgba(10, 15, 26, 0.4) 50%, transparent 52%), radial-gradient(1px 1px at 94% 52%, rgba(10, 15, 26, 0.5) 50%, transparent 52%), radial-gradient(1px 1px at 95% 60%, rgba(180, 210, 255, 0.45) 50%, transparent 52%), radial-gradient(1px 1px at 88% 56%, rgba(10, 15, 26, 0.36) 50%, transparent 52%), /* Cluster J — top-centre, mini-group */ radial-gradient(1px 1px at 55% 6%, rgba(10, 15, 26, 0.58) 50%, transparent 52%), radial-gradient(1px 1px at 57% 9%, rgba(10, 15, 26, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 60% 7%, rgba(10, 15, 26, 0.52) 50%, transparent 52%), radial-gradient(1px 1px at 58% 11%, rgba(10, 15, 26, 0.35) 50%, transparent 52%), /* Loose scatter — spread across the whole field */ radial-gradient(1px 1px at 4% 32%, rgba(10, 15, 26, 0.4) 50%, transparent 52%), radial-gradient(1px 1px at 6% 64%, rgba(10, 15, 26, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 3% 48%, rgba(10, 15, 26, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 5% 76%, rgba(10, 15, 26, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 2% 22%, rgba(210, 220, 255, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 27% 4%, rgba(10, 15, 26, 0.36) 50%, transparent 52%), radial-gradient(1px 1px at 28% 36%, rgba(10, 15, 26, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 29% 68%, rgba(10, 15, 26, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 26% 72%, rgba(40, 35, 30, 0.36) 50%, transparent 52%), radial-gradient(1px 1px at 30% 48%, rgba(10, 15, 26, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 42% 6%, rgba(10, 15, 26, 0.4) 50%, transparent 52%), radial-gradient(1px 1px at 45% 36%, rgba(10, 15, 26, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 44% 62%, rgba(10, 15, 26, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 46% 94%, rgba(10, 15, 26, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 48% 16%, rgba(30, 45, 70, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 63% 32%, rgba(10, 15, 26, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 65% 62%, rgba(10, 15, 26, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 66% 4%, rgba(10, 15, 26, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 68% 94%, rgba(10, 15, 26, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 61% 68%, rgba(38, 34, 28, 0.4) 50%, transparent 52%), radial-gradient(1px 1px at 70% 44%, rgba(10, 15, 26, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 72% 62%, rgba(10, 15, 26, 0.2) 50%, transparent 52%), radial-gradient(1px 1px at 88% 4%, rgba(10, 15, 26, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 96% 8%, rgba(10, 15, 26, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 98% 34%, rgba(10, 15, 26, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 97% 88%, rgba(10, 15, 26, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 89% 46%, rgba(30, 45, 70, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 42% 52%, rgba(10, 15, 26, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 33% 56%, rgba(10, 15, 26, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 62% 86%, rgba(10, 15, 26, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 73% 30%, rgba(10, 15, 26, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 77% 62%, rgba(10, 15, 26, 0.38) 50%, transparent 52%), radial-gradient(1px 1px at 24% 40%, rgba(10, 15, 26, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 18% 38%, rgba(10, 15, 26, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 7% 72%, rgba(40, 35, 30, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 12% 66%, rgba(10, 15, 26, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 38% 82%, rgba(10, 15, 26, 0.4) 50%, transparent 52%), radial-gradient(1px 1px at 41% 68%, rgba(10, 15, 26, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 68% 14%, rgba(10, 15, 26, 0.36) 50%, transparent 52%), radial-gradient(1px 1px at 60% 38%, rgba(10, 15, 26, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 86% 32%, rgba(10, 15, 26, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 80% 50%, rgba(10, 15, 26, 0.38) 50%, transparent 52%), radial-gradient(1px 1px at 53% 60%, rgba(10, 15, 26, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 69% 86%, rgba(10, 15, 26, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 75% 90%, rgba(10, 15, 26, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 33% 90%, rgba(10, 15, 26, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 56% 88%, rgba(40, 35, 30, 0.34) 50%, transparent 52%), /* Larger 2px "brighter" stars — the foreground magnitudes */ radial-gradient(2px 2px at 16% 42%, rgba(10, 15, 26, 0.7) 50%, transparent 55%), radial-gradient(2px 2px at 67% 54%, rgba(10, 15, 26, 0.6) 50%, transparent 55%), radial-gradient(2px 2px at 26% 80%, rgba(25, 38, 58, 0.7) 50%, transparent 55%), radial-gradient(2px 2px at 91% 36%, rgba(40, 35, 30, 0.6) 50%, transparent 55%), /* Two 3px standout stars with a gentle glow to anchor the field */ radial-gradient(3px 3px at 31% 14%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0.15) 65%, transparent 80%), radial-gradient(3px 3px at 74% 68%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0.15) 65%, transparent 80%), /* Extra scatter — denser #000000 field for light theme */ radial-gradient(1px 1px at 22% 34%, rgba(0, 0, 0, 0.42) 50%, transparent 52%), radial-gradient(1px 1px at 47% 18%, rgba(0, 0, 0, 0.36) 50%, transparent 52%), radial-gradient(1px 1px at 58% 42%, rgba(0, 0, 0, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 71% 28%, rgba(0, 0, 0, 0.38) 50%, transparent 52%), radial-gradient(1px 1px at 84% 48%, rgba(0, 0, 0, 0.34) 50%, transparent 52%), radial-gradient(1px 1px at 15% 62%, rgba(0, 0, 0, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 36% 58%, rgba(0, 0, 0, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 64% 72%, rgba(0, 0, 0, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 92% 62%, rgba(0, 0, 0, 0.36) 50%, transparent 52%), radial-gradient(1px 1px at 8% 46%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 52% 32%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(2px 2px at 44% 52%, rgba(0, 0, 0, 0.55) 50%, transparent 55%), radial-gradient(2px 2px at 78% 22%, rgba(0, 0, 0, 0.5) 50%, transparent 55%), radial-gradient(2px 2px at 18% 78%, rgba(0, 0, 0, 0.48) 50%, transparent 55%), /* Extra scatter 2 — light theme density boost */ radial-gradient(1px 1px at 5% 8%, rgba(0, 0, 0, 0.32) 50%, transparent 52%), radial-gradient(1px 1px at 7% 58%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 11% 28%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 15% 78%, rgba(0, 0, 0, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 19% 48%, rgba(0, 0, 0, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 23% 18%, rgba(0, 0, 0, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 27% 88%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 31% 62%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 35% 28%, rgba(0, 0, 0, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 39% 72%, rgba(0, 0, 0, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 43% 42%, rgba(0, 0, 0, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 47% 8%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 51% 68%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 55% 22%, rgba(0, 0, 0, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 59% 52%, rgba(0, 0, 0, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 63% 82%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 67% 38%, rgba(0, 0, 0, 0.3) 50%, transparent 52%), radial-gradient(1px 1px at 71% 12%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 75% 58%, rgba(0, 0, 0, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 79% 82%, rgba(0, 0, 0, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 83% 18%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 87% 72%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 91% 42%, rgba(0, 0, 0, 0.28) 50%, transparent 52%), radial-gradient(1px 1px at 95% 8%, rgba(0, 0, 0, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 97% 58%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 4% 92%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 14% 96%, rgba(0, 0, 0, 0.2) 50%, transparent 52%), radial-gradient(1px 1px at 28% 94%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(1px 1px at 46% 96%, rgba(0, 0, 0, 0.22) 50%, transparent 52%), radial-gradient(1px 1px at 64% 94%, rgba(0, 0, 0, 0.26) 50%, transparent 52%), radial-gradient(1px 1px at 82% 96%, rgba(0, 0, 0, 0.2) 50%, transparent 52%), radial-gradient(1px 1px at 98% 92%, rgba(0, 0, 0, 0.24) 50%, transparent 52%), radial-gradient(2px 2px at 9% 38%, rgba(0, 0, 0, 0.52) 50%, transparent 55%), radial-gradient(2px 2px at 56% 14%, rgba(0, 0, 0, 0.48) 50%, transparent 55%), radial-gradient(2px 2px at 38% 88%, rgba(0, 0, 0, 0.46) 50%, transparent 55%), radial-gradient(2px 2px at 94% 28%, rgba(0, 0, 0, 0.44) 50%, transparent 55%), radial-gradient(3px 3px at 48% 38%, rgba(0, 0, 0, 0.72) 40%, rgba(0, 0, 0, 0.12) 65%, transparent 80%), radial-gradient(3px 3px at 12% 68%, rgba(0, 0, 0, 0.68) 40%, rgba(0, 0, 0, 0.1) 65%, transparent 80%); opacity: 0.92; } /* Depth: nebula wash, distant galaxies + coloured giant-star halos. * The ::after layer sits behind ::before so the galaxies read as * genuinely further away than the pinprick foreground field. */ html[data-theme="dark"] body.keplerworks-deep-space::after { transform: translate3d(0, calc(var(--diagramParallaxY, 0) * -0.02px), 0); background: /* --- DISTANT STAR BODIES (coloured halos / galaxies) --- */ /* Spiral galaxy hint — upper-right, faint purple-blue swirl */ radial-gradient(ellipse 220px 90px at 82% 20%, rgba(140, 120, 210, 0.22) 0%, rgba(140, 120, 210, 0.07) 35%, transparent 70%), radial-gradient(ellipse 110px 45px at 82% 20%, rgba(180, 160, 230, 0.16) 0%, transparent 70%), radial-gradient(4px 4px at 82% 20%, rgba(230, 220, 255, 0.7) 40%, rgba(230, 220, 255, 0.1) 70%, transparent 100%), /* Small elliptical galaxy — lower-left, muted cyan */ radial-gradient(ellipse 160px 80px at 14% 78%, rgba(90, 150, 200, 0.16) 0%, rgba(90, 150, 200, 0.05) 45%, transparent 75%), radial-gradient(3px 3px at 14% 78%, rgba(200, 225, 240, 0.55) 40%, transparent 100%), /* Globular cluster glow — mid-left, warm amber */ radial-gradient(circle 70px at 21% 55%, rgba(255, 215, 170, 0.14) 0%, rgba(255, 215, 170, 0.04) 45%, transparent 75%), /* Blue supergiant — bright blue diffused halo */ radial-gradient(circle 30px at 37% 25%, rgba(130, 180, 255, 0.28) 0%, rgba(130, 180, 255, 0.08) 45%, transparent 80%), radial-gradient(2px 2px at 37% 25%, rgba(220, 235, 255, 0.9) 40%, transparent 100%), /* Red giant — warm orange halo */ radial-gradient(circle 26px at 68% 42%, rgba(240, 150, 110, 0.24) 0%, rgba(240, 150, 110, 0.07) 45%, transparent 80%), radial-gradient(2px 2px at 68% 42%, rgba(255, 225, 205, 0.85) 40%, transparent 100%), /* Another red giant — bottom-right */ radial-gradient(circle 22px at 88% 84%, rgba(230, 130, 95, 0.22) 0%, rgba(230, 130, 95, 0.06) 45%, transparent 80%), radial-gradient(2px 2px at 88% 84%, rgba(255, 220, 200, 0.8) 40%, transparent 100%), /* --- AMBIENT NEBULA WASHES (existing) --- */ radial-gradient(ellipse 140% 55% at 50% 118%, rgba(80, 110, 160, 0.08) 0%, transparent 48%), radial-gradient(ellipse 90% 45% at 18% 108%, var(--accent-pale) 0%, transparent 42%), radial-gradient(ellipse 70% 35% at 88% 102%, var(--accent-pale) 0%, transparent 40%), radial-gradient(ellipse 1200px 520px at 50% -8%, rgba(255, 255, 255, 0.025), transparent 55%), radial-gradient(820px 420px at 12% 18%, var(--accent-pale), transparent 58%), radial-gradient(760px 380px at 88% 24%, rgba(98, 154, 255, 0.055), transparent 58%), /* A broad faint dust lane cutting diagonally across the field */ radial-gradient(ellipse 120% 18% at 40% 60%, rgba(160, 140, 190, 0.035) 0%, transparent 65%); opacity: 0.9; } /* Checkout success: align top bar with dark space pages */ html[data-theme="dark"] body.keplerworks-deep-space .checkout-topnav { background: rgba(5, 6, 12, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(226, 232, 240, 0.12); } html[data-theme="dark"] body.keplerworks-deep-space .checkout-topnav .logo { color: #ffffff; } html[data-theme="dark"] body.keplerworks-deep-space .checkout-topnav .nav-link { color: rgba(226, 232, 240, 0.76); } html[data-theme="dark"] body.keplerworks-deep-space .checkout-topnav .nav-link:hover { color: var(--accent); } html[data-theme="dark"] body.keplerworks-deep-space .checkout-topnav .nav-agent { background: rgba(255, 255, 255, 0.06); border-color: rgba(226, 232, 240, 0.14); color: rgba(242, 244, 248, 0.9); } html[data-theme="dark"] body.keplerworks-deep-space .checkout-topnav .nav-agent-soon { background: rgba(255, 255, 255, 0.04); color: rgba(226, 232, 240, 0.55); } html[data-theme="dark"] body.keplerworks-deep-space .checkout-topnav .nav-cta { background: var(--accent); color: var(--accent-fg); } html[data-theme="dark"] body.keplerworks-deep-space .checkout-topnav .nav-user { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(226, 232, 240, 0.12); color: rgba(242, 244, 248, 0.88); } html[data-theme="dark"] body.keplerworks-deep-space .checkout-topnav .nav-logout { background: transparent; border: 1px solid rgba(226, 232, 240, 0.22); color: rgba(242, 244, 248, 0.85); }