/* Plynx space background: static paint before (or without) JavaScript. * Put class="space-sky" (azure) or "space-sky space-sky--dusk" on the element you pass to mountSpace, * or on . The canvas covers it once mounted. */ :root { --space-azure-a: #1d5fc8; --space-azure-b: #4f9fe9; --space-azure-c: #c4e9fc; --space-dusk-a: #040b22; --space-dusk-b: #0a2256; --space-dusk-c: #1a5aa3; } .space-sky { background-color: var(--space-azure-b); background-image: radial-gradient(120% 90% at 0% 0%, rgba(255, 247, 230, 0.35), rgba(255, 247, 230, 0) 55%), radial-gradient(60% 50% at 70% 60%, rgba(99, 227, 210, 0.22), rgba(99, 227, 210, 0) 70%), linear-gradient(172deg, var(--space-azure-a) 0%, var(--space-azure-b) 50%, var(--space-azure-c) 100%); background-attachment: fixed; } .space-sky--dusk { background-color: var(--space-dusk-b); background-image: radial-gradient(120% 90% at 0% 0%, rgba(216, 236, 255, 0.16), rgba(216, 236, 255, 0) 55%), radial-gradient(60% 50% at 70% 60%, rgba(18, 183, 162, 0.16), rgba(18, 183, 162, 0) 70%), linear-gradient(172deg, var(--space-dusk-a) 0%, var(--space-dusk-b) 50%, var(--space-dusk-c) 100%); } /* The canvas mountSpace inserts. Inline styles already position it; this only guards print. */ .plynx-space { contain: strict; } @media print { .plynx-space { display: none !important; } }