@charset "UTF-8";
@layer tokens {
  :root {
    --color-primary: rgba(220, 219, 219, 0.78);
    --color-surface: #242425;
    --time: 24s;
  }
}
@property --shadow-color {
  syntax: "<color>";
  initial-value: transparent;
  inherits: true;
}
@layer stars {
  .stars {
    position: absolute;
    width: 100vmax;
    height: 100vmax;
  }
  .stars:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    filter: url(#stars) saturate(0) brightness(1.5);
    mix-blend-mode: overlay;
    opacity: 0.15;
    -webkit-animation: stars-animation 20s ease-in-out infinite;
            animation: stars-animation 20s ease-in-out infinite;
  }

  .stars-highlights {
    position: absolute;
    width: 100vw;
    height: 100vh;
    opacity: 0.6;
  }
  .stars-highlights:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    filter: url(#stars-highlights) saturate(0) brightness(1.5);
    mix-blend-mode: lighten;
    opacity: 0.2;
    -webkit-animation: stars-animation-2 20s ease-in-out infinite;
            animation: stars-animation-2 20s ease-in-out infinite;
  }

  @-webkit-keyframes stars-animation {
    from {
      translate: 1vmin 2vmin;
      rotate: 0deg;
    }
    30% {
      translate: 1vmin -2vmin;
    }
    50% {
      translate: -1vmin 2vmin;
      rotate: 10deg;
    }
    to {
      translate: 1vmin 2vmin;
      rotate: 0deg;
    }
  }

  @keyframes stars-animation {
    from {
      translate: 1vmin 2vmin;
      rotate: 0deg;
    }
    30% {
      translate: 1vmin -2vmin;
    }
    50% {
      translate: -1vmin 2vmin;
      rotate: 10deg;
    }
    to {
      translate: 1vmin 2vmin;
      rotate: 0deg;
    }
  }
  @-webkit-keyframes stars-animation-2 {
    from {
      translate: 1vmin -2vmin;
    }
    30% {
      translate: -1vmin -2vmin;
    }
    50% {
      translate: 1vmin -2vmin;
    }
    to {
      translate: 1vmin -2vmin;
    }
  }
  @keyframes stars-animation-2 {
    from {
      translate: 1vmin -2vmin;
    }
    30% {
      translate: -1vmin -2vmin;
    }
    50% {
      translate: 1vmin -2vmin;
    }
    to {
      translate: 1vmin -2vmin;
    }
  }
  .startails {
    position: absolute;
    inset: 0;
    opacity: 0.6;
  }
  .startails > div {
    --distance: 20vmax;
    border-radius: 50%;
    width: 0.55vmax;
    aspect-ratio: 3/1;
    background: white;
    translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
    opacity: 0;
    -webkit-animation: startails-animation 10s calc(var(--delay) * var(--time) * 6) linear infinite;
            animation: startails-animation 10s calc(var(--delay) * var(--time) * 6) linear infinite;
    box-shadow: 0 0 0.2vmax white;
  }
  .startails > div:nth-of-type(1) {
    --x: 0.9239338455;
    --y: 0.1052435662;
    --x2: -0.3246818955;
    --y2: 0.1339112019;
    --delay: 0.005109258;
  }
  .startails > div:nth-of-type(2) {
    --x: 0.8690937273;
    --y: 0.2153893192;
    --x2: 0.1290011743;
    --y2: 0.1137192302;
    --delay: 0.8847356878;
  }
  .startails > div:nth-of-type(3) {
    --x: 0.9809324484;
    --y: 0.3610207792;
    --x2: -0.1783996871;
    --y2: -0.2599762439;
    --delay: 0.9974770027;
  }
  .startails > div:nth-of-type(4) {
    --x: 0.6355527502;
    --y: 0.5044284223;
    --x2: 0.2451877135;
    --y2: 0.1943292089;
    --delay: 0.6728076503;
  }
  .startails > div:nth-of-type(5) {
    --x: 0.6205128636;
    --y: 0.9994774626;
    --x2: 0.1220526687;
    --y2: -0.0582780754;
    --delay: 0.0717762692;
  }
  .startails > div:nth-of-type(6) {
    --x: 0.440227765;
    --y: 0.4069667438;
    --x2: -0.0820744697;
    --y2: 0.4657345963;
    --delay: 0.0024197834;
  }
  .startails > div:nth-of-type(7) {
    --x: 0.0972947828;
    --y: 0.2705293872;
    --x2: -0.3176547945;
    --y2: -0.1246601278;
    --delay: 0.0392076904;
  }
  .startails > div:nth-of-type(8) {
    --x: 0.5683022883;
    --y: 0.679647103;
    --x2: -0.4807579255;
    --y2: 0.4159430579;
    --delay: 0.1178697277;
  }
  .startails > div:nth-of-type(9) {
    --x: 0.23850077;
    --y: 0.4967811489;
    --x2: 0.0828167009;
    --y2: -0.3485599994;
    --delay: 0.1056212974;
  }
  .startails > div:nth-of-type(10) {
    --x: 0.0571668729;
    --y: 0.221449978;
    --x2: 0.4420078728;
    --y2: 0.0975859544;
    --delay: 0.586514473;
  }
  .startails > div:nth-of-type(11) {
    --x: 0.4763892468;
    --y: 0.2696830082;
    --x2: 0.1317709225;
    --y2: -0.2081661606;
    --delay: 0.5119447;
  }
  .startails > div:nth-of-type(12) {
    --x: 0.4673916842;
    --y: 0.0379768244;
    --x2: -0.3612684768;
    --y2: 0.3738275718;
    --delay: 0.2857778916;
  }
  .startails > div:nth-of-type(13) {
    --x: 0.7370089374;
    --y: 0.9393892322;
    --x2: 0.3448639608;
    --y2: -0.351873153;
    --delay: 0.2292269203;
  }
  .startails > div:nth-of-type(14) {
    --x: 0.5552040564;
    --y: 0.0783374868;
    --x2: -0.2443437747;
    --y2: 0.2318637288;
    --delay: 0.938939457;
  }
  .startails > div:nth-of-type(15) {
    --x: 0.2605622171;
    --y: 0.8693796338;
    --x2: -0.2988218443;
    --y2: -0.4703097443;
    --delay: 0.0636276176;
  }
  .startails > div:nth-of-type(16) {
    --x: 0.0326678301;
    --y: 0.5782726873;
    --x2: 0.2941658902;
    --y2: -0.1541432106;
    --delay: 0.5605195411;
  }
  .startails > div:nth-of-type(17) {
    --x: 0.1445655972;
    --y: 0.9442214839;
    --x2: -0.2928567074;
    --y2: 0.0883129026;
    --delay: 0.8604789375;
  }
  .startails > div:nth-of-type(18) {
    --x: 0.5196573746;
    --y: 0.41345856;
    --x2: 0.4230247739;
    --y2: 0.3869122745;
    --delay: 0.5429523614;
  }
  .startails > div:nth-of-type(19) {
    --x: 0.8668888809;
    --y: 0.9038438276;
    --x2: -0.3873277724;
    --y2: -0.4046597612;
    --delay: 0.5150285398;
  }
  .startails > div:nth-of-type(20) {
    --x: 0.757977011;
    --y: 0.3554997594;
    --x2: 0.1611589418;
    --y2: 0.0054005921;
    --delay: 0.949402792;
  }
  .startails > div:nth-of-type(21) {
    --x: 0.8709089118;
    --y: 0.963281753;
    --x2: 0.0940619337;
    --y2: -0.3141425545;
    --delay: 0.6691385642;
  }
  .startails > div:nth-of-type(22) {
    --x: 0.0559341855;
    --y: 0.1410869812;
    --x2: -0.1666290168;
    --y2: 0.1885671322;
    --delay: 0.1621730088;
  }
  .startails > div:nth-of-type(23) {
    --x: 0.2045640277;
    --y: 0.6361516863;
    --x2: 0.0374426986;
    --y2: -0.1092930663;
    --delay: 0.3038183005;
  }
  .startails > div:nth-of-type(24) {
    --x: 0.8105876114;
    --y: 0.8846697703;
    --x2: 0.2992855168;
    --y2: -0.1373668377;
    --delay: 0.798247261;
  }
  .startails > div:nth-of-type(25) {
    --x: 0.2689108721;
    --y: 0.1617836384;
    --x2: 0.1463532191;
    --y2: 0.4605986448;
    --delay: 0.6091168874;
  }
  .startails > div:nth-of-type(26) {
    --x: 0.3866768553;
    --y: 0.4879198284;
    --x2: -0.4841487286;
    --y2: 0.064177383;
    --delay: 0.4605015374;
  }
  .startails > div:nth-of-type(27) {
    --x: 0.5242744196;
    --y: 0.4474683132;
    --x2: 0.0506672227;
    --y2: 0.0148320784;
    --delay: 0.2134809762;
  }
  .startails > div:nth-of-type(28) {
    --x: 0.2311062231;
    --y: 0.8735832921;
    --x2: -0.0601840522;
    --y2: -0.2320255136;
    --delay: 0.3967548989;
  }
  .startails > div:nth-of-type(29) {
    --x: 0.9466701993;
    --y: 0.0236494815;
    --x2: 0.3105470221;
    --y2: 0.334263457;
    --delay: 0.2344359337;
  }
  .startails > div:nth-of-type(30) {
    --x: 0.8927513645;
    --y: 0.52342241;
    --x2: -0.3200647461;
    --y2: -0.1100681088;
    --delay: 0.1572844263;
  }
  .startails > div:nth-of-type(31) {
    --x: 0.1545130638;
    --y: 0.3596031395;
    --x2: -0.0941262113;
    --y2: -0.1855865216;
    --delay: 0.9359079413;
  }
  .startails > div:nth-of-type(32) {
    --x: 0.182431791;
    --y: 0.8395320573;
    --x2: 0.3142889925;
    --y2: 0.3595518892;
    --delay: 0.5353445436;
  }
  .startails > div:nth-of-type(33) {
    --x: 0.6503150701;
    --y: 0.6677545409;
    --x2: -0.0050230686;
    --y2: 0.2383578314;
    --delay: 0.0632838996;
  }
  .startails > div:nth-of-type(34) {
    --x: 0.6840075792;
    --y: 0.170592014;
    --x2: -0.0133699215;
    --y2: 0.4652487785;
    --delay: 0.5335803046;
  }
  .startails > div:nth-of-type(35) {
    --x: 0.0837074496;
    --y: 0.1991693111;
    --x2: 0.1450160158;
    --y2: -0.4832836894;
    --delay: 0.2336620812;
  }
  .startails > div:nth-of-type(36) {
    --x: 0.3800243336;
    --y: 0.7413706399;
    --x2: -0.2061607131;
    --y2: 0.0068874914;
    --delay: 0.8515043347;
  }
  .startails > div:nth-of-type(37) {
    --x: 0.1336628075;
    --y: 0.3016092857;
    --x2: -0.1325942049;
    --y2: 0.0506960898;
    --delay: 0.5221126486;
  }
  .startails > div:nth-of-type(38) {
    --x: 0.9333735147;
    --y: 0.93306401;
    --x2: 0.3937814109;
    --y2: -0.0683727989;
    --delay: 0.4278522614;
  }
  .startails > div:nth-of-type(39) {
    --x: 0.3714774043;
    --y: 0.1940083928;
    --x2: -0.3002819579;
    --y2: 0.009682477;
    --delay: 0.7911900858;
  }
  .startails > div:nth-of-type(40) {
    --x: 0.9155669866;
    --y: 0.4107014977;
    --x2: 0.0149112942;
    --y2: -0.4613279239;
    --delay: 0.7214570281;
  }
  .startails > div:nth-of-type(41) {
    --x: 0.0986768795;
    --y: 0.7770809922;
    --x2: 0.406854417;
    --y2: 0.3753462801;
    --delay: 0.5180950819;
  }
  .startails > div:nth-of-type(42) {
    --x: 0.4448754644;
    --y: 0.5950967464;
    --x2: -0.427418115;
    --y2: -0.4290169958;
    --delay: 0.4978415369;
  }
  .startails > div:nth-of-type(43) {
    --x: 0.2145002094;
    --y: 0.1953541595;
    --x2: 0.1285817195;
    --y2: 0.1389011375;
    --delay: 0.6752930505;
  }
  .startails > div:nth-of-type(44) {
    --x: 0.1008575665;
    --y: 0.556495832;
    --x2: 0.2509514501;
    --y2: -0.0426636658;
    --delay: 0.8882376357;
  }
  .startails > div:nth-of-type(45) {
    --x: 0.9981966766;
    --y: 0.9826429103;
    --x2: -0.3639318762;
    --y2: -0.3323520479;
    --delay: 0.6374029718;
  }
  .startails > div:nth-of-type(46) {
    --x: 0.1436517102;
    --y: 0.3938123948;
    --x2: -0.4520998838;
    --y2: -0.0072749747;
    --delay: 0.5602089153;
  }
  .startails > div:nth-of-type(47) {
    --x: 0.6418684175;
    --y: 0.9642424617;
    --x2: 0.4699737629;
    --y2: 0.2519202004;
    --delay: 0.6420858635;
  }
  .startails > div:nth-of-type(48) {
    --x: 0.9885119713;
    --y: 0.4804046742;
    --x2: 0.225245028;
    --y2: 0.4026003053;
    --delay: 0.6381410351;
  }
  .startails > div:nth-of-type(49) {
    --x: 0.290399731;
    --y: 0.8667709551;
    --x2: -0.3122868949;
    --y2: -0.302411333;
    --delay: 0.6167889384;
  }
  .startails > div:nth-of-type(50) {
    --x: 0.4960153252;
    --y: 0.7637511128;
    --x2: 0.028905538;
    --y2: 0.1001920538;
    --delay: 0.1811381805;
  }
  .startails > div:nth-of-type(51) {
    --x: 0.9951848185;
    --y: 0.1360186829;
    --x2: 0.2158115409;
    --y2: 0.3206861354;
    --delay: 0.4708578725;
  }
  .startails > div:nth-of-type(52) {
    --x: 0.6885430819;
    --y: 0.425325668;
    --x2: -0.4309314727;
    --y2: -0.3019106016;
    --delay: 0.0141369256;
  }
  .startails > div:nth-of-type(53) {
    --x: 0.559028014;
    --y: 0.0813643911;
    --x2: -0.190116563;
    --y2: -0.0908396005;
    --delay: 0.055162807;
  }
  .startails > div:nth-of-type(54) {
    --x: 0.2135771438;
    --y: 0.728934043;
    --x2: 0.1564308574;
    --y2: 0.3746101621;
    --delay: 0.7268692022;
  }
  .startails > div:nth-of-type(55) {
    --x: 0.400236773;
    --y: 0.8614451391;
    --x2: 0.4520207985;
    --y2: 0.2496083457;
    --delay: 0.7579690881;
  }
  .startails > div:nth-of-type(56) {
    --x: 0.7553505746;
    --y: 0.462506907;
    --x2: -0.4447920653;
    --y2: -0.4003806851;
    --delay: 0.962163792;
  }
  .startails > div:nth-of-type(57) {
    --x: 0.4536983217;
    --y: 0.2224281661;
    --x2: -0.099870185;
    --y2: -0.0144034462;
    --delay: 0.5091549868;
  }
  .startails > div:nth-of-type(58) {
    --x: 0.47552091;
    --y: 0.8813528737;
    --x2: 0.0806397259;
    --y2: 0.2778284187;
    --delay: 0.4656858614;
  }
  .startails > div:nth-of-type(59) {
    --x: 0.5171843511;
    --y: 0.3177770884;
    --x2: -0.2056564547;
    --y2: 0.170828902;
    --delay: 0.9835596211;
  }
  .startails > div:nth-of-type(60) {
    --x: 0.1195973303;
    --y: 0.34355903;
    --x2: 0.3629701834;
    --y2: 0.3541040801;
    --delay: 0.5352309417;
  }
  .startails > div:nth-of-type(61) {
    --x: 0.6605250095;
    --y: 0.5735304182;
    --x2: -0.266906142;
    --y2: 0.1410563054;
    --delay: 0.6179134853;
  }
  .startails > div:nth-of-type(62) {
    --x: 0.4833180768;
    --y: 0.9563056781;
    --x2: -0.4584260115;
    --y2: -0.1769637805;
    --delay: 0.9328558104;
  }
  .startails > div:nth-of-type(63) {
    --x: 0.809591821;
    --y: 0.1686683536;
    --x2: 0.3327788344;
    --y2: 0.1167468298;
    --delay: 0.1562103551;
  }
  .startails > div:nth-of-type(64) {
    --x: 0.5156558187;
    --y: 0.1874228113;
    --x2: 0.2094924591;
    --y2: -0.4245572644;
    --delay: 0.8367739249;
  }
  .startails > div:nth-of-type(65) {
    --x: 0.1683294604;
    --y: 0.6129225105;
    --x2: 0.1160758931;
    --y2: 0.4511207278;
    --delay: 0.9996113261;
  }
  .startails > div:nth-of-type(66) {
    --x: 0.5916153129;
    --y: 0.6774893031;
    --x2: -0.0006793412;
    --y2: 0.410123733;
    --delay: 0.4122383588;
  }
  .startails > div:nth-of-type(67) {
    --x: 0.7218921216;
    --y: 0.5908572861;
    --x2: 0.0740862775;
    --y2: -0.2565958221;
    --delay: 0.6827334177;
  }
  .startails > div:nth-of-type(68) {
    --x: 0.8946147476;
    --y: 0.9670395897;
    --x2: 0.4123022533;
    --y2: -0.0869917312;
    --delay: 0.7341503183;
  }
  .startails > div:nth-of-type(69) {
    --x: 0.6424364889;
    --y: 0.7160534591;
    --x2: 0.4595581175;
    --y2: 0.2775095133;
    --delay: 0.0290973437;
  }
  .startails > div:nth-of-type(70) {
    --x: 0.109562061;
    --y: 0.7274621023;
    --x2: -0.2078155368;
    --y2: -0.3910398581;
    --delay: 0.1697868679;
  }
  .startails > div:nth-of-type(71) {
    --x: 0.2997798115;
    --y: 0.0999729619;
    --x2: 0.4616937205;
    --y2: 0.3548094661;
    --delay: 0.4941848743;
  }
  .startails > div:nth-of-type(72) {
    --x: 0.3289011954;
    --y: 0.5267544305;
    --x2: -0.4150080946;
    --y2: 0.094963079;
    --delay: 0.4057017464;
  }
  .startails > div:nth-of-type(73) {
    --x: 0.5832213978;
    --y: 0.1167733864;
    --x2: 0.477629119;
    --y2: -0.2943968982;
    --delay: 0.662338901;
  }
  .startails > div:nth-of-type(74) {
    --x: 0.5543984587;
    --y: 0.8497971113;
    --x2: 0.3225166234;
    --y2: 0.3452400954;
    --delay: 0.4163719865;
  }
  .startails > div:nth-of-type(75) {
    --x: 0.6078905071;
    --y: 0.3903179688;
    --x2: -0.4565451204;
    --y2: -0.1020709215;
    --delay: 0.4248489151;
  }
  .startails > div:nth-of-type(76) {
    --x: 0.2410612035;
    --y: 0.8671528716;
    --x2: -0.2459233248;
    --y2: -0.0131509452;
    --delay: 0.2189360883;
  }
  .startails > div:nth-of-type(77) {
    --x: 0.9228919085;
    --y: 0.9759257622;
    --x2: 0.2538543741;
    --y2: -0.3871778074;
    --delay: 0.9288331502;
  }
  .startails > div:nth-of-type(78) {
    --x: 0.8136602968;
    --y: 0.3262660197;
    --x2: -0.4802289574;
    --y2: -0.2492704286;
    --delay: 0.5025162425;
  }
  .startails > div:nth-of-type(79) {
    --x: 0.2776158739;
    --y: 0.0378155764;
    --x2: 0.2392648403;
    --y2: 0.0576050553;
    --delay: 0.7419768041;
  }
  .startails > div:nth-of-type(80) {
    --x: 0.206618665;
    --y: 0.0690185831;
    --x2: 0.0048238805;
    --y2: -0.0660691264;
    --delay: 0.9361567139;
  }
  .startails > div:nth-of-type(81) {
    --x: 0.820176013;
    --y: 0.0956074019;
    --x2: 0.1654220092;
    --y2: -0.2290725748;
    --delay: 0.4663713688;
  }
  .startails > div:nth-of-type(82) {
    --x: 0.6201406462;
    --y: 0.8166469735;
    --x2: 0.4680406713;
    --y2: -0.3418372801;
    --delay: 0.5238317669;
  }
  .startails > div:nth-of-type(83) {
    --x: 0.6807561099;
    --y: 0.3374696487;
    --x2: 0.0414871512;
    --y2: 0.3135385573;
    --delay: 0.1316754201;
  }
  .startails > div:nth-of-type(84) {
    --x: 0.1462776622;
    --y: 0.383844888;
    --x2: -0.4161598299;
    --y2: 0.4472201491;
    --delay: 0.182524775;
  }
  .startails > div:nth-of-type(85) {
    --x: 0.393273718;
    --y: 0.9810509515;
    --x2: -0.1150947823;
    --y2: 0.1317016148;
    --delay: 0.9781375198;
  }
  .startails > div:nth-of-type(86) {
    --x: 0.9239869979;
    --y: 0.2983112457;
    --x2: 0.055487893;
    --y2: 0.392909545;
    --delay: 0.2795553418;
  }
  .startails > div:nth-of-type(87) {
    --x: 0.2619654092;
    --y: 0.1365040469;
    --x2: 0.3455550343;
    --y2: -0.312314416;
    --delay: 0.8142304681;
  }
  .startails > div:nth-of-type(88) {
    --x: 0.1149209743;
    --y: 0.7413155688;
    --x2: 0.3552222821;
    --y2: 0.3493450574;
    --delay: 0.3939136748;
  }
  .startails > div:nth-of-type(89) {
    --x: 0.4537241099;
    --y: 0.3783104077;
    --x2: 0.1351654187;
    --y2: 0.2841182998;
    --delay: 0.5816044802;
  }
  .startails > div:nth-of-type(90) {
    --x: 0.0861512083;
    --y: 0.2133325192;
    --x2: -0.3260494414;
    --y2: 0.3738440003;
    --delay: 0.6937281204;
  }
  .startails > div:nth-of-type(91) {
    --x: 0.5518846727;
    --y: 0.1892220655;
    --x2: 0.4615199916;
    --y2: -0.0337281595;
    --delay: 0.504301429;
  }
  .startails > div:nth-of-type(92) {
    --x: 0.2682714111;
    --y: 0.2762715996;
    --x2: -0.3260508559;
    --y2: -0.1259584175;
    --delay: 0.4731947232;
  }
  .startails > div:nth-of-type(93) {
    --x: 0.3717625315;
    --y: 0.1121608334;
    --x2: -0.3374551041;
    --y2: -0.2762428464;
    --delay: 0.7495386224;
  }
  .startails > div:nth-of-type(94) {
    --x: 0.6075991749;
    --y: 0.2557136425;
    --x2: -0.0646347154;
    --y2: -0.3935062637;
    --delay: 0.906008074;
  }
  .startails > div:nth-of-type(95) {
    --x: 0.358101517;
    --y: 0.8214191881;
    --x2: 0.0131249478;
    --y2: 0.4276966734;
    --delay: 0.2142920908;
  }
  .startails > div:nth-of-type(96) {
    --x: 0.5598170922;
    --y: 0.0478546096;
    --x2: 0.1116602568;
    --y2: -0.0195347172;
    --delay: 0.9153610525;
  }
  .startails > div:nth-of-type(97) {
    --x: 0.2082195269;
    --y: 0.7742950422;
    --x2: -0.0284087007;
    --y2: 0.1608513704;
    --delay: 0.4497625393;
  }
  .startails > div:nth-of-type(98) {
    --x: 0.5439545362;
    --y: 0.5489355131;
    --x2: -0.3969952922;
    --y2: 0.413134038;
    --delay: 0.2593617076;
  }
  .startails > div:nth-of-type(99) {
    --x: 0.4820193153;
    --y: 0.4131369507;
    --x2: -0.488826148;
    --y2: -0.4136002674;
    --delay: 0.1306689036;
  }
  .startails > div:nth-of-type(100) {
    --x: 0.1276121821;
    --y: 0.3845181173;
    --x2: 0.4085172016;
    --y2: -0.0710064288;
    --delay: 0.9641854109;
  }
  .startails > div:nth-of-type(101) {
    --x: 0.9073542464;
    --y: 0.0296014372;
    --x2: -0.0923930968;
    --y2: 0.0471232998;
    --delay: 0.8508793403;
  }
  .startails > div:nth-of-type(102) {
    --x: 0.0803469707;
    --y: 0.5774132728;
    --x2: 0.4304842248;
    --y2: -0.1859671858;
    --delay: 0.1563211187;
  }
  .startails > div:nth-of-type(103) {
    --x: 0.933974245;
    --y: 0.7837768906;
    --x2: 0.2346546183;
    --y2: 0.2770155307;
    --delay: 0.27327159;
  }
  .startails > div:nth-of-type(104) {
    --x: 0.6669943961;
    --y: 0.5417779662;
    --x2: 0.3557277896;
    --y2: 0.0388216788;
    --delay: 0.05698864;
  }
  .startails > div:nth-of-type(105) {
    --x: 0.111391954;
    --y: 0.4666711407;
    --x2: -0.005926599;
    --y2: 0.0045017638;
    --delay: 0.1340135173;
  }
  .startails > div:nth-of-type(106) {
    --x: 0.1091086569;
    --y: 0.5944814664;
    --x2: -0.0326197201;
    --y2: -0.0714557756;
    --delay: 0.3167966954;
  }
  .startails > div:nth-of-type(107) {
    --x: 0.117042026;
    --y: 0.1206476465;
    --x2: -0.0741222584;
    --y2: -0.2473150253;
    --delay: 0.0660769033;
  }
  .startails > div:nth-of-type(108) {
    --x: 0.8505799243;
    --y: 0.4095145037;
    --x2: 0.1719254392;
    --y2: 0.1622126611;
    --delay: 0.7614779209;
  }
  .startails > div:nth-of-type(109) {
    --x: 0.2810651896;
    --y: 0.4682993278;
    --x2: 0.0920902079;
    --y2: 0.0173001756;
    --delay: 0.2897732676;
  }
  .startails > div:nth-of-type(110) {
    --x: 0.4936343815;
    --y: 0.7306145566;
    --x2: 0.4008504319;
    --y2: -0.209450353;
    --delay: 0.1188090679;
  }
  .startails > div:nth-of-type(111) {
    --x: 0.7401003853;
    --y: 0.1692246741;
    --x2: -0.045878901;
    --y2: -0.0187834333;
    --delay: 0.0763048068;
  }
  .startails > div:nth-of-type(112) {
    --x: 0.6807786073;
    --y: 0.2519614413;
    --x2: 0.3364143636;
    --y2: -0.0019025909;
    --delay: 0.5933168225;
  }
  .startails > div:nth-of-type(113) {
    --x: 0.5806179062;
    --y: 0.0497011807;
    --x2: -0.1234478985;
    --y2: -0.0146467608;
    --delay: 0.6225103752;
  }
  .startails > div:nth-of-type(114) {
    --x: 0.2632371853;
    --y: 0.6265245925;
    --x2: -0.2829656803;
    --y2: -0.0658483539;
    --delay: 0.159398012;
  }
  .startails > div:nth-of-type(115) {
    --x: 0.0351327453;
    --y: 0.536870226;
    --x2: -0.3843294847;
    --y2: 0.3578766954;
    --delay: 0.6303990369;
  }
  .startails > div:nth-of-type(116) {
    --x: 0.1351388435;
    --y: 0.3224989146;
    --x2: 0.2732034577;
    --y2: -0.0599548929;
    --delay: 0.5573907177;
  }
  .startails > div:nth-of-type(117) {
    --x: 0.5689380504;
    --y: 0.301135686;
    --x2: 0.23007469;
    --y2: -0.1710836125;
    --delay: 0.5285635486;
  }
  .startails > div:nth-of-type(118) {
    --x: 0.7297946163;
    --y: 0.8365959624;
    --x2: 0.1319366457;
    --y2: -0.0085407448;
    --delay: 0.0012324882;
  }
  .startails > div:nth-of-type(119) {
    --x: 0.2707542122;
    --y: 0.5506373441;
    --x2: 0.3988801463;
    --y2: 0.1338561516;
    --delay: 0.3706003551;
  }
  .startails > div:nth-of-type(120) {
    --x: 0.7163698677;
    --y: 0.7530877356;
    --x2: 0.2746907109;
    --y2: 0.0908597195;
    --delay: 0.0776689364;
  }
  .startails > div:nth-of-type(121) {
    --x: 0.8328416342;
    --y: 0.7662055127;
    --x2: -0.1848156146;
    --y2: 0.2607030078;
    --delay: 0.9539959906;
  }
  .startails > div:nth-of-type(122) {
    --x: 0.7027203532;
    --y: 0.2217693168;
    --x2: -0.059349062;
    --y2: 0.1241541914;
    --delay: 0.0646820066;
  }
  .startails > div:nth-of-type(123) {
    --x: 0.7088700675;
    --y: 0.5841175359;
    --x2: -0.2654307946;
    --y2: -0.3780413015;
    --delay: 0.4717680644;
  }
  .startails > div:nth-of-type(124) {
    --x: 0.8709680959;
    --y: 0.3404297615;
    --x2: 0.1722395596;
    --y2: -0.1266471573;
    --delay: 0.2346737159;
  }
  .startails > div:nth-of-type(125) {
    --x: 0.2736180075;
    --y: 0.3843276473;
    --x2: 0.4051874596;
    --y2: -0.1470011624;
    --delay: 0.8519509323;
  }
  .startails > div:nth-of-type(126) {
    --x: 0.2587051943;
    --y: 0.0827605896;
    --x2: -0.158106488;
    --y2: 0.343443589;
    --delay: 0.7187922264;
  }
  .startails > div:nth-of-type(127) {
    --x: 0.7544426496;
    --y: 0.7361832715;
    --x2: 0.4590017241;
    --y2: 0.0026756271;
    --delay: 0.2261621118;
  }
  .startails > div:nth-of-type(128) {
    --x: 0.183080635;
    --y: 0.6833505413;
    --x2: -0.3117125406;
    --y2: 0.410592731;
    --delay: 0.8553044814;
  }
  .startails > div:nth-of-type(129) {
    --x: 0.4428572259;
    --y: 0.9200454177;
    --x2: 0.1996613936;
    --y2: 0.4157206654;
    --delay: 0.1895313756;
  }
  .startails > div:nth-of-type(130) {
    --x: 0.3426999402;
    --y: 0.8094747742;
    --x2: 0.0330360015;
    --y2: 0.0561222774;
    --delay: 0.7539510462;
  }
  .startails > div:nth-of-type(131) {
    --x: 0.4942186458;
    --y: 0.561729759;
    --x2: -0.2435485493;
    --y2: 0.1966686827;
    --delay: 0.285045234;
  }
  .startails > div:nth-of-type(132) {
    --x: 0.6700175031;
    --y: 0.5007366151;
    --x2: -0.0110654428;
    --y2: -0.1462995226;
    --delay: 0.1540397409;
  }
  .startails > div:nth-of-type(133) {
    --x: 0.4270143242;
    --y: 0.7715986514;
    --x2: -0.3889546745;
    --y2: 0.4331708211;
    --delay: 0.8901013217;
  }
  .startails > div:nth-of-type(134) {
    --x: 0.2115088399;
    --y: 0.8657818618;
    --x2: -0.3802551082;
    --y2: -0.2670444284;
    --delay: 0.394833833;
  }
  .startails > div:nth-of-type(135) {
    --x: 0.2761839639;
    --y: 0.8797049053;
    --x2: 0.0834803818;
    --y2: -0.3539704569;
    --delay: 0.9671637751;
  }
  .startails > div:nth-of-type(136) {
    --x: 0.3652105769;
    --y: 0.8722062881;
    --x2: -0.261451513;
    --y2: 0.4109988266;
    --delay: 0.5715464682;
  }
  .startails > div:nth-of-type(137) {
    --x: 0.0505820072;
    --y: 0.0155261126;
    --x2: 0.4048471342;
    --y2: 0.1321773853;
    --delay: 0.1483759151;
  }
  .startails > div:nth-of-type(138) {
    --x: 0.6831948876;
    --y: 0.5177553548;
    --x2: 0.1162409446;
    --y2: -0.4168580715;
    --delay: 0.7326375484;
  }
  .startails > div:nth-of-type(139) {
    --x: 0.116759501;
    --y: 0.3344990583;
    --x2: 0.3789220644;
    --y2: -0.2395983981;
    --delay: 0.9999236298;
  }
  .startails > div:nth-of-type(140) {
    --x: 0.2308030437;
    --y: 0.3940831699;
    --x2: 0.2983422967;
    --y2: 0.3587365688;
    --delay: 0.9688262864;
  }
  .startails > div:nth-of-type(141) {
    --x: 0.4742934319;
    --y: 0.4623244688;
    --x2: -0.4441133731;
    --y2: 0.2424295871;
    --delay: 0.2389815512;
  }
  .startails > div:nth-of-type(142) {
    --x: 0.1784948119;
    --y: 0.2862893641;
    --x2: -0.2446800295;
    --y2: -0.3660301965;
    --delay: 0.6320254518;
  }
  .startails > div:nth-of-type(143) {
    --x: 0.3060317768;
    --y: 0.3107079959;
    --x2: 0.4233834658;
    --y2: -0.4692780207;
    --delay: 0.0946441831;
  }
  .startails > div:nth-of-type(144) {
    --x: 0.3474729391;
    --y: 0.8310015816;
    --x2: 0.3233020746;
    --y2: -0.3631295983;
    --delay: 0.4853108804;
  }
  .startails > div:nth-of-type(145) {
    --x: 0.6726793858;
    --y: 0.0840966462;
    --x2: -0.1919360201;
    --y2: -0.1265840508;
    --delay: 0.8764169147;
  }
  .startails > div:nth-of-type(146) {
    --x: 0.7639580115;
    --y: 0.3780065437;
    --x2: -0.2952759754;
    --y2: -0.1693015098;
    --delay: 0.6172411436;
  }
  .startails > div:nth-of-type(147) {
    --x: 0.9247550301;
    --y: 0.0038923512;
    --x2: -0.4197105203;
    --y2: -0.0320642722;
    --delay: 0.0033624636;
  }
  .startails > div:nth-of-type(148) {
    --x: 0.865117036;
    --y: 0.0340884246;
    --x2: 0.3903376116;
    --y2: -0.3670193211;
    --delay: 0.4496419071;
  }
  .startails > div:nth-of-type(149) {
    --x: 0.8292693616;
    --y: 0.1985790044;
    --x2: 0.08912652;
    --y2: 0.2942312282;
    --delay: 0.0318476361;
  }
  .startails > div:nth-of-type(150) {
    --x: 0.2855301658;
    --y: 0.2044858825;
    --x2: -0.2761166971;
    --y2: 0.4702190111;
    --delay: 0.6282736519;
  }
  .startails > div:nth-of-type(151) {
    --x: 0.3753730468;
    --y: 0.3714352275;
    --x2: 0.1466406111;
    --y2: 0.276162414;
    --delay: 0.3213266365;
  }
  .startails > div:nth-of-type(152) {
    --x: 0.5804443752;
    --y: 0.5733729694;
    --x2: 0.1750059922;
    --y2: 0.0106156751;
    --delay: 0.1731872569;
  }
  .startails > div:nth-of-type(153) {
    --x: 0.720156765;
    --y: 0.0996263812;
    --x2: -0.1052083053;
    --y2: 0.1547130174;
    --delay: 0.0822422316;
  }
  .startails > div:nth-of-type(154) {
    --x: 0.2187754997;
    --y: 0.5301201623;
    --x2: -0.186837204;
    --y2: -0.065352473;
    --delay: 0.2711343141;
  }
  .startails > div:nth-of-type(155) {
    --x: 0.1205387447;
    --y: 0.2969996556;
    --x2: -0.1196651219;
    --y2: 0.3016145082;
    --delay: 0.6550914104;
  }
  .startails > div:nth-of-type(156) {
    --x: 0.657114826;
    --y: 0.3121558367;
    --x2: -0.1714235899;
    --y2: 0.4009453046;
    --delay: 0.5107294545;
  }
  .startails > div:nth-of-type(157) {
    --x: 0.9414532338;
    --y: 0.4286692324;
    --x2: -0.0002300873;
    --y2: 0.3828619645;
    --delay: 0.7180237966;
  }
  .startails > div:nth-of-type(158) {
    --x: 0.5684630353;
    --y: 0.4063271818;
    --x2: -0.3228401147;
    --y2: 0.1117944539;
    --delay: 0.7252265254;
  }
  .startails > div:nth-of-type(159) {
    --x: 0.8062047812;
    --y: 0.7429132849;
    --x2: 0.0199583719;
    --y2: -0.1838465427;
    --delay: 0.9094660567;
  }
  .startails > div:nth-of-type(160) {
    --x: 0.7176630227;
    --y: 0.8308004495;
    --x2: 0.4814706558;
    --y2: -0.2114108326;
    --delay: 0.0756705562;
  }
  .startails > div:nth-of-type(161) {
    --x: 0.2307662949;
    --y: 0.6527845903;
    --x2: 0.4274401001;
    --y2: 0.1079989457;
    --delay: 0.7017919744;
  }
  .startails > div:nth-of-type(162) {
    --x: 0.5442778457;
    --y: 0.8214416748;
    --x2: 0.4807099859;
    --y2: -0.2592348955;
    --delay: 0.6338507407;
  }
  .startails > div:nth-of-type(163) {
    --x: 0.9947596901;
    --y: 0.6497337438;
    --x2: 0.1654914555;
    --y2: -0.0754376199;
    --delay: 0.4547795889;
  }
  .startails > div:nth-of-type(164) {
    --x: 0.6232900451;
    --y: 0.0330300933;
    --x2: -0.0411685842;
    --y2: 0.4428389726;
    --delay: 0.9454632356;
  }
  .startails > div:nth-of-type(165) {
    --x: 0.4139177107;
    --y: 0.2705436872;
    --x2: -0.0151129586;
    --y2: -0.4836494637;
    --delay: 0.2548940449;
  }
  .startails > div:nth-of-type(166) {
    --x: 0.9361059088;
    --y: 0.2021052852;
    --x2: -0.0854388819;
    --y2: -0.2643079284;
    --delay: 0.9235425862;
  }
  .startails > div:nth-of-type(167) {
    --x: 0.9733898737;
    --y: 0.0638906835;
    --x2: 0.3512573468;
    --y2: 0.0827135279;
    --delay: 0.6601497998;
  }
  .startails > div:nth-of-type(168) {
    --x: 0.0716928865;
    --y: 0.1312428079;
    --x2: -0.1236191599;
    --y2: 0.3625775115;
    --delay: 0.1911569295;
  }
  .startails > div:nth-of-type(169) {
    --x: 0.854424581;
    --y: 0.903116333;
    --x2: -0.0285409367;
    --y2: -0.3618107155;
    --delay: 0.1026788063;
  }
  .startails > div:nth-of-type(170) {
    --x: 0.8074651002;
    --y: 0.7992635202;
    --x2: 0.3773221833;
    --y2: -0.2507933286;
    --delay: 0.5806054231;
  }
  .startails > div:nth-of-type(171) {
    --x: 0.74188501;
    --y: 0.8000168804;
    --x2: 0.4356731915;
    --y2: 0.2915593283;
    --delay: 0.8375697077;
  }
  .startails > div:nth-of-type(172) {
    --x: 0.91948416;
    --y: 0.379079245;
    --x2: 0.2438615803;
    --y2: -0.1393619165;
    --delay: 0.5416639338;
  }
  .startails > div:nth-of-type(173) {
    --x: 0.8519799559;
    --y: 0.8113284642;
    --x2: -0.4765922947;
    --y2: -0.4461913372;
    --delay: 0.310411248;
  }
  .startails > div:nth-of-type(174) {
    --x: 0.6344991699;
    --y: 0.4192863565;
    --x2: -0.1743652102;
    --y2: -0.4175798683;
    --delay: 0.2412969449;
  }
  .startails > div:nth-of-type(175) {
    --x: 0.2001216161;
    --y: 0.7796630751;
    --x2: 0.39461542;
    --y2: -0.2486868637;
    --delay: 0.6318397543;
  }
  .startails > div:nth-of-type(176) {
    --x: 0.88365598;
    --y: 0.7369018966;
    --x2: -0.2010128414;
    --y2: -0.1646521511;
    --delay: 0.6629705061;
  }
  .startails > div:nth-of-type(177) {
    --x: 0.5973286371;
    --y: 0.879500976;
    --x2: 0.2726539057;
    --y2: 0.4837130156;
    --delay: 0.8376730571;
  }
  .startails > div:nth-of-type(178) {
    --x: 0.1201220823;
    --y: 0.4161060281;
    --x2: 0.1413924473;
    --y2: 0.1841366745;
    --delay: 0.9384767987;
  }
  .startails > div:nth-of-type(179) {
    --x: 0.7805429525;
    --y: 0.8027170795;
    --x2: -0.3183717556;
    --y2: 0.0605786352;
    --delay: 0.7087581253;
  }
  .startails > div:nth-of-type(180) {
    --x: 0.5337299491;
    --y: 0.596371315;
    --x2: -0.0769568103;
    --y2: -0.2284081348;
    --delay: 0.1974613794;
  }
  .startails > div:nth-of-type(181) {
    --x: 0.0634534642;
    --y: 0.8425920226;
    --x2: 0.4281100812;
    --y2: 0.040497266;
    --delay: 0.07688492;
  }
  .startails > div:nth-of-type(182) {
    --x: 0.2767493863;
    --y: 0.3574227632;
    --x2: -0.4971952299;
    --y2: -0.3974861796;
    --delay: 0.8258862243;
  }
  .startails > div:nth-of-type(183) {
    --x: 0.7341557704;
    --y: 0.2205668649;
    --x2: -0.3370489282;
    --y2: 0.2202013329;
    --delay: 0.2769068289;
  }
  .startails > div:nth-of-type(184) {
    --x: 0.6709465477;
    --y: 0.7599531138;
    --x2: 0.4440116402;
    --y2: 0.0442732239;
    --delay: 0.0806789912;
  }
  .startails > div:nth-of-type(185) {
    --x: 0.7025665076;
    --y: 0.4338675789;
    --x2: 0.3133716644;
    --y2: -0.3873893451;
    --delay: 0.2058579886;
  }
  .startails > div:nth-of-type(186) {
    --x: 0.370457519;
    --y: 0.4399967704;
    --x2: 0.2562658712;
    --y2: 0.4044617818;
    --delay: 0.9783856703;
  }
  .startails > div:nth-of-type(187) {
    --x: 0.3557352103;
    --y: 0.3466300878;
    --x2: -0.1764773943;
    --y2: -0.4751982632;
    --delay: 0.2426974078;
  }
  .startails > div:nth-of-type(188) {
    --x: 0.6497982146;
    --y: 0.1524538615;
    --x2: 0.0508244095;
    --y2: -0.0627649101;
    --delay: 0.9449037402;
  }
  .startails > div:nth-of-type(189) {
    --x: 0.6728463835;
    --y: 0.3036402931;
    --x2: 0.0773550804;
    --y2: -0.2655371565;
    --delay: 0.196596219;
  }
  .startails > div:nth-of-type(190) {
    --x: 0.3784871057;
    --y: 0.646896403;
    --x2: -0.2550204474;
    --y2: 0.3564202507;
    --delay: 0.4791864898;
  }
  .startails > div:nth-of-type(191) {
    --x: 0.389414863;
    --y: 0.4188108625;
    --x2: 0.2699951891;
    --y2: 0.420446309;
    --delay: 0.2440569479;
  }
  .startails > div:nth-of-type(192) {
    --x: 0.4619836633;
    --y: 0.1644060011;
    --x2: 0.0621501001;
    --y2: 0.2924248498;
    --delay: 0.9232902124;
  }
  .startails > div:nth-of-type(193) {
    --x: 0.3724809601;
    --y: 0.5112154461;
    --x2: 0.4237385029;
    --y2: 0.3407900006;
    --delay: 0.0766627979;
  }
  .startails > div:nth-of-type(194) {
    --x: 0.8953648188;
    --y: 0.598487242;
    --x2: -0.0195093122;
    --y2: -0.3865387443;
    --delay: 0.9785676731;
  }
  .startails > div:nth-of-type(195) {
    --x: 0.5929037117;
    --y: 0.1845495563;
    --x2: 0.172888527;
    --y2: 0.2184781081;
    --delay: 0.2702197277;
  }
  .startails > div:nth-of-type(196) {
    --x: 0.9679317489;
    --y: 0.7225060923;
    --x2: 0.4004475669;
    --y2: -0.2401134833;
    --delay: 0.6046277577;
  }
  .startails > div:nth-of-type(197) {
    --x: 0.9960672599;
    --y: 0.9231379644;
    --x2: -0.1893868013;
    --y2: -0.3857392377;
    --delay: 0.4096873077;
  }
  .startails > div:nth-of-type(198) {
    --x: 0.3032280738;
    --y: 0.4107172803;
    --x2: -0.2708324053;
    --y2: 0.3293859399;
    --delay: 0.5206093098;
  }
  .startails > div:nth-of-type(199) {
    --x: 0.4530893729;
    --y: 0.3983614276;
    --x2: 0.1123517206;
    --y2: 0.3154547585;
    --delay: 0.6271532812;
  }
  .startails > div:nth-of-type(200) {
    --x: 0.5268946917;
    --y: 0.0542981899;
    --x2: -0.3368366199;
    --y2: -0.0941694659;
    --delay: 0.9297115356;
  }
  .startails > div:nth-of-type(201) {
    --x: 0.1522986893;
    --y: 0.6323258079;
    --x2: 0.0076308283;
    --y2: -0.0542440032;
    --delay: 0.9461638936;
  }

  @-webkit-keyframes startails-animation {
    from {
      opacity: 1;
      translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
      scale: 0.9;
    }
    2% {
      scale: 0.4;
    }
    5% {
      translate: calc(var(--x) * 100vw + var(--y2) * var(--distance)) calc(var(--y) * 100vh + var(--x2) * var(--distance));
      opacity: 0;
      scale: 1;
    }
    to {
      translate: calc(var(--x) * 100vw + var(--y2) * var(--distance)) calc(var(--y) * 100vh + var(--x2) * var(--distance));
      scale: 1;
      opacity: 0;
    }
  }

  @keyframes startails-animation {
    from {
      opacity: 1;
      translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
      scale: 0.9;
    }
    2% {
      scale: 0.4;
    }
    5% {
      translate: calc(var(--x) * 100vw + var(--y2) * var(--distance)) calc(var(--y) * 100vh + var(--x2) * var(--distance));
      opacity: 0;
      scale: 1;
    }
    to {
      translate: calc(var(--x) * 100vw + var(--y2) * var(--distance)) calc(var(--y) * 100vh + var(--x2) * var(--distance));
      scale: 1;
      opacity: 0;
    }
  }
}
@layer scene {
  .scene {
    display: grid;
    place-items: center;
    position: absolute;
    -webkit-animation: scene-zoom-in-out var(--time) ease-in-out infinite;
            animation: scene-zoom-in-out var(--time) ease-in-out infinite;
    transform-style: preserve-3d;
  }

  @-webkit-keyframes scene-zoom-in-out {
    from {
      transform: scale(0.9);
    }
    50% {
      transform: scale(1);
    }
    to {
      transform: scale(0.9);
    }
  }

  @keyframes scene-zoom-in-out {
    from {
      transform: scale(0.9);
    }
    50% {
      transform: scale(1);
    }
    to {
      transform: scale(0.9);
    }
  }
}
@property --space {
  syntax: "<length>";
  initial-value: 0;
  inherits: true;
}
@layer cuboid {
  .cuboid {
    position: absolute;
    transform-style: preserve-3d;
    transform: rotateY(312deg) rotateX(350deg) rotateZ(10deg) translateY(20vh);
    --size: 8vmax;
    --size-h: calc(var(--size) / 2);
    --size-h-n: calc(var(--size) / -2);
  }
  .cuboid .top {
    width: var(--size);
    aspect-ratio: 1;
    background: linear-gradient(135deg, #e8dbdd, #989699);
    transform-style: preserve-3d;
    transform: rotateX(90deg) translateZ(var(--size-h-n));
    opacity: 0.9;
  }
  .cuboid .front {
    width: var(--size);
    aspect-ratio: 1/2;
    background: linear-gradient(#5f595d, transparent 60%);
    opacity: 0.5;
    transform: translateZ(var(--size-h));
    position: absolute;
  }
  .cuboid .right {
    width: var(--size);
    aspect-ratio: 1/2;
    background: linear-gradient(#5f595d 10%, transparent 90%);
    transform: translate3d(var(--size-h), 0, 0) rotateY(90deg);
    position: absolute;
    opacity: 0.7;
    -webkit-mask: radial-gradient(150% 120% at 0% 0%, black, transparent);
            mask: radial-gradient(150% 120% at 0% 0%, black, transparent);
  }
  .cuboid .outline {
    --space: 0vmax;
    --space-h: calc(var(--size) / 2);
    position: absolute;
    width: var(--size);
    aspect-ratio: 1;
    border: 0.0125vmax solid white;
    transition: all 3s ease-in-out;
    translate: calc(-50% + var(--space-h)) calc(-50% + var(--space-h));
    padding: var(--space);
    --duration: 16s;
    -webkit-animation: outline-animation var(--duration) 0s cubic-bezier(0.68, 0.27, 0.26, 0.91) infinite;
            animation: outline-animation var(--duration) 0s cubic-bezier(0.68, 0.27, 0.26, 0.91) infinite;
    opacity: 0;
    box-shadow: inset 0 0 0.5vmax rgba(255, 255, 255, 0.4), 0 0 0.5vmax rgba(255, 255, 255, 0.4);
    --initial-space: var(--size-h);
  }
  .cuboid .outline:nth-of-type(2) {
    -webkit-animation-delay: calc(var(--duration) / 4);
            animation-delay: calc(var(--duration) / 4);
  }
  .cuboid .outline:nth-of-type(3) {
    -webkit-animation-delay: calc(var(--duration) / 4 * 2);
            animation-delay: calc(var(--duration) / 4 * 2);
  }
  .cuboid .outline:nth-of-type(4) {
    -webkit-animation-delay: calc(var(--duration) / 4 * 3);
            animation-delay: calc(var(--duration) / 4 * 3);
  }

  @-webkit-keyframes outline-animation {
    from {
      --space: var(--initial-space, 0vmax);
      opacity: 0;
      filter: blur(0vmax);
    }
    5% {
      opacity: 0.2;
    }
    40% {
      opacity: 0.5;
    }
    60% {
      opacity: 0.05;
      filter: blur(0vmax);
    }
    80% {
      opacity: 0;
    }
    to {
      --space: calc(var(--initial-space, 0vmax) + 25vmax);
      opacity: 0;
      filter: blur(0.6vmax);
    }
  }

  @keyframes outline-animation {
    from {
      --space: var(--initial-space, 0vmax);
      opacity: 0;
      filter: blur(0vmax);
    }
    5% {
      opacity: 0.2;
    }
    40% {
      opacity: 0.5;
    }
    60% {
      opacity: 0.05;
      filter: blur(0vmax);
    }
    80% {
      opacity: 0;
    }
    to {
      --space: calc(var(--initial-space, 0vmax) + 25vmax);
      opacity: 0;
      filter: blur(0.6vmax);
    }
  }
}
@layer planets {
  @property --moon-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
  }
  @-webkit-keyframes moon-animation {
    from {
      --moon-angle: 180deg;
    }
    50% {
      --moon-angle: 200deg;
    }
    to {
      --moon-angle: 180deg;
    }
  }
  @keyframes moon-animation {
    from {
      --moon-angle: 180deg;
    }
    50% {
      --moon-angle: 200deg;
    }
    to {
      --moon-angle: 180deg;
    }
  }
  .sun {
    border-radius: 50%;
    width: 25vmax;
    aspect-ratio: 1;
    background: radial-gradient(circle at 60% 60%, #f6f6f6, #e8dbdd, #d9d9d9);
    position: absolute;
    transform: translateY(-20vmax);
    box-shadow: 0 0 14vmax rgba(255, 255, 255, 0.5), 0 0 22vmax rgba(255, 255, 255, 0.05), 0 0 42vmax rgba(255, 255, 255, 0.4);
    transform-style: preserve-3d;
  }

  .planet {
    border-radius: 50%;
    width: 17vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 60% 55%, #252525, #2a2f33 52%, #ede9ea 62%), #ede9ea;
    position: absolute;
    --r: 15vmax;
    --y: calc(-10vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * -1);
    transform: translateY(var(--y)) translateX(10vmax) translateZ(var(--z));
    -webkit-animation: moon-animation var(--time) ease-in-out infinite;
            animation: moon-animation var(--time) ease-in-out infinite;
    box-shadow: 0 0 2.5vmax rgba(255, 255, 255, 0.12);
    filter: blur(0.05vmax);
    transform-style: preserve-3d;
  }

  .planet-2 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 13vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 60% 55%, #e3e3e3, #d2c6c8 52%, #212528 62%, transparent 82%);
    position: absolute;
    --r: 2vmax;
    --y: calc(-35vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * 1);
    transform: translateY(var(--y)) translateX(-20vmax) translateZ(var(--z));
    -webkit-animation: moon-animation var(--time) ease-in-out infinite;
            animation: moon-animation var(--time) ease-in-out infinite;
  }

  .planet-3 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 2vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 70% 50%, #eeeeee 16%, #b7aeb0 38%, #3c4144 52%, #2d3134 60%, transparent 82%);
    position: absolute;
    transform: translateY(-10vmax) translateX(-20vmax);
    opacity: 0.6;
  }

  .planet-4 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 1vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 70% 50%, #d0d0d0, #b7aeb0 38%, #121415 52%, #131617 60%, transparent 82%);
    position: absolute;
    transform: translateY(-11vmax) translateX(-22vmax);
    opacity: 0.5;
  }

  .planet-5 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 10vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 30% 55%, #797777, #515051 52%, #212528 62%, transparent 82%);
    position: absolute;
    --r: 5vmax;
    --y: calc(-35vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * 1);
    transform: translateY(var(--y)) translateX(18vmax) translateZ(var(--z));
    -webkit-clip-path: circle();
            clip-path: circle();
    overflow: clip;
    -webkit-animation: moon-animation var(--time) ease-in-out infinite;
            animation: moon-animation var(--time) ease-in-out infinite;
    filter: blur(0.03rem);
    --animation: move-to-left calc(var(--time) * 6) ease-in-out infinite;
  }
  .planet-5 .structure-1 {
    position: absolute;
    inset: -20vmax;
    filter: url(#planet-structure) saturate(0);
    mix-blend-mode: lighten;
    opacity: 0.4;
    transform: scale(4) translateX(1vmax);
    -webkit-animation: var(--animation);
            animation: var(--animation);
  }
  .planet-5 .structure-2 {
    position: absolute;
    inset: -20vmax;
    filter: url(#planet-structure) saturate(0);
    mix-blend-mode: lighten;
    opacity: 0.5;
    transform: scale(7.5);
    -webkit-animation: var(--animation);
            animation: var(--animation);
  }
  .planet-5 .structure-3 {
    position: absolute;
    inset: -20vmax;
    filter: url(#planet-structure) saturate(0);
    mix-blend-mode: lighten;
    opacity: 0.1;
    transform: scale(0.2) translateX(1vmax);
    -webkit-animation: var(--animation);
            animation: var(--animation);
  }
  .planet-5::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 5% 20%, transparent 30%, #171a1c 60%);
  }

  @-webkit-keyframes move-to-left {
    from {
      translate: 0 0;
    }
    50% {
      translate: -100% 0;
    }
    to {
      translate: 0 0;
    }
  }

  @keyframes move-to-left {
    from {
      translate: 0 0;
    }
    50% {
      translate: -100% 0;
    }
    to {
      translate: 0 0;
    }
  }
  .planet-6 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 7vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 30% 55%, #f3ecec, #7a7a7a 52%, #212528 72%, transparent);
    position: absolute;
    --r: 6vmax;
    --y: calc(-39.6vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * 1);
    transform: translateY(var(--y)) translateX(23vmax) translateZ(var(--z));
    -webkit-animation: moon-animation var(--time) ease-in-out infinite;
            animation: moon-animation var(--time) ease-in-out infinite;
    display: grid;
    place-items: center;
    filter: blur(0.06rem);
  }
  .planet-6::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 12vmax;
    height: 1vmax;
    border: 1vmax solid #5e5e5e;
    box-shadow: inset 0 0 1rem black;
    transform: rotate(25deg);
    -webkit-mask: radial-gradient(circle at 50% -20%, transparent 30%, black);
            mask: radial-gradient(circle at 50% -20%, transparent 30%, black);
    -webkit-clip-path: ellipse(47% 22% at 50% 50%);
            clip-path: ellipse(47% 22% at 50% 50%);
    filter: blur(0.5vmax);
  }
  .planet-6::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 12vmax;
    height: 1vmax;
    border: 2.6vmax solid #43484c;
    box-shadow: inset 0 0 1rem black;
    transform: rotate(25deg);
    -webkit-mask: radial-gradient(circle at 50% -20%, transparent 30%, black);
            mask: radial-gradient(circle at 50% -20%, transparent 30%, black);
    -webkit-clip-path: ellipse(47% 22% at 50% 50%);
            clip-path: ellipse(47% 22% at 50% 50%);
  }

  .planets,
