/* === XOR Blueprint Background (self-sufficient) === Base dark gradient + blueprint overlay + canvas layer. */ /* Base dark gradient (with safe fallbacks) */ html, body { height:100%; } html { color-scheme: dark; } body{ margin:0; background: linear-gradient(180deg, var(--bg-2, #0b223a), var(--bg-1, #07182a)); } /* Decorative blueprint layers on the (with fallbacks) */ body::before{ content:""; position:fixed; inset:0; background: /* optional cross-axes; can be disabled via :root --axis */ linear-gradient(90deg, transparent 78%, var(--axis, transparent) 78.2%, transparent 78.4%), linear-gradient(0deg, transparent 62%, var(--axis, transparent) 62.2%, transparent 62.4%), /* concentric rings */ radial-gradient(circle at 50% 30%, transparent 280px, var(--ring, #7bd0ff22) 281px, transparent 282px, transparent 380px, var(--ring, #7bd0ff22) 381px, transparent 382px, transparent 480px, var(--ring, #7bd0ff22) 481px, transparent 482px, transparent 580px, var(--ring, #7bd0ff22) 581px, transparent 582px), radial-gradient(circle at 22% 58%, transparent 180px, var(--ring, #7bd0ff22) 181px, transparent 182px, transparent 260px, var(--ring, #7bd0ff22) 261px, transparent 262px, transparent 340px, var(--ring, #7bd0ff22) 341px, transparent 342px), /* grid (major + minor) */ linear-gradient(0deg, var(--grid-major, #7bd0ff22) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major, #7bd1ff22) 1px, transparent 1px), linear-gradient(0deg, var(--grid-minor, #ffffff0a) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor, #ffffff0a) 1px, transparent 1px); background-size: 100% 100%,100% 100%,100% 100%,100% 100%,80px 80px,80px 80px,16px 16px,16px 16px; pointer-events:none; z-index:0; opacity:.95; } /* Soft, even vignette on all edges */ body::after{ content:""; position:fixed; inset:0; background: radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.42) 100%); pointer-events:none; z-index:0; } /* animated canvas layer */ #bg-canvas{ position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.95; } /* keep app above the canvas */ .layout{ position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce){ #bg-canvas{ display:none; } } /* By default hide bold axes unless explicitly enabled earlier */ :root{ --axis: transparent; }