@property --breath { syntax: ''; initial-value: 1; inherits: false; } @keyframes breathe { 0%, 100% { --breath: 1; } 38% { --breath: 1.085; } 71% { --breath: .945; } } :root { --starfield: radial-gradient(circle 1.5px at 69.2% 8.0%,rgba(255,255,255,0.49) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 37.3% 7.0%,rgba(255,255,255,0.76) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 17.2% 77.5%,rgba(255,255,255,0.45) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 56.7% 48.2%,rgba(255,255,255,0.7) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 84.0% 10.4%,rgba(255,255,255,0.24) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 68.0% 48.8%,rgba(255,255,255,0.43) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 99.6% 86.8%,rgba(255,255,255,0.64) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 57.8% 84.1%,rgba(255,255,255,0.27) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 70.1% 82.5%,rgba(255,255,255,0.75) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 80.7% 34.8%,rgba(255,255,255,0.21) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 78.5% 4.0%,rgba(255,255,255,0.46) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 35.2% 96.3%,rgba(255,255,255,0.73) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 28.5% 66.6%,rgba(255,255,255,0.71) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 35.5% 1.6%,rgba(255,255,255,0.78) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 6.6% 51.8%,rgba(255,255,255,0.35) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 30.6% 58.8%,rgba(255,255,255,0.62) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 84.4% 25.6%,rgba(255,255,255,0.8) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 37.8% 86.9%,rgba(255,255,255,0.82) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 46.3% 54.9%,rgba(255,255,255,0.66) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 48.6% 29.9%,rgba(255,255,255,0.47) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 68.1% 79.7%,rgba(255,255,255,0.48) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 53.1% 91.1%,rgba(255,255,255,0.31) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 1.8% 69.8%,rgba(255,255,255,0.65) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 30.6% 81.3%,rgba(255,255,255,0.88) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 88.4% 66.1%,rgba(255,255,255,0.66) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 30.1% 0.4%,rgba(255,255,255,0.59) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 94.0% 16.1%,rgba(255,255,255,0.86) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 32.5% 83.9%,rgba(255,255,255,0.76) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 66.1% 89.4%,rgba(255,255,255,0.46) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 2.7% 50.0%,rgba(255,255,255,0.63) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 17.4% 84.0%,rgba(255,255,255,0.71) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 81.1% 75.3%,rgba(255,255,255,0.83) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 66.5% 70.6%,rgba(255,255,255,0.7) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 23.6% 1.5%,rgba(255,255,255,0.72) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 72.8% 54.0%,rgba(255,255,255,0.44) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 84.5% 90.7%,rgba(255,255,255,0.28) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 16.5% 39.0%,rgba(255,255,255,0.73) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 63.4% 5.2%,rgba(255,255,255,0.57) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 26.9% 82.6%,rgba(255,255,255,0.36) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 64.9% 2.6%,rgba(255,255,255,0.9) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 59.7% 3.3%,rgba(255,255,255,0.56) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 26.9% 77.2%,rgba(255,255,255,0.91) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 68.3% 22.1%,rgba(255,255,255,0.86) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 98.0% 86.8%,rgba(255,255,255,0.64) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 32.9% 58.3%,rgba(255,255,255,0.25) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 51.0% 79.1%,rgba(255,255,255,0.41) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 88.0% 6.7%,rgba(255,255,255,0.36) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 45.4% 55.0%,rgba(255,255,255,0.33) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 12.4% 26.6%,rgba(255,255,255,0.67) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 30.0% 1.9%,rgba(255,255,255,0.5) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 10.6% 38.7%,rgba(255,255,255,0.64) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 86.2% 42.0%,rgba(255,255,255,0.87) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 53.6% 20.2%,rgba(255,255,255,0.91) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 98.8% 38.0%,rgba(255,255,255,0.19) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 65.4% 91.2%,rgba(255,255,255,0.54) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 94.1% 24.7%,rgba(255,255,255,0.77) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 46.3% 62.1%,rgba(255,255,255,0.68) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 90.0% 89.4%,rgba(255,255,255,0.46) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 29.5% 73.8%,rgba(255,255,255,0.43) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 96.5% 60.4%,rgba(255,255,255,0.9) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 79.0% 21.5%,rgba(255,255,255,0.74) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 68.4% 47.9%,rgba(255,255,255,0.66) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 28.5% 77.2%,rgba(255,255,255,0.38) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 41.4% 63.6%,rgba(255,255,255,0.89) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 40.1% 17.8%,rgba(255,255,255,0.44) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 6.7% 62.7%,rgba(255,255,255,0.75) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 76.3% 89.3%,rgba(255,255,255,0.26) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 4.6% 50.1%,rgba(255,255,255,0.88) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 88.9% 49.2%,rgba(255,255,255,0.83) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 60.6% 79.3%,rgba(255,255,255,0.92) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 41.2% 52.2%,rgba(255,255,255,0.21) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 93.5% 60.5%,rgba(255,255,255,0.68) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 27.1% 97.6%,rgba(255,255,255,0.38) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 73.9% 69.4%,rgba(255,255,255,0.54) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 76.3% 38.6%,rgba(255,255,255,0.56) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 24.7% 89.1%,rgba(255,255,255,0.48) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 35.1% 8.2%,rgba(255,255,255,0.51) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 73.1% 44.9%,rgba(255,255,255,0.9) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 92.4% 46.0%,rgba(255,255,255,0.2) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 40.4% 86.8%,rgba(255,255,255,0.81) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 46.0% 63.6%,rgba(255,255,255,0.55) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 57.0% 54.1%,rgba(255,255,255,0.79) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 10.1% 76.0%,rgba(255,255,255,0.4) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 83.9% 80.8%,rgba(255,255,255,0.85) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 14.1% 47.2%,rgba(255,255,255,0.68) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 52.4% 9.8%,rgba(255,255,255,0.47) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 81.5% 27.8%,rgba(255,255,255,0.74) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 19.4% 20.8%,rgba(255,255,255,0.46) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 36.2% 12.9%,rgba(255,255,255,0.82) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 60.4% 38.7%,rgba(255,255,255,0.31) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 68.3% 40.5%,rgba(255,255,255,0.88) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 69.8% 50.9%,rgba(255,255,255,0.6) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 91.0% 51.9%,rgba(255,255,255,0.41) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 88.0% 30.6%,rgba(255,255,255,0.86) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 90.4% 13.0%,rgba(255,255,255,0.92) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 72.0% 49.0%,rgba(255,255,255,0.71) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 1.1% 97.0%,rgba(255,255,255,0.76) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 77.2% 56.5%,rgba(255,255,255,0.82) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 95.5% 6.7%,rgba(255,255,255,0.3) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 24.1% 21.9%,rgba(255,255,255,0.47) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 53.4% 21.2%,rgba(255,255,255,0.47) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 33.1% 75.5%,rgba(255,255,255,0.35) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 36.9% 25.7%,rgba(255,255,255,0.58) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 26.1% 32.3%,rgba(255,255,255,0.43) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 62.3% 33.3%,rgba(255,255,255,0.93) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 19.7% 87.1%,rgba(255,255,255,0.28) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 88.1% 77.7%,rgba(255,255,255,0.74) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 38.5% 77.4%,rgba(255,255,255,0.3) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 49.6% 85.0%,rgba(255,255,255,0.27) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 58.6% 64.5%,rgba(255,255,255,0.67) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 94.3% 1.1%,rgba(255,255,255,0.26) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 53.0% 97.2%,rgba(255,255,255,0.59) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 76.4% 23.4%,rgba(255,255,255,0.56) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 0.7% 71.7%,rgba(255,255,255,0.7) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 19.5% 72.5%,rgba(255,255,255,0.71) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 37.0% 59.7%,rgba(255,255,255,0.69) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 62.8% 64.5%,rgba(255,255,255,0.73) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 92.0% 64.8%,rgba(255,255,255,0.55) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 92.9% 3.7%,rgba(255,255,255,0.57) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 99.0% 1.2%,rgba(255,255,255,0.86) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 77.2% 20.5%,rgba(255,255,255,0.41) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 26.3% 54.1%,rgba(255,255,255,0.71) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 40.8% 98.4%,rgba(255,255,255,0.43) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 92.5% 17.9%,rgba(255,255,255,0.6) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 77.2% 94.2%,rgba(255,255,255,0.23) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 69.3% 76.8%,rgba(255,255,255,0.94) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 8.6% 63.0%,rgba(255,255,255,0.7) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 63.0% 52.4%,rgba(255,255,255,0.34) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 93.9% 43.0%,rgba(255,255,255,0.39) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 77.8% 99.7%,rgba(255,255,255,0.77) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 14.3% 16.2%,rgba(255,255,255,0.59) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 66.2% 32.8%,rgba(255,255,255,0.59) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 41.9% 8.8%,rgba(255,255,255,0.58) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 98.7% 98.4%,rgba(255,255,255,0.66) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 32.4% 5.9%,rgba(255,255,255,0.6) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 5.5% 44.4%,rgba(255,255,255,0.19) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 81.5% 50.6%,rgba(255,255,255,0.63) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 47.1% 82.6%,rgba(255,255,255,0.22) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 55.0% 70.5%,rgba(255,255,255,0.83) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 99.3% 93.6%,rgba(255,255,255,0.27) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 55.7% 20.7%,rgba(255,255,255,0.55) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 38.1% 57.0%,rgba(255,255,255,0.32) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 81.9% 94.0%,rgba(255,255,255,0.27) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 18.0% 95.3%,rgba(255,255,255,0.45) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 30.7% 14.0%,rgba(255,255,255,0.19) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 71.4% 98.8%,rgba(255,255,255,0.23) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 79.0% 84.3%,rgba(255,255,255,0.37) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 19.3% 27.4%,rgba(255,255,255,0.73) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 6.2% 56.7%,rgba(255,255,255,0.29) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 33.0% 67.6%,rgba(255,255,255,0.69) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 95.3% 71.4%,rgba(255,255,255,0.72) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 4.5% 80.7%,rgba(255,255,255,0.46) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 43.0% 41.5%,rgba(255,255,255,0.81) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 51.6% 33.4%,rgba(255,255,255,0.31) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 28.4% 47.8%,rgba(255,255,255,0.26) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 80.6% 64.9%,rgba(255,255,255,0.8) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 53.8% 85.8%,rgba(255,255,255,0.29) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 89.9% 32.0%,rgba(255,255,255,0.68) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 62.7% 26.3%,rgba(255,255,255,0.65) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 0.6% 95.1%,rgba(255,255,255,0.77) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 1.8% 26.5%,rgba(255,255,255,0.93) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 51.1% 85.9%,rgba(255,255,255,0.47) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 0.0% 27.3%,rgba(255,255,255,0.75) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 27.0% 35.6%,rgba(255,255,255,0.38) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 97.5% 73.9%,rgba(255,255,255,0.2) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 32.6% 5.2%,rgba(255,255,255,0.48) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 9.6% 6.1%,rgba(255,255,255,0.57) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 67.3% 85.6%,rgba(255,255,255,0.54) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 33.2% 36.2%,rgba(255,255,255,0.75) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 72.5% 43.7%,rgba(255,255,255,0.31) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 34.2% 88.0%,rgba(255,255,255,0.29) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 22.0% 42.5%,rgba(255,255,255,0.2) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 22.9% 48.6%,rgba(255,255,255,0.54) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 79.0% 15.6%,rgba(255,255,255,0.5) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 32.0% 27.7%,rgba(255,255,255,0.94) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 5.7% 57.1%,rgba(255,255,255,0.8) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 91.2% 4.4%,rgba(255,255,255,0.28) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 59.5% 76.1%,rgba(255,255,255,0.76) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 52.6% 4.6%,rgba(255,255,255,0.41) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 68.3% 46.7%,rgba(255,255,255,0.19) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 3.3% 32.6%,rgba(255,255,255,0.2) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 84.9% 91.9%,rgba(255,255,255,0.22) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 79.7% 77.1%,rgba(255,255,255,0.41) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 98.8% 74.3%,rgba(255,255,255,0.77) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 1.2% 45.4%,rgba(255,255,255,0.89) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 88.5% 27.2%,rgba(255,255,255,0.89) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 71.9% 68.4%,rgba(255,255,255,0.59) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 22.3% 24.6%,rgba(255,255,255,0.71) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 34.4% 50.4%,rgba(255,255,255,0.47) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 76.9% 27.7%,rgba(255,255,255,0.83) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 88.9% 20.4%,rgba(255,255,255,0.58) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 38.9% 43.7%,rgba(255,255,255,0.2) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 54.9% 46.3%,rgba(255,255,255,0.34) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 67.7% 44.3%,rgba(255,255,255,0.86) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 91.5% 24.1%,rgba(255,255,255,0.38) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 92.8% 22.5%,rgba(255,255,255,0.67) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 66.8% 84.2%,rgba(255,255,255,0.83) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 55.4% 42.9%,rgba(255,255,255,0.86) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 59.0% 53.5%,rgba(255,255,255,0.48) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 70.7% 83.0%,rgba(255,255,255,0.39) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 33.0% 12.2%,rgba(255,255,255,0.31) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 24.3% 84.2%,rgba(255,255,255,0.39) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 50.3% 38.9%,rgba(255,255,255,0.79) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 63.7% 22.0%,rgba(255,255,255,0.4) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 93.6% 37.0%,rgba(255,255,255,0.77) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 19.0% 94.4%,rgba(255,255,255,0.3) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 26.9% 30.8%,rgba(255,255,255,0.93) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 30.9% 79.0%,rgba(255,255,255,0.47) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 87.4% 99.1%,rgba(255,255,255,0.66) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 93.0% 34.7%,rgba(255,255,255,0.22) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 9.3% 62.7%,rgba(255,255,255,0.52) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 89.0% 70.6%,rgba(255,255,255,0.23) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 71.0% 62.9%,rgba(255,255,255,0.87) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 91.3% 96.7%,rgba(255,255,255,0.9) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 70.3% 75.8%,rgba(255,255,255,0.25) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 69.0% 7.6%,rgba(255,255,255,0.83) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 64.6% 59.2%,rgba(255,255,255,0.69) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 16.7% 79.9%,rgba(255,255,255,0.4) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 39.0% 82.4%,rgba(255,255,255,0.85) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 72.8% 46.3%,rgba(255,255,255,0.85) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 44.8% 11.1%,rgba(255,255,255,0.93) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 24.5% 94.5%,rgba(255,255,255,0.83) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 67.4% 75.1%,rgba(255,255,255,0.5) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 90.7% 90.3%,rgba(255,255,255,0.56) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 4.5% 99.6%,rgba(255,255,255,0.43) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 72.1% 52.6%,rgba(255,255,255,0.24) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 8.7% 93.4%,rgba(255,255,255,0.61) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 68.6% 75.3%,rgba(255,255,255,0.39) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 51.4% 85.0%,rgba(255,255,255,0.61) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 55.7% 58.4%,rgba(255,255,255,0.35) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 79.0% 47.0%,rgba(255,255,255,0.81) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 91.3% 70.2%,rgba(255,255,255,0.35) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 24.0% 53.7%,rgba(255,255,255,0.95) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 10.0% 63.0%,rgba(255,255,255,0.22) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 97.6% 65.6%,rgba(255,255,255,0.2) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 34.8% 90.3%,rgba(255,255,255,0.34) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 73.4% 9.5%,rgba(255,255,255,0.79) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 9.8% 3.2%,rgba(255,255,255,0.2) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 99.0% 0.1%,rgba(255,255,255,0.94) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 47.1% 68.4%,rgba(255,255,255,0.74) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 38.1% 23.8%,rgba(255,255,255,0.64) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 36.4% 79.1%,rgba(255,255,255,0.56) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 53.9% 13.3%,rgba(255,255,255,0.48) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 60.0% 92.4%,rgba(255,255,255,0.22) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 73.2% 19.7%,rgba(255,255,255,0.47) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 57.6% 26.3%,rgba(255,255,255,0.65) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 17.5% 75.5%,rgba(255,255,255,0.51) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 12.7% 59.3%,rgba(255,255,255,0.8) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 89.3% 22.3%,rgba(255,255,255,0.86) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 17.2% 35.8%,rgba(255,255,255,0.79) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 71.3% 49.0%,rgba(255,255,255,0.64) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 22.4% 65.5%,rgba(255,255,255,0.65) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 92.0% 83.4%,rgba(255,255,255,0.65) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 77.8% 97.3%,rgba(255,255,255,0.51) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 7.0% 26.8%,rgba(255,255,255,0.5) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 20.2% 78.8%,rgba(255,255,255,0.69) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 69.9% 78.3%,rgba(255,255,255,0.48) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 6.8% 50.5%,rgba(255,255,255,0.78) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 20.5% 89.1%,rgba(255,255,255,0.9) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 20.7% 13.3%,rgba(255,255,255,0.7) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 30.2% 57.4%,rgba(255,255,255,0.91) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 58.8% 95.2%,rgba(255,255,255,0.72) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 81.9% 36.2%,rgba(255,255,255,0.28) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 8.6% 41.9%,rgba(255,255,255,0.43) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 97.6% 42.6%,rgba(255,255,255,0.68) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 34.8% 40.7%,rgba(255,255,255,0.67) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 42.0% 52.6%,rgba(255,255,255,0.72) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 31.4% 44.6%,rgba(255,255,255,0.3) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 3.6% 82.3%,rgba(255,255,255,0.4) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 92.4% 37.4%,rgba(255,255,255,0.61) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 11.5% 10.9%,rgba(255,255,255,0.76) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 65.4% 72.9%,rgba(255,255,255,0.8) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 69.8% 9.4%,rgba(255,255,255,0.2) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 82.3% 32.6%,rgba(255,255,255,0.25) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 10.1% 75.1%,rgba(255,255,255,0.84) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 15.2% 95.9%,rgba(255,255,255,0.83) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 19.8% 84.8%,rgba(255,255,255,0.62) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 17.7% 98.3%,rgba(255,255,255,0.73) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 70.4% 59.3%,rgba(255,255,255,0.94) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 27.3% 25.1%,rgba(255,255,255,0.38) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 68.8% 71.9%,rgba(255,255,255,0.47) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 33.4% 23.0%,rgba(255,255,255,0.29) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 79.1% 58.5%,rgba(255,255,255,0.47) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 34.6% 10.2%,rgba(255,255,255,0.5) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 72.7% 57.7%,rgba(255,255,255,0.78) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 27.6% 34.9%,rgba(255,255,255,0.89) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 29.7% 50.9%,rgba(255,255,255,0.92) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 21.2% 62.9%,rgba(255,255,255,0.57) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 36.7% 90.0%,rgba(255,255,255,0.95) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 41.1% 85.6%,rgba(255,255,255,0.73) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 82.5% 72.5%,rgba(255,255,255,0.21) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 79.2% 11.7%,rgba(255,255,255,0.33) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 77.7% 9.4%,rgba(255,255,255,0.42) 0 100%,transparent 100%), radial-gradient(circle 1.2px at 55.9% 10.6%,rgba(255,255,255,0.63) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 85.7% 1.2%,rgba(255,255,255,0.7) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 75.2% 14.2%,rgba(255,255,255,0.87) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 54.5% 95.6%,rgba(255,255,255,0.7) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 27.4% 52.2%,rgba(255,255,255,0.83) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 23.8% 24.8%,rgba(255,255,255,0.2) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 25.6% 58.8%,rgba(255,255,255,0.76) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 1.4% 11.6%,rgba(255,255,255,0.82) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 57.9% 58.8%,rgba(255,255,255,0.76) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 10.8% 64.3%,rgba(255,255,255,0.2) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 35.2% 16.2%,rgba(255,255,255,0.58) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 62.5% 16.7%,rgba(255,255,255,0.54) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 55.4% 81.8%,rgba(255,255,255,0.95) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 49.9% 84.6%,rgba(255,255,255,0.55) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 82.9% 97.9%,rgba(255,255,255,0.77) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 81.3% 62.9%,rgba(255,255,255,0.77) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 44.9% 12.2%,rgba(255,255,255,0.88) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 54.5% 85.4%,rgba(255,255,255,0.88) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 48.4% 72.8%,rgba(255,255,255,0.76) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 0.6% 74.7%,rgba(255,255,255,0.19) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 21.4% 24.7%,rgba(255,255,255,0.57) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 17.4% 73.1%,rgba(255,255,255,0.31) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 4.1% 66.6%,rgba(255,255,255,0.9) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 17.0% 59.5%,rgba(255,255,255,0.82) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 94.3% 62.3%,rgba(255,255,255,0.26) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 89.2% 1.7%,rgba(255,255,255,0.56) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 27.9% 67.4%,rgba(255,255,255,0.39) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 57.0% 26.0%,rgba(255,255,255,0.31) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 89.3% 19.1%,rgba(255,255,255,0.82) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 43.2% 52.0%,rgba(255,255,255,0.76) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 13.4% 92.0%,rgba(255,255,255,0.4) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 54.3% 88.7%,rgba(255,255,255,0.7) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 51.4% 42.6%,rgba(255,255,255,0.65) 0 100%,transparent 100%), radial-gradient(circle 1.5px at 57.0% 12.0%,rgba(255,255,255,0.33) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 80.3% 75.3%,rgba(255,255,255,0.26) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 64.2% 38.8%,rgba(255,255,255,0.67) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 8.0% 27.6%,rgba(255,255,255,0.3) 0 100%,transparent 100%), radial-gradient(circle 0.9px at 3.2% 4.3%,rgba(255,255,255,0.27) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 66.3% 77.4%,rgba(255,255,255,0.84) 0 100%,transparent 100%), radial-gradient(circle 1.0px at 49.6% 35.7%,rgba(255,255,255,0.68) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 46.1% 63.0%,rgba(255,255,255,0.65) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 24.5% 67.3%,rgba(255,255,255,0.71) 0 100%,transparent 100%), radial-gradient(circle 0.8px at 48.7% 92.3%,rgba(255,255,255,0.51) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 86.6% 14.3%,rgba(255,255,255,0.57) 0 100%,transparent 100%), radial-gradient(circle 0.5px at 24.7% 10.3%,rgba(255,255,255,0.94) 0 100%,transparent 100%), radial-gradient(circle 0.7px at 11.8% 69.8%,rgba(255,255,255,0.64) 0 100%,transparent 100%), radial-gradient(circle 0.6px at 8.9% 30.0%,rgba(255,255,255,0.47) 0 100%,transparent 100%), radial-gradient(circle 2px at 5.2% 42.5%,rgba(214,228,206,.95) 0 55%,rgba(214,228,206,.16) 55% 100%,transparent 100%), radial-gradient(circle 2px at 47.7% 47.3%,rgba(228,214,190,.95) 0 55%,rgba(228,214,190,.16) 55% 100%,transparent 100%), radial-gradient(circle 2px at 56.8% 79.2%,rgba(228,214,190,.95) 0 55%,rgba(228,214,190,.16) 55% 100%,transparent 100%), radial-gradient(circle 2px at 3.7% 56.0%,rgba(214,228,206,.95) 0 55%,rgba(214,228,206,.16) 55% 100%,transparent 100%), radial-gradient(circle 2px at 53.5% 17.8%,rgba(214,228,206,.95) 0 55%,rgba(214,228,206,.16) 55% 100%,transparent 100%), radial-gradient(circle 2px at 99.4% 39.1%,rgba(228,214,190,.95) 0 55%,rgba(228,214,190,.16) 55% 100%,transparent 100%), radial-gradient(circle 2px at 27.6% 58.2%,rgba(214,228,206,.95) 0 55%,rgba(214,228,206,.16) 55% 100%,transparent 100%), radial-gradient(circle 2px at 60.0% 10.8%,rgba(214,228,206,.95) 0 55%,rgba(214,228,206,.16) 55% 100%,transparent 100%), radial-gradient(circle 2px at 58.4% 0.5%,rgba(228,214,190,.95) 0 55%,rgba(228,214,190,.16) 55% 100%,transparent 100%), radial-gradient(circle 2px at 97.1% 34.3%,rgba(228,214,190,.95) 0 55%,rgba(228,214,190,.16) 55% 100%,transparent 100%), radial-gradient(circle 2px at 92.1% 77.8%,rgba(214,228,206,.95) 0 55%,rgba(214,228,206,.16) 55% 100%,transparent 100%), radial-gradient(circle 2px at 69.1% 17.3%,rgba(190,214,228,.95) 0 55%,rgba(190,214,228,.16) 55% 100%,transparent 100%), radial-gradient(circle 2px at 53.0% 52.4%,rgba(190,214,228,.95) 0 55%,rgba(190,214,228,.16) 55% 100%,transparent 100%), radial-gradient(circle 2px at 13.5% 60.9%,rgba(228,214,190,.95) 0 55%,rgba(228,214,190,.16) 55% 100%,transparent 100%); --nebula: radial-gradient(70% 120% at 18% 120%, color-mix(in srgb, var(--teal) 42%, transparent) 0%, transparent 62%), radial-gradient(60% 140% at 86% -30%, color-mix(in srgb, var(--olive) 26%, transparent) 0%, transparent 58%); --day: .72; } .sky { position: fixed; inset: 0; z-index: -2; background: #060a12; } .sky > .cosmos { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: max(var(--stars, 0), var(--depth, 0)); transition: opacity 1.4s ease; } .sky::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, #1C6FD6 calc(var(--day, 0) * 100%), color-mix(in srgb, var(--teal) 70%, var(--ink))) 0%, color-mix(in srgb, #59A6E8 calc(var(--day, 0) * 100%), color-mix(in srgb, var(--teal) 34%, var(--ink))) 42%, color-mix(in srgb, #A5D1F2 calc(var(--day, 0) * 100%), color-mix(in srgb, var(--olive) 30%, var(--ink))) 78%, color-mix(in srgb, #DCEEFB calc(var(--day, 0) * 100%), var(--ink)) 100%); filter: hue-rotate(var(--vault-hue, 0deg)) saturate(calc(var(--vault-sat, 1) * (.82 + .34 * var(--day, 0)))) brightness(calc(var(--vault-bright, 1.1) * var(--breath, 1) * .88 * (.34 + .66 * var(--moon, 1)))); opacity: calc(var(--sky-layer, 1) * (1 - var(--clear, 0))); transition: filter 1.1s ease, opacity 1.1s ease; animation: breathe 190s ease-in-out infinite; } .sky::after { content: ''; position: absolute; inset: -20%; background: radial-gradient(3.5% 7% at 50% -15%, rgba(255,253,246, calc(var(--shine, .9) * .78)) 0%, rgba(255,250,238, calc(var(--shine, .9) * .30)) 46%, transparent 76%), radial-gradient(44% 46% at 50% -15%, color-mix(in srgb, color-mix(in srgb, #fff var(--shine-white, 0%), var(--ochre)) calc(26% * var(--shine, .9)), transparent) 0%, transparent 76%), radial-gradient(150% 120% at 50% -15%, color-mix(in srgb, color-mix(in srgb, #fff var(--shine-white, 0%), var(--ochre)) calc(22% * var(--shine, .9)), transparent) 0%, transparent 86%), linear-gradient(to top, color-mix(in srgb, color-mix(in srgb, #fff var(--shine-white, 0%), var(--ochre)) calc(13% * var(--shine, .9)), transparent) 0%, transparent 42%), radial-gradient(34% 26% at 78% 18%, color-mix(in srgb, var(--teal) 34%, transparent) 0%, transparent 72%); animation: light 240s linear infinite; filter: blur(11px); } @keyframes vault { 0% { filter: hue-rotate(-6deg) saturate(.86) brightness(1.06); } 26% { filter: hue-rotate(0deg) saturate(1.00) brightness(1.14); } 58% { filter: hue-rotate(12deg) saturate(1.22) brightness(.96); } 82% { filter: hue-rotate(-14deg) saturate(1.10) brightness(.74); } 100% { filter: hue-rotate(-6deg) saturate(.86) brightness(1.06); } } @keyframes light { 0% { transform: translate3d(-1.5%, 1%, 0) scale(1.01); opacity: .86; } 34% { transform: translate3d(1%, -1%, 0) scale(1.05); opacity: .97; } 67% { transform: translate3d(2%, 1.5%, 0) scale(1.02); opacity: .90; } 100% { transform: translate3d(-1.5%, 1%, 0) scale(1.01); opacity: .86; } } .vista { --col-input: 1fr; --col-work: 3fr; --col-output: 1fr; --row-top: .3164fr; --row-mid: 1fr; --row-bot: .2379fr; column-gap: 1.1% !important; row-gap: 1.956% !important; --frame-pad: 0; --canvas-pad: 10px 12px; background: transparent !important; border: 0 !important; } .vista > .canvas > h2 { margin: 0 0 4px !important; } .vista > .canvas > p { margin: 0 !important; } .vista > .canvas { background: color-mix(in srgb, var(--panel) calc(var(--presence, 1) * 100%), transparent) !important; border: 0 !important; border-radius: 18px !important; position: relative; backdrop-filter: blur(26px) saturate(1.3) brightness(1.06); -webkit-backdrop-filter: blur(26px) saturate(1.3) brightness(1.06); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 13%, transparent), 0 1px 0 color-mix(in srgb, var(--ink) 34%, transparent) inset, 0 -1px 0 color-mix(in srgb, var(--ink) 12%, transparent) inset, inset 0 -14px 20px -16px color-mix(in srgb, var(--paper) 70%, transparent), 0 4px 10px -6px color-mix(in srgb, var(--paper) 50%, transparent); transition: box-shadow .35s ease, transform .35s ease; } .vista > .canvas::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; background: radial-gradient(70% 55% at 50% -18%, color-mix(in srgb, var(--ink) 22%, transparent) 0%, color-mix(in srgb, var(--ink) 7%, transparent) 52%, transparent 84%), linear-gradient(to bottom, color-mix(in srgb, var(--ink) 11%, transparent) 0%, color-mix(in srgb, var(--ink) 4%, transparent) 34%, transparent 68%), radial-gradient(90% 46% at 50% 104%, color-mix(in srgb, var(--teal) 14%, transparent) 0%, transparent 70%); background-attachment: fixed; background-repeat: no-repeat; } .vista > .canvas[data-screen] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent), 0 1px 0 color-mix(in srgb, var(--ink) 44%, transparent) inset, 0 -1px 0 color-mix(in srgb, var(--ink) 16%, transparent) inset, 0 5px 12px -7px color-mix(in srgb, var(--paper) 55%, transparent); } .vista > .canvas > h2 { color: color-mix(in srgb, var(--ink) 78%, transparent) !important; text-shadow: 0 0 3px color-mix(in srgb, var(--paper) 72%, transparent); } .vista > .canvas > p, .vista > .canvas .big, .vista > .canvas .sub { color: var(--ink) !important; text-shadow: 0 0 2px color-mix(in srgb, var(--paper) 82%, transparent), 0 1px 3px color-mix(in srgb, var(--paper) 78%, transparent), 0 0 14px color-mix(in srgb, var(--paper) 58%, transparent); } @media (prefers-reduced-motion: reduce) { .sky::before, .sky::after { animation: none; } } .gala-full .vista { width: var(--frame-w); max-width: none; margin-inline: auto; } .gala-full { padding: 0 !important; max-width: none !important; } .vista > .canvas > h2 { color: color-mix(in srgb, var(--ink) 72%, transparent) !important; } .vista > .canvas > p { color: var(--ink) !important; } .clouds { position: absolute; inset: 0; width: 100%; height: 100%; opacity: calc(var(--cloud, .5) * (1 - var(--depth, 0) * .85)); transition: opacity 1.1s ease; mix-blend-mode: screen; } .clouds .layer-a { animation: cloud-a 420s linear infinite; opacity: .95; } .clouds .layer-b { animation: cloud-b 680s linear infinite; opacity: .62; } .clouds .layer-a { animation: cloud-a 420s linear infinite; opacity: .95; } .clouds .layer-b { animation: cloud-b 680s linear infinite; opacity: .62; } @keyframes cloud-a { from { transform: translateX(0) scale(1); } to { transform: trans lateX(-28%) scale(1.14); } } @keyframes cloud-b { from { transform: translateX(-10%) scale(1.06); } to { transform: translateX(22%) scale(1); } } @media (prefers-reduced-motion: reduce) { .clouds .layer-a, .clouds .layer-b { animation: none; } } .vista > .canvas[data-space="talk"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #060a12 !important; overflow: hidden; } .vista > .canvas[data-space="talk"] .void { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; border-radius: inherit; } .vista > .canvas[data-space="talk"] .ask { z-index: 2; } .vista > .canvas[data-space="talk"] .ask input { text-align: center; } @keyframes cosmos { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.22) translate3d(-2.5%, 1.5%, 0); } } @media (prefers-reduced-motion: reduce) { .vista > .canvas[data-space="talk"] .void { animation: none; } } .sky .night { position: absolute; inset: 0; background-image: var(--nebula); background-size: cover; background-repeat: no-repeat; opacity: calc(max(var(--stars, 0), var(--depth, 0)) * (.45 + .55 * var(--moon, 1)) * (1 - var(--clear, 0))); transition: opacity 1.4s ease; animation: cosmos 900s linear infinite alternate; } @media (prefers-reduced-motion: reduce) { .sky .night { animation: none; } } :root { --rail: 3.25rem; --frame-w: min(calc(100vw - 2.5rem - var(--rail)), calc((100dvh - var(--chrome, 8.5rem)) * 16 / 9)); --gutter: calc((100vw - var(--frame-w)) / 2); } .scale { position: fixed; right: calc(var(--gutter) / 2); top: 50%; translate: 50% -50%; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: .42; transition: opacity .3s ease; } .scale:hover, .scale:focus-within { opacity: 1; } .scale input { writing-mode: vertical-lr; direction: rtl; width: 20px; height: 84px; accent-color: var(--ink); cursor: ns-resize; } .scale .pair { display: grid; grid-template-columns: auto auto; grid-template-areas: "name track" "name value"; align-items: center; justify-items: center; gap: 3px 2px; } .scale .name { grid-area: name; font: 600 9px/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: .62; writing-mode: vertical-rl; text-orientation: mixed; } .scale output { grid-area: value; font: 600 9px/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--ink); opacity: .85; min-width: 20px; text-align: center; } @media (hover: hover) { .vista > .canvas:not([data-space="talk"]) { transition: background-color .34s ease, box-shadow .34s ease, backdrop-filter .34s ease, opacity .34s ease; } .vista > .canvas:not([data-space="talk"]):hover, .vista > .canvas:not([data-space="talk"]):focus-within { --lift: 8%; backdrop-filter: blur(3px) saturate(2.5) brightness(1.3) contrast(1.2); -webkit-backdrop-filter: blur(3px) saturate(2.5) brightness(1.3) contrast(1.2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent), 0 1px 0 color-mix(in srgb, var(--ink) 62%, transparent) inset, 0 -1px 0 color-mix(in srgb, var(--ink) 26%, transparent) inset, 0 0 26px -6px color-mix(in srgb, var(--ink) 22%, transparent) inset, 0 4px 10px -6px color-mix(in srgb, var(--paper) 58%, transparent); } .vista > .canvas:not([data-space="talk"]):hover::before, .vista > .canvas:not([data-space="talk"]):focus-within::before { background: radial-gradient(120% 70% at 12% -10%, color-mix(in srgb, var(--ink) 26%, transparent) 0%, transparent 58%), linear-gradient(to bottom, color-mix(in srgb, var(--ink) 16%, transparent) 0%, color-mix(in srgb, var(--ink) 4%, transparent) 30%, transparent 56%); } .vista:has(> .canvas:not([data-space="talk"]):hover) > .canvas:not([data-space="talk"]):not(:hover), .vista:has(> .canvas:not([data-space="talk"]):focus-within) > .canvas:not([data-space="talk"]):not(:focus-within) { --tint: 2%; opacity: .82; } .vista:has(> .canvas:hover) > .canvas[data-space="talk"], .vista:has(> .canvas:focus-within) > .canvas[data-space="talk"] { opacity: 1; } } @media (hover: none) { .vista > .canvas { --tint: 7%; } } @media (hover: hover) { .vista > .canvas:not([data-space="talk"]):hover > h2, .vista > .canvas:not([data-space="talk"]):focus-within > h2 { color: color-mix(in srgb, var(--ink) 92%, transparent) !important; } .vista > .canvas:not([data-space="talk"]):hover .big, .vista > .canvas:not([data-space="talk"]):hover .sub, .vista > .canvas:not([data-space="talk"]):hover p, .vista > .canvas:not([data-space="talk"]):hover li, .vista > .canvas:not([data-space="talk"]):focus-within .big, .vista > .canvas:not([data-space="talk"]):focus-within .sub, .vista > .canvas:not([data-space="talk"]):focus-within p, .vista > .canvas:not([data-space="talk"]):focus-within li { color: var(--ink) !important; opacity: 1 !important; text-shadow: 0 0 2px color-mix(in srgb, var(--paper) 88%, transparent), 0 1px 3px color-mix(in srgb, var(--paper) 82%, transparent), 0 0 14px color-mix(in srgb, var(--paper) 62%, transparent); } .vista > .canvas:not([data-space="talk"]):hover video, .vista > .canvas:not([data-space="talk"]):hover img, .vista > .canvas:not([data-space="talk"]):focus-within video, .vista > .canvas:not([data-space="talk"]):focus-within img { filter: saturate(1.12) brightness(1.08) contrast(1.04); transition: filter .34s ease; } .vista > .canvas:not([data-space="talk"]):hover::before, .vista > .canvas:not([data-space="talk"]):focus-within::before { filter: brightness(1.45) saturate(1.1); } } .vista { --presence: 1; --night-panel: #0a0f18; --sky-tint: color-mix(in srgb, var(--teal) calc(var(--t, 0) * 30%), var(--night-panel)); } :root { --dark: 0; } .vista > .canvas:not([data-space="talk"]) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) calc((15% - 6% * var(--dark)) * var(--presence)), transparent), 0 1px 0 color-mix(in srgb, var(--ink) calc(30% * var(--presence)), transparent) inset, 0 -1px 0 color-mix(in srgb, var(--ink) calc(12% * var(--presence)), transparent) inset, inset 0 -14px 20px -16px color-mix(in srgb, var(--paper) 70%, transparent), 0 5px 12px -7px color-mix(in srgb, var(--paper) calc(62% * (1 - var(--dark)) * var(--presence)), transparent), 0 0 13px -5px color-mix(in srgb, #cfe4ff calc(34% * var(--dark) * var(--presence)), transparent); } .vista > .canvas { --lift: 0%; --panel: color-mix(in srgb, var(--ink) calc(var(--moon, 1) * 10% + var(--lift)), var(--sky-tint)); } @media (hover: hover) { .vista > .canvas:not([data-space="talk"]) { background: color-mix(in srgb, var(--panel) calc(var(--presence, 1) * 100%), transparent) !important; backdrop-filter: saturate(calc(1 + 1.1 * var(--presence))) brightness(calc((1 + .22 * var(--presence)) * (.3 + .7 * var(--moon, 1)))) contrast(calc(1 + .14 * var(--presence))); -webkit-backdrop-filter: saturate(calc(1 + 1.1 * var(--presence))) brightness(calc((1 + .22 * var(--presence)) * (.3 + .7 * var(--moon, 1)))) contrast(calc(1 + .14 * var(--presence))); } } .vista > .canvas:not([data-space="talk"]) { opacity: var(--presence); } :root { --moon: 1; } .vista > .canvas:not([data-space="talk"]) > :is(img, video, canvas, .strip, .tick) { filter: brightness(calc(.3 + .7 * var(--moon, 1))); transition: filter .2s ease; } .vista > .canvas:not([data-space="talk"])::before { opacity: var(--presence); } .vista > .canvas.dissolved { --presence: 0 !important; } .vista > .canvas[data-space="talk"] { opacity: 1 !important; } .vista > .canvas[data-space="ledger"] > h2, .vista > .canvas[data-space="figure"] > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .vista > .canvas[data-space="ledger"], .vista > .canvas[data-space="figure"] { display: flex; flex-direction: column; justify-content: center; } .vista > .canvas[data-space="talk"]::before { background: linear-gradient(104deg, transparent 26%, color-mix(in srgb, var(--ink) 7%, transparent) 44%, color-mix(in srgb, var(--ink) 14%, transparent) 50%, color-mix(in srgb, var(--ink) 7%, transparent) 56%, transparent 74%), radial-gradient(150% 220% at 8% -60%, color-mix(in srgb, var(--ink) 14%, transparent) 0%, color-mix(in srgb, var(--ink) 4%, transparent) 38%, transparent 70%); background-attachment: scroll; background-size: 260% 100%, 100% 100%; background-position: 160% 0, 0 0; background-repeat: no-repeat; animation: sheen 19s cubic-bezier(.45,0,.3,1) infinite; z-index: 1; } @keyframes sheen { 0%, 78% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } } @media (prefers-reduced-motion: reduce) { .vista > .canvas[data-space="talk"]::before { animation: none; } } .vista > .canvas[data-space="talk"] { --merge: max(var(--depth, 0), var(--stars, 0)); background-color: rgba(6, 10, 18, calc((1 - var(--merge) * .94) * var(--presence, 1) * .62)) !important; transition: background-color 1.4s ease, box-shadow 1.4s ease; } .vista > .canvas[data-space="talk"]::before { opacity: calc((1 - var(--merge)) * var(--presence, 1)); } .vista > .canvas[data-space="talk"] .void { opacity: calc(1 - var(--merge)); transition: opacity 1.4s ease; } .vista > .canvas[data-space="talk"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) calc(34% * var(--presence, 1)), transparent), 0 1px 0 color-mix(in srgb, var(--ink) calc(62% * var(--presence, 1)), transparent) inset, 0 -1px 0 color-mix(in srgb, var(--ink) calc(28% * var(--presence, 1)), transparent) inset, 0 0 22px -6px color-mix(in srgb, var(--ink) calc(20% * var(--presence, 1)), transparent) inset, 0 6px 14px -8px color-mix(in srgb, var(--paper) calc(52% * var(--presence, 1)), transparent); }