.planets-2 {
    position: absolute;
    inset: 0;
  }
  .planets > div,
.planets-2 > div {
    --distance: 20vmax;
    border-radius: 50%;
    width: 1.6vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 70% 50%, #bbbaba, #888586 38%, #121415 52%, #131617 60%, transparent 82%);
    opacity: 0.5;
    filter: blur(0.1rem);
    translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
  }
  .planets > div:nth-of-type(1),
.planets-2 > div:nth-of-type(1) {
    --x: 0.0044648468;
    --y: 0.30650265;
    --x2: -0.1460544961;
    --y2: -0.1693931519;
    --delay: 0.9362698652;
  }
  .planets > div:nth-of-type(2),
.planets-2 > div:nth-of-type(2) {
    --x: 0.8779098602;
    --y: 0.8852094825;
    --x2: 0.3279832387;
    --y2: 0.0419343393;
    --delay: 0.6037617642;
  }
  .planets > div:nth-of-type(3),
.planets-2 > div:nth-of-type(3) {
    --x: 0.2196354225;
    --y: 0.13341817;
    --x2: -0.2963932538;
    --y2: -0.4765119477;
    --delay: 0.5934370337;
  }
  .planets > div:nth-of-type(4),
.planets-2 > div:nth-of-type(4) {
    --x: 0.3522880853;
    --y: 0.6443380072;
    --x2: -0.1683551472;
    --y2: -0.4697296658;
    --delay: 0.3363639141;
  }
  .planets > div:nth-of-type(5),
