:root { --bg: #020b06; --text: #f0fff4; --muted: #a7b9ad; --green: #77ffa0; --line: rgba(134, 255, 164, .2); }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--text); background: #020b06; font-family: Manrope, sans-serif; }
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; inset: 0; }
body::before { background: conic-gradient(from 205deg at 46% 45%, #020a05 0deg, #063a19 55deg, #0b742f 106deg, #032210 158deg, #041a0c 218deg, #095e27 274deg, #020a05 360deg); background-size: 160% 160%; filter: blur(28px) saturate(130%); opacity: .88; animation: shader-flow 20s ease-in-out infinite alternate; }
body::after { inset: 0; background: radial-gradient(ellipse 48% 68% at 11% 8%, rgba(74, 255, 119, .28), transparent 72%), radial-gradient(ellipse 38% 55% at 89% 16%, rgba(31, 205, 83, .22), transparent 72%), radial-gradient(ellipse 55% 56% at 50% 105%, rgba(9, 149, 55, .3), transparent 73%), linear-gradient(125deg, rgba(2, 10, 5, .54), rgba(1, 14, 6, .28)); mix-blend-mode: screen; }
@keyframes shader-flow { from { background-position: 0% 15%; filter: blur(28px) hue-rotate(0deg) saturate(130%); } to { background-position: 100% 85%; filter: blur(34px) hue-rotate(18deg) saturate(155%); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }