@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}}
.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;transform-style:preserve-3d;z-index:1;border-radius:50%;position:absolute;top:3vmax;left:16%;transform:translate(0)translateY(0)}.planet{width:calc(12vmax * var(--planet-scale));aspect-ratio:1;filter:blur(.05vmax);transform-style:preserve-3d;animation:float-planet var(--time) ease-in-out infinite;background:radial-gradient(90% 90% at 60% 55%,#252525,#2a2f33 52%,#ede9ea 62%),#ede9ea;border-radius:50%;position:absolute;top:25vmax;left:2%;transform:translate(0)translateY(0);box-shadow:0 0 2.5vmax #ffffff1f}.planet-2{transform-style:preserve-3d;width:calc(9vmax * var(--planet-scale));aspect-ratio:1;animation:float-planet-reverse var(--time) ease-in-out infinite;background:radial-gradient(90% 90% at 60% 55%,#e3e3e3,#d2c6c8 52%,#212528 62%,#0000 82%);border-radius:50%;position:absolute;top:6vmax;right:6%}.planet-3{transform-style:preserve-3d;width:calc(2vmax * var(--planet-scale));aspect-ratio:1;opacity:.6;background:radial-gradient(90% 90% at 70%,#eee 16%,#b7aeb0 38%,#3c4144 52%,#2d3134 60%,#0000 82%);border-radius:50%;animation:20s ease-in-out infinite float-planet-small;position:absolute;top:46vmax;left:15%}.planet-4{transform-style:preserve-3d;width:calc(1vmax * var(--planet-scale));aspect-ratio:1;opacity:.5;background:radial-gradient(90% 90% at 70%,#d0d0d0,#b7aeb0 38%,#121415 52%,#131617 60%,#0000 82%);border-radius:50%;animation:18s ease-in-out infinite reverse float-planet-small;position:absolute;top:45vmax;left:8%}.planet-5{transform-style:preserve-3d;width:calc(7.5vmax * var(--planet-scale));aspect-ratio:1;clip-path:circle();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 .structure-1,.planet-5 .structure-2,.planet-5 .structure-3{filter:url(#planet-structure)saturate(0);mix-blend-mode:lighten;animation:move-to-left calc(var(--time) * 6) ease-in-out infinite;position:absolute;inset:-20vmax}.planet-5 .structure-1{opacity:.4;transform:scale(4)translate(1vmax)}.planet-5 .structure-2{opacity:.5;transform:scale(7.5)}.planet-5 .structure-3{opacity:.1;transform:scale(.2)translate(1vmax)}.planet-5:after{content:"";background:radial-gradient(circle at 5% 20%,#0000 30%,#171a1c 60%);position:absolute;inset:0}@keyframes move-to-left{0%{translate:0}50%{translate:-100%}to{translate:0}}.planet-6{transform-style:preserve-3d;width:calc(5.04vmax * var(--planet-scale));aspect-ratio:1;filter:blur(.06rem);background:radial-gradient(90% 90% at 30% 55%,#f3ecec,#7a7a7a 52%,#212528 72%,#0000);border-radius:50%;place-items:center;animation:19s ease-in-out infinite reverse float-planet;display:grid;position:absolute;top:45vmax;left:auto;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);box-shadow:inset 0 0 1rem #000;-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(.5vmax)}.planet-6:after{border:calc(2.08vmax * var(--planet-scale)) solid #43484c}@media (max-width:768px){.planet-5 .structure-1,.planet-5 .structure-2,.planet-5 .structure-3{display:none!important}.sun{box-shadow:0 0 8vmax var(--sun-glow)!important}.planet,.planet-5,.planet-6,.planet-6:before{filter:none!important}}
.cuboid{transform-style:preserve-3d;--size:8vmax;--size-h:calc(var(--size) / 2);--size-h-n:calc(var(--size) / -2);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) translateZ(var(--size-h-n));opacity:.9;background:linear-gradient(135deg,#e8dbdd,#989699)}.cuboid .front{width:var(--size);aspect-ratio:1/2;opacity:.5;transform:translateZ(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);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)}}