.planets-2 > div:nth-of-type(5) {
    --x: 0.9644084589;
    --y: 0.0470619667;
    --x2: 0.3384977785;
    --y2: 0.4021480364;
    --delay: 0.155884873;
  }
  .planets > div:nth-of-type(6),
.planets-2 > div:nth-of-type(6) {
    --x: 0.482231244;
    --y: 0.5556521921;
    --x2: -0.2739594222;
    --y2: -0.4397825335;
    --delay: 0.6484232635;
  }
  .planets > div:nth-of-type(7),
.planets-2 > div:nth-of-type(7) {
    --x: 0.6036808122;
    --y: 0.9663528064;
    --x2: 0.1487313267;
    --y2: 0.1930143685;
    --delay: 0.3979508218;
  }
  .planets > div:nth-of-type(8),
.planets-2 > div:nth-of-type(8) {
    --x: 0.0062299762;
    --y: 0.9025713364;
    --x2: -0.0298806881;
    --y2: -0.075157027;
    --delay: 0.1171838831;
  }
  .planets > div:nth-of-type(9),
.planets-2 > div:nth-of-type(9) {
    --x: 0.3896160162;
    --y: 0.8134566958;
    --x2: 0.0065528388;
    --y2: -0.2155949951;
    --delay: 0.7801381419;
  }
  .planets > div:nth-of-type(10),
