:root { color-scheme: dark; background: #05030b; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #05030b; }
body { cursor: crosshair; }
#universe { position: relative; width: 100%; height: 100%; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 50% 48%, #180c31 0%, #090612 43%, #030208 100%); }
#space { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vignette { pointer-events: none; position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at center, transparent 25%, rgba(2,1,8,.22) 63%, rgba(0,0,3,.85) 100%); }
.grain { pointer-events: none; position: absolute; inset: -50%; z-index: 3; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); animation: grainshift .24s steps(2) infinite; }
@keyframes grainshift { 0% { transform: translate(0,0); } 25% { transform: translate(2%,-1%); } 50% { transform: translate(-1%,2%); } 75% { transform: translate(1%,1%); } 100% { transform: translate(-2%,-1%); } }
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }