@property --shadow-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --space{syntax:"<length>";inherits:true;initial-value:0}@property --moon-angle{syntax:"<angle>";inherits:true;initial-value:0deg}@keyframes float-planet{0%{transform:translateY(0)translate(0)}50%{transform:translateY(-15px)translate(10px)}to{transform:translateY(0)translate(0)}}@keyframes float-planet-reverse{0%{transform:translateY(0)translate(0)}50%{transform:translateY(-12px)translate(-8px)}to{transform:translateY(0)translate(0)}}@keyframes float-planet-small{0%{transform:translateY(0)translate(0)}50%{transform:translateY(-8px)translate(5px)}to{transform:translateY(0)translate(0)}}.scene-wrapper{--time:24s;--planet-scale:.94;--sun-center:#fff;--sun-mid:#f5f5f5;--sun-edge:#8f8f8f;--sun-glow:#ffffff73;--h-main:#d2c6c8;--h-shade1:#a9a1a3;--h-shade2:#212528;perspective:80vmax;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}@media (min-width:1000px) and (min-height:800px){.scene-wrapper{--planet-scale:.75}}@media (min-width:1200px) and (min-height:900px){.scene-wrapper{--planet-scale:.75}}.scene-container{animation:scene-zoom-in-out var(--time) ease-in-out infinite;transform-style:preserve-3d;place-items:center;width:100%;height:100%;display:grid;position:absolute}@keyframes scene-zoom-in-out{0%{transform:scale(.9)}50%{transform:scale(1)}to{transform:scale(.9)}}@media (max-width:768px){.sun{box-shadow:0 0 8vmax var(--sun-glow)!important}}
:root{--planet-scale:1;--sun-glow:#fa6;--sun-center:#fff5e0;--sun-mid:#fc8;--sun-edge:#fa6;--time:20s}.sun{width:calc(14vmax * var(--planet-scale));aspect-ratio:1;background:radial-gradient(circle at 60% 60%, var(--sun-center), var(--sun-mid), var(--sun-edge));box-shadow:0 0 14vmax var(--sun-glow), 0 0 22vmax var(--sun-glow), 0 0 42vmax #ffffff26;z-index:1;will-change:transform;border-radius:50%;position:absolute;top:1.5vmax;left:6%}.planet{width:calc(12vmax * var(--planet-scale));aspect-ratio:1;animation:float-planet var(--time) ease-in-out infinite;will-change:transform;background:radial-gradient(90% 90% at 60% 55%,#2a2f33,#1e1e1e 52%,#ede9ea 62%);border-radius:50%;position:absolute;top:25vmax;left:2%;box-shadow:0 0 2vmax #0000004d}.planet-2{width:calc(9vmax * var(--planet-scale));aspect-ratio:1;animation:float-planet-reverse var(--time) ease-in-out infinite;will-change:transform;background:radial-gradient(90% 90% at 60% 55%,#e3e3e3,#d2c6c8 52%,#212528 62%);border-radius:50%;position:absolute;top:6vmax;right:6%}.planet-3{width:calc(2vmax * var(--planet-scale));aspect-ratio:1;opacity:.6;will-change:transform;background:radial-gradient(90% 90% at 70%,#eee,#b7aeb0 38%,#3c4144 52%,#2d3134 60%);border-radius:50%;animation:20s ease-in-out infinite float-planet-small;position:absolute;top:46vmax;left:15%}.planet-4{width:calc(1vmax * var(--planet-scale));aspect-ratio:1;opacity:.5;will-change:transform;background:radial-gradient(90% 90% at 70%,#d0d0d0,#b7aeb0 38%,#121415 52%,#131617 60%);border-radius:50%;animation:18s ease-in-out infinite reverse float-planet-small;position:absolute;top:45vmax;left:8%}.planet-5{width:calc(7.5vmax * var(--planet-scale));aspect-ratio:1;will-change:transform;filter:blur(.03rem);background:radial-gradient(90% 90% at 30% 55%,#797777,#515051 52%,#212528 62%,#0000 82%);border-radius:50%;animation:22s ease-in-out infinite float-planet;position:absolute;top:30vmax;right:2%;overflow:hidden}.planet-5:before,.planet-5:after{content:"";pointer-events:none;border-radius:50%;position:absolute;inset:0}.planet-5:before{mix-blend-mode:overlay;background:repeating-radial-gradient(circle at 30% 40%,#0003 0,#0000001a 2px,#0000 4px 8px)}.planet-5:after{background:radial-gradient(circle at 70% 60%,#0000 60%,#0006 100%)}.planet-6{width:calc(5.04vmax * var(--planet-scale));aspect-ratio:1;will-change:transform;background:radial-gradient(90% 90% at 30% 55%,#f3ecec,#7a7a7a 52%,#212528 72%);border-radius:50%;place-items:center;animation:19s ease-in-out infinite reverse float-planet;display:grid;position:absolute;top:45vmax;right:12%}.planet-6:before,.planet-6:after{content:"";width:calc(9.6vmax * var(--planet-scale));height:calc(.8vmax * var(--planet-scale));clip-path:ellipse(47% 22%);border-radius:50%;position:absolute;transform:rotate(25deg);-webkit-mask:radial-gradient(circle at 50% -20%,#0000 30%,#000);mask:radial-gradient(circle at 50% -20%,#0000 30%,#000)}.planet-6:before{border:calc(.8vmax * var(--planet-scale)) solid #5e5e5e;filter:blur(.3vmax)}.planet-6:after{border:calc(2.08vmax * var(--planet-scale)) solid #43484c}@keyframes float-planet{0%,to{transform:translate(0,0)}50%{transform:translate(2%,-3%)}}@keyframes float-planet-reverse{0%,to{transform:translate(0,0)}50%{transform:translate(-2%,-3%)}}@keyframes float-planet-small{0%,to{transform:translate(0,0)}50%{transform:translate(1.5%,-2%)}}@media (max-width:768px){.sun{box-shadow:0 0 12vmax var(--sun-glow)}.planet-5:before{display:none}.planet-6:before{filter:none}}
@property --space{syntax:"<length>";inherits:false;initial-value:0}.cuboid{transform-style:preserve-3d;--size:8vmax;--size-h:calc(var(--size) / 2);--size-h-n:calc(var(--size) / -2);will-change:transform;position:absolute;bottom:18.5vh;left:50%;transform:translate(-50%)rotateY(312deg)rotateX(350deg)rotate(10deg)}.cuboid .top{width:var(--size);aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(90deg) translate3d(0, 0, var(--size-h-n));opacity:.9;background:linear-gradient(135deg,#e8dbdd,#989699)}.cuboid .front{width:var(--size);aspect-ratio:1/2;opacity:.5;transform:translate3d(0, 0, var(--size-h));background:linear-gradient(#5f595d,#0000 60%);position:absolute}.cuboid .right{width:var(--size);aspect-ratio:1/2;transform:translate3d(var(--size-h), 0, 0) rotateY(90deg);opacity:.7;background:linear-gradient(#5f595d 10%,#0000 90%);position:absolute;-webkit-mask:radial-gradient(150% 120% at 0 0,#000,#0000);mask:radial-gradient(150% 120% at 0 0,#000,#0000)}.cuboid .outline{--space:0vmax;--space-h:calc(var(--size) / 2);width:var(--size);aspect-ratio:1;translate:calc(-50% + var(--space-h)) calc(-50% + var(--space-h));padding:var(--space);--duration:16s;animation:outline-animation var(--duration) 0s cubic-bezier(.68, .27, .26, .91) infinite;opacity:0;--initial-space:var(--size-h);will-change:padding, opacity, filter;border:.0125vmax solid #fff;transition:all 3s ease-in-out;position:absolute;box-shadow:inset 0 0 .5vmax #fff6,0 0 .5vmax #fff6}.cuboid .outline:nth-of-type(2){animation-delay:calc(var(--duration) / 4)}.cuboid .outline:nth-of-type(3){animation-delay:calc(var(--duration) / 4 * 2)}.cuboid .outline:nth-of-type(4){animation-delay:calc(var(--duration) / 4 * 3)}@keyframes outline-animation{0%{--space:var(--initial-space,0vmax);opacity:0;filter:blur(0)}5%{opacity:.2}40%{opacity:.5}60%{opacity:.05;filter:blur(0)}80%{opacity:0}to{--space:calc(var(--initial-space,0vmax) + 25vmax);opacity:0;filter:blur(.6vmax)}}