.planets-2 > div:nth-of-type(10) {
    --x: 0.778460098;
    --y: 0.6601319766;
    --x2: 0.0952742062;
    --y2: -0.0040279262;
    --delay: 0.6443347048;
  }
  .planets > div:nth-of-type(11),
.planets-2 > div:nth-of-type(11) {
    --x: 0.6857989182;
    --y: 0.9867673303;
    --x2: -0.0073518543;
    --y2: -0.0812630757;
    --delay: 0.5543916937;
  }
  .planets > div:nth-of-type(12),
.planets-2 > div:nth-of-type(12) {
    --x: 0.3013778187;
    --y: 0.4362316846;
    --x2: 0.0136729037;
    --y2: 0.0794362391;
    --delay: 0.7917637664;
  }
  .planets > div:nth-of-type(13),
.planets-2 > div:nth-of-type(13) {
    --x: 0.5808397094;
    --y: 0.6183087936;
    --x2: -0.2930235574;
    --y2: -0.2564821742;
    --delay: 0.1883498703;
  }
  .planets > div:nth-of-type(14),
.planets-2 > div:nth-of-type(14) {
    --x: 0.4907084436;
    --y: 0.7413673246;
    --x2: 0.4241353482;
    --y2: 0.2141649609;
    --delay: 0.3696365379;
  }
  .planets > div:nth-of-type(15),
