/* Aurora: the moving colour background used by the landing band and the sign-up page.
 * Markup: <div class="aurora"><i></i><i></i><i></i><i></i><i></i><i></i></div>
 * Six soft ribbons (not circles) drift, stretch and shift hue on different clocks,
 * so the picture is visibly alive within a few seconds. Day: white, light green,
 * green, yellow, dark green bottom-left. Night: the same on near-black. */
.aurora{position:absolute;inset:0;overflow:hidden;z-index:-2;background:linear-gradient(180deg,#fff 0%,#f3f9f6 45%,#e6f3ec 100%);isolation:isolate}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(26px);will-change:transform;pointer-events:none;mix-blend-mode:multiply}
/* 1 dark green sweep, bottom-left */
.aurora i:nth-child(1){left:-30vw;bottom:-18vw;width:110vw;height:38vw;background:radial-gradient(ellipse at 50% 50%,#145a48 0,#1f6f5c 28%,#3f9a7d 52%,#ffffff00 72%);transform:rotate(-16deg);animation:auA 17s ease-in-out infinite alternate,auHue 29s ease-in-out infinite alternate}
/* 2 yellow ribbon through the middle */
.aurora i:nth-child(2){left:-10vw;top:28%;width:120vw;height:30vw;background:radial-gradient(ellipse at 50% 50%,#f2b134 0,#ffcf5e 30%,#ffe9a8 55%,#ffffff00 74%);transform:rotate(-9deg);animation:auB 14s ease-in-out infinite alternate,auHue2 23s ease-in-out infinite alternate}
/* 3 light green ribbon, right */
.aurora i:nth-child(3){right:-30vw;top:6%;width:100vw;height:36vw;background:radial-gradient(ellipse at 50% 50%,#7fd1b3 0,#b6e6d2 34%,#ffffff00 72%);transform:rotate(12deg);animation:auC 19s ease-in-out infinite alternate}
/* 4 white streak, upper */
.aurora i:nth-child(4){left:5vw;top:-8%;width:95vw;height:26vw;background:radial-gradient(ellipse at 50% 50%,#fff 0,#ffffffd0 40%,#ffffff00 72%);transform:rotate(-6deg);mix-blend-mode:normal;animation:auD 16s ease-in-out infinite alternate}
/* 5 green ribbon, right edge */
.aurora i:nth-child(5){right:-26vw;bottom:-14vw;width:90vw;height:34vw;background:radial-gradient(ellipse at 50% 50%,#1f6f5c 0,#3fa58a 34%,#9fdcc3 58%,#ffffff00 76%);transform:rotate(-24deg);animation:auE 15s ease-in-out infinite alternate,auHue 37s ease-in-out infinite alternate-reverse}
/* 6 soft yellow, left edge */
.aurora i:nth-child(6){left:-24vw;top:4%;width:70vw;height:30vw;background:radial-gradient(ellipse at 50% 50%,#ffe08a 0,#fff2c7 40%,#ffffff00 72%);transform:rotate(18deg);animation:auF 13s ease-in-out infinite alternate}
@keyframes auA{0%{transform:translate(0,0) rotate(-16deg) scaleX(1)}50%{transform:translate(12vw,-6vw) rotate(-10deg) scaleX(1.15)}100%{transform:translate(-6vw,4vw) rotate(-20deg) scaleX(.95)}}
@keyframes auB{0%{transform:translate(0,0) rotate(-9deg) scaleX(1)}50%{transform:translate(-14vw,8vw) rotate(-3deg) scaleX(1.2)}100%{transform:translate(10vw,-6vw) rotate(-14deg) scaleX(1.05)}}
@keyframes auC{0%{transform:translate(0,0) rotate(12deg)}50%{transform:translate(-16vw,10vw) rotate(6deg) scale(1.12)}100%{transform:translate(-4vw,22vw) rotate(16deg) scale(1.04)}}
@keyframes auD{0%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(10vw,6vw) rotate(-2deg) scaleX(1.18)}100%{transform:translate(-8vw,2vw) rotate(-9deg)}}
@keyframes auE{0%{transform:translate(0,0) rotate(-24deg)}50%{transform:translate(-14vw,-12vw) rotate(-18deg) scale(1.1)}100%{transform:translate(-26vw,-2vw) rotate(-30deg) scale(1.18)}}
@keyframes auF{0%{transform:translate(0,0) rotate(18deg)}50%{transform:translate(14vw,12vw) rotate(24deg) scale(1.12)}100%{transform:translate(4vw,24vw) rotate(10deg)}}
@keyframes auHue{0%{filter:blur(26px) hue-rotate(0deg) saturate(1)}50%{filter:blur(26px) hue-rotate(-22deg) saturate(1.2)}100%{filter:blur(26px) hue-rotate(16deg) saturate(.95)}}
@keyframes auHue2{0%{filter:blur(26px) hue-rotate(0deg)}50%{filter:blur(26px) hue-rotate(-14deg) saturate(1.15)}100%{filter:blur(26px) hue-rotate(10deg)}}
.aurora-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.09;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@media (prefers-reduced-motion:reduce){.aurora i{animation:none!important}}
/* Night */
html[data-theme=dark] .aurora{background:linear-gradient(180deg,#0f1211 0%,#070c0a 40%,#000 100%)}
html[data-theme=dark] .aurora i{mix-blend-mode:screen}
html[data-theme=dark] .aurora i:nth-child(1){background:radial-gradient(ellipse at 50% 50%,#1f6f5c 0,#176b55 28%,#0f3a2f 52%,#00000000 72%)}
html[data-theme=dark] .aurora i:nth-child(2){background:radial-gradient(ellipse at 50% 50%,#f2b134cc 0,#c9922a99 30%,#6b4d1555 55%,#00000000 74%)}
html[data-theme=dark] .aurora i:nth-child(3){background:radial-gradient(ellipse at 50% 50%,#3fa58a99 0,#1f6f5c66 34%,#00000000 72%)}
html[data-theme=dark] .aurora i:nth-child(4){background:radial-gradient(ellipse at 50% 50%,#ffffff22 0,#ffffff10 40%,#00000000 72%);mix-blend-mode:screen}
html[data-theme=dark] .aurora i:nth-child(5){background:radial-gradient(ellipse at 50% 50%,#3fa58a 0,#1f6f5c 34%,#0f3a2f 58%,#00000000 76%)}
html[data-theme=dark] .aurora i:nth-child(6){background:radial-gradient(ellipse at 50% 50%,#f2b13477 0,#8a62183f 40%,#00000000 72%)}
html[data-theme=dark] .aurora-grain{mix-blend-mode:screen;opacity:.06}