.planets-2 > div:nth-of-type(15) {
    --x: 0.0012595937;
    --y: 0.8215281716;
    --x2: -0.1186330674;
    --y2: 0.065356271;
    --delay: 0.3556329804;
  }
  .planets > div:nth-of-type(16),
.planets-2 > div:nth-of-type(16) {
    --x: 0.0053475165;
    --y: 0.8699813605;
    --x2: 0.395483998;
    --y2: -0.3433745128;
    --delay: 0.2816472757;
  }
  .planets > div:nth-of-type(17),
.planets-2 > div:nth-of-type(17) {
    --x: 0.6972074661;
    --y: 0.9489448035;
    --x2: -0.2784279025;
    --y2: -0.4977836857;
    --delay: 0.0982532655;
  }
  .planets > div:nth-of-type(18),
.planets-2 > div:nth-of-type(18) {
    --x: 0.2592592746;
    --y: 0.8362368032;
    --x2: 0.2660242693;
    --y2: -0.4056106759;
    --delay: 0.4836273976;
  }
  .planets > div:nth-of-type(19),
.planets-2 > div:nth-of-type(19) {
    --x: 0.4280809595;
    --y: 0.6465167899;
    --x2: -0.3960254404;
    --y2: -0.2975742161;
    --delay: 0.2320715273;
  }
  .planets > div:nth-of-type(20),
.planets-2 > div:nth-of-type(20) {
    --x: 0.2889746983;
    --y: 0.7663400289;
    --x2: -0.1010559891;
    --y2: 0.4138983842;
    --delay: 0.9700830539;
  }
  .planets > div:nth-of-type(21),
.planets-2 > div:nth-of-type(21) {
    --x: 0.4119536043;
    --y: 0.135888213;
    --x2: 0.3336342121;
    --y2: -0.3637557229;
    --delay: 0.795481233;
  }
  .planets > div:nth-of-type(22),
.planets-2 > div:nth-of-type(22) {
    --x: 0.9223493554;
    --y: 0.0178779973;
    --x2: -0.0141526959;
    --y2: -0.0434157792;
    --delay: 0.4755884936;
  }
  .planets > div:nth-of-type(23),
.planets-2 > div:nth-of-type(23) {
    --x: 0.9549242371;
    --y: 0.7904671698;
    --x2: -0.1331690085;
    --y2: -0.469874911;
    --delay: 0.5661895027;
  }
  .planets > div:nth-of-type(24),
.planets-2 > div:nth-of-type(24) {
    --x: 0.7473304523;
    --y: 0.6126273231;
    --x2: 0.3498680564;
    --y2: -0.4787103358;
    --delay: 0.7449525071;
  }
  .planets > div:nth-of-type(25),
.planets-2 > div:nth-of-type(25) {
    --x: 0.7222589755;
    --y: 0.624469149;
    --x2: 0.4112467535;
    --y2: 0.455693544;
    --delay: 0.6858669158;
  }
  .planets > div:nth-of-type(26),
.planets-2 > div:nth-of-type(26) {
    --x: 0.4198524285;
    --y: 0.6701568635;
    --x2: 0.0529685381;
    --y2: 0.3800290559;
    --delay: 0.4554375523;
  }
  .planets > div:nth-of-type(27),
.planets-2 > div:nth-of-type(27) {
    --x: 0.7645415983;
    --y: 0.754009611;
    --x2: 0.4700467563;
    --y2: 0.2270197288;
    --delay: 0.3675799502;
  }
  .planets > div:nth-of-type(28),
.planets-2 > div:nth-of-type(28) {
    --x: 0.8232778179;
    --y: 0.6563684107;
    --x2: 0.1286685291;
    --y2: 0.4456331706;
    --delay: 0.5612267094;
  }
  .planets > div:nth-of-type(29),
.planets-2 > div:nth-of-type(29) {
    --x: 0.3065461;
    --y: 0.4794561592;
    --x2: -0.1432821231;
    --y2: 0.0428999267;
    --delay: 0.5796509114;
  }
  .planets > div:nth-of-type(30),
.planets-2 > div:nth-of-type(30) {
    --x: 0.8619485471;
    --y: 0.380711916;
    --x2: 0.4198116468;
    --y2: 0.3453548338;
    --delay: 0.0139715897;
  }
  .planets > div:nth-of-type(31),
.planets-2 > div:nth-of-type(31) {
    --x: 0.5395689838;
    --y: 0.211413442;
    --x2: 0.3594438286;
    --y2: 0.177409563;
    --delay: 0.2948571714;
  }
  .planets > div:nth-of-type(32),
.planets-2 > div:nth-of-type(32) {
    --x: 0.2021143027;
    --y: 0.0612935378;
    --x2: 0.4652364008;
    --y2: -0.440552153;
    --delay: 0.2005539314;
  }
  .planets > div:nth-of-type(33),
.planets-2 > div:nth-of-type(33) {
    --x: 0.3177207348;
    --y: 0.363165658;
    --x2: 0.0260523013;
    --y2: 0.3696050666;
    --delay: 0.7707975644;
  }
  .planets > div:nth-of-type(34),
.planets-2 > div:nth-of-type(34) {
    --x: 0.6136639881;
    --y: 0.8075833041;
    --x2: 0.141648408;
    --y2: -0.2563895785;
    --delay: 0.8633869025;
  }
  .planets > div:nth-of-type(35),
.planets-2 > div:nth-of-type(35) {
    --x: 0.9445807362;
    --y: 0.864079766;
    --x2: -0.1877436177;
    --y2: 0.3397745212;
    --delay: 0.1085663451;
  }
  .planets > div:nth-of-type(36),
.planets-2 > div:nth-of-type(36) {
    --x: 0.2219155495;
    --y: 0.5764301492;
    --x2: -0.2912663677;
    --y2: 0.4855483001;
    --delay: 0.2880832556;
  }
  .planets > div:nth-of-type(37),
.planets-2 > div:nth-of-type(37) {
    --x: 0.1965687065;
    --y: 0.94671348;
    --x2: -0.4638443248;
    --y2: -0.1139419555;
    --delay: 0.0980271634;
  }
  .planets > div:nth-of-type(38),
.planets-2 > div:nth-of-type(38) {
    --x: 0.1933197304;
    --y: 0.2912759374;
    --x2: 0.1972450957;
    --y2: -0.2381975968;
    --delay: 0.3338359166;
  }
  .planets > div:nth-of-type(39),
.planets-2 > div:nth-of-type(39) {
    --x: 0.9310540917;
    --y: 0.8429548604;
    --x2: -0.2615193107;
    --y2: -0.1620807963;
    --delay: 0.2257625248;
  }
  .planets > div:nth-of-type(40),
.planets-2 > div:nth-of-type(40) {
    --x: 0.4359347843;
    --y: 0.5817797129;
    --x2: -0.2957481373;
    --y2: -0.0267507712;
    --delay: 0.9793421223;
  }
  .planets > div:nth-of-type(41),
.planets-2 > div:nth-of-type(41) {
    --x: 0.4522616495;
    --y: 0.2336326161;
    --x2: -0.1918057171;
    --y2: -0.1744751751;
    --delay: 0.7059818101;
  }
  .planets > div:nth-of-type(42),
.planets-2 > div:nth-of-type(42) {
    --x: 0.3145905586;
    --y: 0.1341005989;
    --x2: 0.2473757032;
    --y2: 0.2889937558;
    --delay: 0.0030167654;
  }
  .planets > div:nth-of-type(43),
.planets-2 > div:nth-of-type(43) {
    --x: 0.9105034974;
    --y: 0.3798694714;
    --x2: -0.4762797885;
    --y2: 0.0925717282;
    --delay: 0.1824171241;
  }
  .planets > div:nth-of-type(44),
.planets-2 > div:nth-of-type(44) {
    --x: 0.0259458287;
    --y: 0.7234637207;
    --x2: 0.3100172807;
    --y2: 0.3235796265;
    --delay: 0.9244399002;
  }
  .planets > div:nth-of-type(45),
.planets-2 > div:nth-of-type(45) {
    --x: 0.5670020744;
    --y: 0.1600726972;
    --x2: -0.0779012638;
    --y2: 0.2399477929;
    --delay: 0.5765478923;
  }
  .planets > div:nth-of-type(46),
.planets-2 > div:nth-of-type(46) {
    --x: 0.2184682279;
    --y: 0.4689149938;
    --x2: -0.208593366;
    --y2: -0.0724135191;
    --delay: 0.0230080048;
  }
  .planets > div:nth-of-type(47),
.planets-2 > div:nth-of-type(47) {
    --x: 0.3598280346;
    --y: 0.9759970836;
    --x2: 0.3922909804;
    --y2: 0.1632356292;
    --delay: 0.7275406084;
  }
  .planets > div:nth-of-type(48),
.planets-2 > div:nth-of-type(48) {
    --x: 0.9578551531;
    --y: 0.7970469521;
    --x2: -0.0769282182;
    --y2: 0.1364998191;
    --delay: 0.2689091791;
  }
  .planets > div:nth-of-type(49),
.planets-2 > div:nth-of-type(49) {
    --x: 0.8950061414;
    --y: 0.1191202513;
    --x2: -0.0949918494;
    --y2: -0.2282523828;
    --delay: 0.7622285938;
  }
  .planets > div:nth-of-type(50),
.planets-2 > div:nth-of-type(50) {
    --x: 0.5144885972;
    --y: 0.1119997641;
    --x2: -0.1647961387;
    --y2: 0.4898436908;
    --delay: 0.4900014204;
  }
  .planets > div:nth-of-type(51),
.planets-2 > div:nth-of-type(51) {
    --x: 0.4544874048;
    --y: 0.3909276706;
    --x2: -0.2941264934;
    --y2: 0.1516271785;
    --delay: 0.9691285391;
  }

  .planets-2 > div {
    width: 0.5vmax;
    opacity: 0.6;
    filter: unset;
  }
}
@layer object {
  .object {
    position: absolute;
    display: grid;
    display: none;
    place-items: center;
    transform: rotateY(45deg) translateZ(6vmax);
    translate: 5vmax 5vmax;
  }
  .object .body {
    position: absolute;
    display: grid;
    place-items: center;
    --content: "🏄‍♂️";
    --content: "🐋";
    font-size: 6vmax;
    color: initial;
    z-index: 1111;
  }
  .object .body:before {
    content: var(--content);
    transform: scaleX(-1);
    filter: saturate(0) brightness(1.1) drop-shadow(0 0 1vmax rgba(0, 0, 0, 0.4));
    z-index: 1111;
  }
  .object .body:after {
    content: var(--content);
    transform: scaleX(-1) scaleY(-1) translateY(2.5vmax);
    filter: saturate(0) brightness(0);
    -webkit-mask: linear-gradient(to bottom, transparent 60%, black 80%);
            mask: linear-gradient(to bottom, transparent 60%, black 80%);
    z-index: 115;
  }
}
@layer human {
  .human {
    position: absolute;
    display: grid;
    place-items: center;
    width: 6vmax;
    height: 14vmax;
    translate: 0 17vh;
    z-index: 111;
  }
  .human:not(.shadow) {
    filter: invert(0.04) drop-shadow(0 0 1.5vmax rgba(250, 250, 250, 0.6));
  }
  .human > div {
    position: absolute;
  }
  .human .head {
    background: white;
    width: 1.5vmax;
    height: 1.6vmax;
    border-radius: 50%;
    translate: 0.2vmax -6.2vmax;
    rotate: 355deg;
  }
  .human .head:before {
    content: "";
    position: absolute;
    background: white;
    width: 0.27vmax;
    height: 0.7vmax;
    border-radius: 50%;
    translate: 1.19vmax 0.5vmin;
    rotate: 136deg;
    -webkit-animation: head-nose calc(var(--time) / 4) ease-in-out infinite;
            animation: head-nose calc(var(--time) / 4) ease-in-out infinite;
  }
  @-webkit-keyframes head-nose {
    from {
      translate: 1.19vmax 0.5vmin;
    }
    50% {
      translate: 1.06vmax 0.5vmin;
    }
    to {
      translate: 1.19vmax 0.5vmin;
    }
  }
  @keyframes head-nose {
    from {
      translate: 1.19vmax 0.5vmin;
    }
    50% {
      translate: 1.06vmax 0.5vmin;
    }
    to {
      translate: 1.19vmax 0.5vmin;
    }
  }
  .human .head:after {
    content: "";
    position: absolute;
    background: white;
    width: 1.1vmax;
    height: 0.9vmax;
    border-radius: 50%;
    translate: 0.45vmax 0.66vmax;
    rotate: 45deg;
    -webkit-animation: head-chin calc(var(--time) / 4) ease-in-out infinite;
            animation: head-chin calc(var(--time) / 4) ease-in-out infinite;
  }
  @-webkit-keyframes head-chin {
    from {
      translate: 0.45vmax 0.66vmax;
    }
    50% {
      translate: 0.2vmax 0.66vmax;
    }
    to {
      translate: 0.45vmax 0.66vmax;
    }
  }
  @keyframes head-chin {
    from {
      translate: 0.45vmax 0.66vmax;
    }
    50% {
      translate: 0.2vmax 0.66vmax;
    }
    to {
      translate: 0.45vmax 0.66vmax;
    }
  }
  .human .neck {
    background: white;
    width: 0.8vmax;
    height: 1.5vmax;
    border-radius: 50%;
    translate: 0.2vmax -5.4vmax;
  }
  .human .neck:before {
    content: "";
    position: absolute;
    width: 0.3vmax;
    height: 1.5vmax;
    background: white;
    border-radius: 50%;
    translate: 0.6vmax 0.4vmax;
    rotate: 352deg;
  }
  .human .body {
    z-index: 11;
  }
  .human .body > div {
    position: absolute;
  }
  .human .body .shoulder:before {
    content: "";
    position: absolute;
    width: 1.3vmax;
    height: 0.5vmax;
    background: white;
    border-radius: 50%;
    translate: -1.1vmax -5vmax;
    rotate: 330deg;
  }
  .human .body .shoulder:after {
    content: "";
    position: absolute;
    width: 1.3vmax;
    height: 0.5vmax;
    background: white;
    border-radius: 50%;
    translate: 0.4vmax -4.9vmax;
    rotate: 24deg;
  }
  .human .body .back {
    width: 1.3vmax;
    height: 4.1vmax;
    background: #fafafa;
    border-radius: 20%;
    translate: -0.2vmax -4.9vmax;
    rotate: 357deg;
  }
  .human .body .back:before {
    content: "";
    position: absolute;
    width: 2.9vmax;
    height: 1.5vmax;
    background: #fafafa;
    border-radius: 50%;
    translate: -1.4vmax 0.7vmax;
    rotate: 69deg;
    z-index: -1;
  }
  .human .body .back:after {
    content: "";
    position: absolute;
    width: 2.6vmax;
    height: 1vmax;
    background: #fafafa;
    border-radius: 50%;
    translate: 0.1vmax 1.1vmax;
    rotate: 96deg;
  }
  .human .body .hip .center {
    position: absolute;
    width: 1.6vmax;
    height: 1.8vmax;
    background: radial-gradient(white, #f5f5f5);
    border-radius: 39.6%;
    translate: -0.3vmax -3vmax;
    rotate: 267deg;
    display: grid;
  }
  .human .body .hip:before {
    content: "";
    position: absolute;
    width: 1.6vmax;
    height: 2.2vmax;
    background: radial-gradient(white, #e7e4e4);
    border-radius: 46.5%;
    translate: -0.6vmax -2.5vmax;
    rotate: 8deg;
  }
  .human .body .hip:after {
    content: "";
    position: absolute;
    width: 1.3vmax;
    height: 2.2vmax;
    background: radial-gradient(white, #f6f5f5);
    border-radius: 41.1%;
    translate: 0.3vmax -2.2vmax;
    rotate: 161deg;
  }
  .human .leg.right {
    width: 1.1vmax;
    height: 2.9vmax;
    background: white;
    border-radius: 50%;
    translate: 1.2vmax 0.4vmax;
    rotate: 348deg;
  }
  .human .leg.right:after {
    content: "";
    position: absolute;
    width: 0.7vmax;
    height: 2.9vmax;
    background: white;
    border-radius: 50%;
    translate: 0.5vmax 0.2vmax;
    rotate: 13deg;
  }
  .human .leg.right .knee {
    position: absolute;
    height: 1.7vmax;
    width: 0.75vmax;
    background: white;
    border-radius: 39.6%;
    translate: 0vmax 2.2vmax;
    rotate: 15deg;
  }
  .human .leg.right .lower {
    position: absolute;
    height: 3.2vmax;
    width: 0.8vmax;
    background: white;
    border-radius: 50%;
    translate: -0.3vmax 2.4vmax;
    rotate: 15deg;
  }
  .human .leg.right .lower:before {
    content: "";
    position: absolute;
    width: 0.5vmax;
    height: 1.5vmax;
    background: white;
    border-radius: 67.8%;
    translate: 0.5vmax 2.6vmax;
    rotate: 66deg;
  }
  .human .leg.right .lower:after {
    content: "";
    position: absolute;
    width: 0.5vmax;
    height: 1.5vmax;
    background: white;
    border-radius: 27.8%;
    translate: 0.1vmax 2.3vmax;
    rotate: 0deg;
  }
  .human .leg.left {
    width: 1.1vmax;
    height: 2.9vmax;
    background: #f4efef;
    border-radius: 50%;
    translate: -0.3vmax 0.4vmax;
    rotate: 2deg;
    filter: invert(0.04);
    z-index: -1;
  }
  .human .leg.left:after {
    content: "";
    position: absolute;
    width: 0.7vmax;
    height: 2.9vmax;
    background: #f4efef;
    border-radius: 50%;
    translate: 0.5vmax 0.2vmax;
    rotate: 13deg;
  }
  .human .leg.left .knee {
    position: absolute;
    height: 1.7vmax;
    width: 0.75vmax;
    background: #e7e4e4;
    border-radius: 39.6%;
    translate: 0vmax 2.2vmax;
    rotate: 5deg;
  }
  .human .leg.left .lower {
    position: absolute;
    height: 3.2vmax;
    width: 0.8vmax;
    background: #eae6e6;
    border-radius: 50%;
    translate: -0.1vmax 1.9vmax;
    rotate: 5deg;
  }
  .human .leg.left .lower:before {
    content: "";
    position: absolute;
    width: 0.5vmax;
    height: 1.5vmax;
    background: #e7e4e4;
    border-radius: 67.8%;
    translate: 0.5vmax 2.6vmax;
    rotate: 47deg;
  }
  .human .leg.left .lower:after {
    content: "";
    position: absolute;
    width: 0.5vmax;
    height: 1.55vmax;
    background: #e7e4e4;
    border-radius: 27.8%;
    translate: 0.1vmax 2.3vmax;
    rotate: 0deg;
  }
  .human .arm.right {
    position: absolute;
    width: 0.7vmax;
    height: 2.9vmax;
    background: white;
    border-radius: 27.8%;
    translate: 1.6vmax -3.1vmax;
    rotate: 346deg;
    -webkit-animation: arm-right calc(var(--time) / 4) ease-in-out infinite;
            animation: arm-right calc(var(--time) / 4) ease-in-out infinite;
  }
  @-webkit-keyframes arm-right {
    from {
      rotate: 346deg;
    }
    50% {
      rotate: 350deg;
    }
    to {
      rotate: 346deg;
    }
  }
  @keyframes arm-right {
    from {
      rotate: 346deg;
    }
    50% {
      rotate: 350deg;
    }
    to {
      rotate: 346deg;
    }
  }
  .human .arm.right:before {
    content: "";
    position: absolute;
    width: 0.3vmax;
    height: 2.45vmax;
    background: white;
    border-radius: 27.8%;
    translate: 0.3vmax 2.1vmax;
    rotate: 6deg;
  }
  .human .arm.right:after {
    content: "";
    position: absolute;
    width: 0.4vmax;
    height: 2.15vmax;
    background: white;
    border-radius: 27.8%;
    translate: 0.1vmax 2.1vmax;
    rotate: 351deg;
  }
  .human .arm.right .hand {
    position: absolute;
    width: 0.3vmax;
    height: 0.85vmax;
    background: white;
    border-radius: 27.8%;
    translate: 0.3vmax 3.7vmax;
    rotate: 353deg;
  }
  .human .arm.right .hand:after {
    content: "";
    position: absolute;
    width: 0.5vmax;
    height: 0.55vmax;
    background: white;
    border-radius: 39.2%;
    translate: -0.2vmax 0.6vmax;
    rotate: 65deg;
  }
  .human .arm.left {
    width: 0.7vmax;
    height: 2.5vmax;
    background: white;
    border-radius: 59.8%;
    translate: -0.9vmax -3.4vmax;
    rotate: 359deg;
    filter: invert(0.1);
    z-index: -2;
    -webkit-animation: arm-left calc(var(--time) / 4) ease-in-out infinite;
            animation: arm-left calc(var(--time) / 4) ease-in-out infinite;
  }
  @-webkit-keyframes arm-left {
    from {
      rotate: 359deg;
    }
    50% {
      rotate: 364deg;
    }
    to {
      rotate: 359deg;
    }
  }
  @keyframes arm-left {
    from {
      rotate: 359deg;
    }
    50% {
      rotate: 364deg;
    }
    to {
      rotate: 359deg;
    }
  }
  .human .arm.left:before {
    content: "";
    position: absolute;
    width: 0.3vmax;
    height: 2.45vmax;
    background: white;
    border-radius: 27.8%;
    translate: 0.3vmax 1.8vmax;
    rotate: 6deg;
  }
  .human .arm.left:after {
    content: "";
    position: absolute;
    width: 0.4vmax;
    height: 2.15vmax;
    background: white;
    border-radius: 27.8%;
    translate: 0.2vmax 2.1vmax;
    rotate: 351deg;
  }
  .human .arm.left .hand {
    position: absolute;
    width: 0.3vmax;
    height: 0.85vmax;
    background: white;
    border-radius: 27.8%;
    translate: 0.3vmax 3.7vmax;
    rotate: 353deg;
  }
  .human .arm.left .hand:after {
    content: "";
    position: absolute;
    width: 0.5vmax;
    height: 0.55vmax;
    background: white;
    border-radius: 39.2%;
    translate: -0.1vmax 0.2vmax;
    rotate: 65deg;
  }
  .human.shadow {
    transform: scaleY(-1) translateY(-9vmax);
    filter: invert(0.2);
    opacity: 0.5;
    z-index: 0;
    -webkit-mask: linear-gradient(to top, black 25%, transparent 35%);
            mask: linear-gradient(to top, black 25%, transparent 35%);
  }
  .human.shadow .leg.left .lower:before {
    rotate: 102deg;
  }
  .human.shadow .leg.right .lower:before {
    rotate: 102deg;
  }
}
.highlight {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: radial-gradient(50vmin 70vmin at 70% 70%, rgba(255, 255, 255, 0.12), transparent), radial-gradient(40vmin 30vmin at 70% 70%, rgba(255, 255, 255, 0.12), transparent), radial-gradient(40vmin 60vmin at 10% 70%, rgba(255, 255, 255, 0.14), transparent), radial-gradient(80vmin 100vh at 30% 70%, rgba(255, 255, 255, 0.1), transparent);
  filter: blur(5vmin);
  pointer-events: none;
}

.color-filter {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: conic-gradient(at 50% 60%, rgba(50, 56, 92, 0.27), rgba(152, 75, 132, 0.07), rgba(150, 75, 152, 0.04), rgba(50, 56, 92, 0.27));
  mix-blend-mode: color;
  pointer-events: none;
}

.audio-icon-button {
  border: 0.0625rem white solid;
  padding: 0.5rem;
  width: 2.265rem;
  height: 2.265rem;
  border-radius: 50%;
  background: transparent;
  position: fixed;
  right: 2rem;
  top: 2rem;
  z-index: 4200;
  aspect-ratio: 1;
  display: flex;
  gap: 0.125rem;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
@media (hover) {
  .audio-icon-button {
    cursor: pointer;
  }
  .audio-icon-button:hover {
    opacity: 1;
  }
}
.audio-icon-button .bar {
  background: white;
  height: 1.5rem;
  width: 0.0825rem;
}
.audio-icon-button .bar:nth-of-type(1), .audio-icon-button .bar:nth-of-type(5) {
  height: 0.5rem;
}
.audio-icon-button .bar:nth-of-type(2), .audio-icon-button .bar:nth-of-type(4) {
  height: 1rem;
}

@layer global {
  body {
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
    background-color: var(--color-surface);
    color: var(--color-primary);
    position: absolute;
    inset: 0;
    perspective: 80vmax;
    margin: 0;
    overflow: hidden;
  }
  body:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 111;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.1);
    -webkit-mask: linear-gradient(black 10%, transparent 30%, transparent 70%, black 80%);
            mask: linear-gradient(black 10%, transparent 30%, transparent 70%, black 80%);
    -webkit-backdrop-filter: blur(5vmin) invert(0);
            backdrop-filter: blur(5vmin) invert(0);
  }

  * {
    box-sizing: border-box;
  }
}
a.labs-follow-me {
  left: 2rem;
  right: 2rem;
  bottom: 1rem;
  top: unset;
  text-align: center;
}