@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.5071598006;
    --y: 0.4925404417;
    --x2: -0.4611070202;
    --y2: 0.0355548854;
    --delay: 0.9659317097;
  }
  .startails > div:nth-of-type(2) {
    --x: 0.5580756363;
    --y: 0.234092843;
    --x2: -0.3347427102;
    --y2: -0.1175981237;
    --delay: 0.7004218068;
  }
  .startails > div:nth-of-type(3) {
    --x: 0.0388860658;
    --y: 0.4528322915;
    --x2: 0.113730419;
    --y2: 0.3948010262;
    --delay: 0.4306026801;
  }
  .startails > div:nth-of-type(4) {
    --x: 0.4509644989;
    --y: 0.2775838699;
    --x2: 0.1004824255;
    --y2: -0.3662791268;
    --delay: 0.1815660698;
  }
  .startails > div:nth-of-type(5) {
    --x: 0.1086755513;
    --y: 0.5210859867;
    --x2: -0.4097542122;
    --y2: 0.4163286057;
    --delay: 0.4515666431;
  }
  .startails > div:nth-of-type(6) {
    --x: 0.7620453322;
    --y: 0.4104116742;
    --x2: -0.3233634796;
    --y2: 0.3863479676;
    --delay: 0.0770021511;
  }
  .startails > div:nth-of-type(7) {
    --x: 0.2312972799;
    --y: 0.5019309825;
    --x2: 0.2539876077;
    --y2: 0.4120111056;
    --delay: 0.0135865412;
  }
  .startails > div:nth-of-type(8) {
    --x: 0.6465796461;
    --y: 0.5662049057;
    --x2: -0.0979109613;
    --y2: -0.0880681726;
    --delay: 0.3436402494;
  }
  .startails > div:nth-of-type(9) {
    --x: 0.1016501588;
    --y: 0.0329729817;
    --x2: 0.4764587784;
    --y2: 0.4665609631;
    --delay: 0.1895638993;
  }
  .startails > div:nth-of-type(10) {
    --x: 0.6792077478;
    --y: 0.4456073692;
    --x2: -0.0816473118;
    --y2: 0.4899835458;
    --delay: 0.7939314085;
  }
  .startails > div:nth-of-type(11) {
    --x: 0.7664399295;
    --y: 0.61009716;
    --x2: -0.0284547654;
    --y2: -0.1470892733;
    --delay: 0.5959059868;
  }
  .startails > div:nth-of-type(12) {
    --x: 0.3008625809;
    --y: 0.2760195388;
    --x2: 0.2348433396;
    --y2: -0.2755528969;
    --delay: 0.7630863517;
  }
  .startails > div:nth-of-type(13) {
    --x: 0.9789115554;
    --y: 0.1019791408;
    --x2: -0.4158917717;
    --y2: -0.3419911676;
    --delay: 0.191600448;
  }
  .startails > div:nth-of-type(14) {
    --x: 0.9746566957;
    --y: 0.7074820556;
    --x2: 0.1365624584;
    --y2: -0.4018241098;
    --delay: 0.9443990337;
  }
  .startails > div:nth-of-type(15) {
    --x: 0.8843107777;
    --y: 0.6218548295;
    --x2: 0.1571386854;
    --y2: -0.4605163051;
    --delay: 0.9304997083;
  }
  .startails > div:nth-of-type(16) {
    --x: 0.7689063203;
    --y: 0.5154306545;
    --x2: 0.4372115921;
    --y2: -0.1373061907;
    --delay: 0.0178414246;
  }
  .startails > div:nth-of-type(17) {
    --x: 0.5939412179;
    --y: 0.0710144544;
    --x2: -0.4122553336;
    --y2: -0.3304761428;
    --delay: 0.4318997057;
  }
  .startails > div:nth-of-type(18) {
    --x: 0.274933763;
    --y: 0.3553910611;
    --x2: 0.0878911661;
    --y2: 0.1444538126;
    --delay: 0.3757571365;
  }
  .startails > div:nth-of-type(19) {
    --x: 0.3570847338;
    --y: 0.4649374622;
    --x2: 0.0299530829;
    --y2: 0.3941472863;
    --delay: 0.543927897;
  }
  .startails > div:nth-of-type(20) {
    --x: 0.9335195141;
    --y: 0.6943347374;
    --x2: -0.4530921787;
    --y2: 0.1732121789;
    --delay: 0.6849660943;
  }
  .startails > div:nth-of-type(21) {
    --x: 0.122104328;
    --y: 0.4224054232;
    --x2: 0.0187126359;
    --y2: 0.2354135908;
    --delay: 0.6247365062;
  }
  .startails > div:nth-of-type(22) {
    --x: 0.3701576546;
    --y: 0.8308471004;
    --x2: -0.3022412393;
    --y2: -0.2420356702;
    --delay: 0.0933471207;
  }
  .startails > div:nth-of-type(23) {
    --x: 0.2927791422;
    --y: 0.6619302583;
    --x2: -0.017826486;
    --y2: -0.074889571;
    --delay: 0.6486184232;
  }
  .startails > div:nth-of-type(24) {
    --x: 0.1019971757;
    --y: 0.1690905181;
    --x2: 0.0242846866;
    --y2: 0.2657239928;
    --delay: 0.3589818598;
  }
  .startails > div:nth-of-type(25) {
    --x: 0.0511987513;
    --y: 0.4972909419;
    --x2: 0.2362876898;
    --y2: -0.22511631;
    --delay: 0.1000345814;
  }
  .startails > div:nth-of-type(26) {
    --x: 0.1704593678;
    --y: 0.9500124915;
    --x2: 0.2271054251;
    --y2: -0.364935348;
    --delay: 0.7324797079;
  }
  .startails > div:nth-of-type(27) {
    --x: 0.858399622;
    --y: 0.5761019668;
    --x2: -0.134316673;
    --y2: 0.1044838821;
    --delay: 0.5622213226;
  }
  .startails > div:nth-of-type(28) {
    --x: 0.2176976262;
    --y: 0.350042473;
    --x2: 0.1765908911;
    --y2: -0.1926145879;
    --delay: 0.8846803913;
  }
  .startails > div:nth-of-type(29) {
    --x: 0.8118235689;
    --y: 0.1987552053;
    --x2: 0.1945006014;
    --y2: -0.37644832;
    --delay: 0.282418239;
  }
  .startails > div:nth-of-type(30) {
    --x: 0.6892310848;
    --y: 0.8733419432;
    --x2: 0.4950034431;
    --y2: 0.2898030184;
    --delay: 0.3670021787;
  }
  .startails > div:nth-of-type(31) {
    --x: 0.7725889055;
    --y: 0.4911052214;
    --x2: 0.2406901149;
    --y2: -0.1577219257;
    --delay: 0.5317044715;
  }
  .startails > div:nth-of-type(32) {
    --x: 0.3013051665;
    --y: 0.009011324;
    --x2: -0.2808389107;
    --y2: 0.3770984238;
    --delay: 0.2038541943;
  }
  .startails > div:nth-of-type(33) {
    --x: 0.2362221686;
    --y: 0.0929698944;
    --x2: -0.4647618371;
    --y2: -0.4610080611;
    --delay: 0.6334783597;
  }
  .startails > div:nth-of-type(34) {
    --x: 0.9751250794;
    --y: 0.9344964481;
    --x2: -0.109341568;
    --y2: -0.4430771444;
    --delay: 0.5061856411;
  }
  .startails > div:nth-of-type(35) {
    --x: 0.9293846082;
    --y: 0.2884464803;
    --x2: 0.3860437008;
    --y2: 0.4123456788;
    --delay: 0.1353939967;
  }
  .startails > div:nth-of-type(36) {
    --x: 0.8470197574;
    --y: 0.5404456037;
    --x2: 0.1170708907;
    --y2: -0.0806767359;
    --delay: 0.6087966475;
  }
  .startails > div:nth-of-type(37) {
    --x: 0.0546745718;
    --y: 0.1996328941;
    --x2: -0.0469604371;
    --y2: 0.1417004935;
    --delay: 0.324347677;
  }
  .startails > div:nth-of-type(38) {
    --x: 0.9110571164;
    --y: 0.8241049695;
    --x2: 0.1028911628;
    --y2: -0.054542991;
    --delay: 0.7330242786;
  }
  .startails > div:nth-of-type(39) {
    --x: 0.7212496908;
    --y: 0.9389466044;
    --x2: -0.288834612;
    --y2: -0.048489776;
    --delay: 0.9384832037;
  }
  .startails > div:nth-of-type(40) {
    --x: 0.3003666602;
    --y: 0.9766348201;
    --x2: -0.0386491115;
    --y2: 0.1234407516;
    --delay: 0.8341026586;
  }
  .startails > div:nth-of-type(41) {
    --x: 0.3293248648;
    --y: 0.8939118878;
    --x2: -0.2180093561;
    --y2: 0.3119429812;
    --delay: 0.4188226372;
  }
  .startails > div:nth-of-type(42) {
    --x: 0.522468525;
    --y: 0.0644727706;
    --x2: 0.4940231346;
    --y2: 0.3066049966;
    --delay: 0.4423033303;
  }
  .startails > div:nth-of-type(43) {
    --x: 0.0166207639;
    --y: 0.4766201236;
    --x2: -0.2444209758;
    --y2: 0.3191418549;
    --delay: 0.7274835309;
  }
  .startails > div:nth-of-type(44) {
    --x: 0.3794660387;
    --y: 0.994499581;
    --x2: 0.0480359886;
    --y2: 0.4226766373;
    --delay: 0.7577615536;
  }
  .startails > div:nth-of-type(45) {
    --x: 0.2463267977;
    --y: 0.411496878;
    --x2: -0.4234525833;
    --y2: 0.3671109263;
    --delay: 0.087730866;
  }
  .startails > div:nth-of-type(46) {
    --x: 0.9136162402;
    --y: 0.8451212749;
    --x2: 0.1506218422;
    --y2: -0.3151795484;
    --delay: 0.3295070964;
  }
  .startails > div:nth-of-type(47) {
    --x: 0.3191620269;
    --y: 0.5780392441;
    --x2: 0.4857231668;
    --y2: 0.0356042268;
    --delay: 0.8197447828;
  }
  .startails > div:nth-of-type(48) {
    --x: 0.9043169473;
    --y: 0.1218782907;
    --x2: 0.4631516999;
    --y2: -0.1645758412;
    --delay: 0.2661273902;
  }
  .startails > div:nth-of-type(49) {
    --x: 0.8731128614;
    --y: 0.5746456638;
    --x2: -0.2803292923;
    --y2: -0.1864599011;
    --delay: 0.0723311282;
  }
  .startails > div:nth-of-type(50) {
    --x: 0.0065732463;
    --y: 0.1991888209;
    --x2: 0.2140447523;
    --y2: 0.3239258932;
    --delay: 0.5069310544;
  }
  .startails > div:nth-of-type(51) {
    --x: 0.0734545904;
    --y: 0.7665464796;
    --x2: 0.1892905713;
    --y2: -0.1519983796;
    --delay: 0.609730656;
  }
  .startails > div:nth-of-type(52) {
    --x: 0.8141007038;
    --y: 0.7351037334;
    --x2: 0.1641596287;
    --y2: 0.4424474125;
    --delay: 0.2454315897;
  }
  .startails > div:nth-of-type(53) {
    --x: 0.9972615393;
    --y: 0.7913485281;
    --x2: -0.0947819565;
    --y2: 0.1065521494;
    --delay: 0.9016475799;
  }
  .startails > div:nth-of-type(54) {
    --x: 0.7589244088;
    --y: 0.4868847868;
    --x2: 0.1694895129;
    --y2: 0.1881962306;
    --delay: 0.1959210827;
  }
  .startails > div:nth-of-type(55) {
    --x: 0.7036306834;
    --y: 0.4309737674;
    --x2: -0.2088885824;
    --y2: 0.2013946284;
    --delay: 0.0213946088;
  }
  .startails > div:nth-of-type(56) {
    --x: 0.0648838064;
    --y: 0.2283901659;
    --x2: -0.2736616046;
    --y2: 0.4497585225;
    --delay: 0.3412298698;
  }
  .startails > div:nth-of-type(57) {
    --x: 0.4436599363;
    --y: 0.139012326;
    --x2: 0.1124869356;
    --y2: -0.4864070731;
    --delay: 0.8726912163;
  }
  .startails > div:nth-of-type(58) {
    --x: 0.8589488825;
    --y: 0.4811220167;
    --x2: -0.3054601471;
    --y2: 0.4504565865;
    --delay: 0.6117430171;
  }
  .startails > div:nth-of-type(59) {
    --x: 0.5855931863;
    --y: 0.3660069252;
    --x2: -0.2969520112;
    --y2: -0.0639433852;
    --delay: 0.305808791;
  }
  .startails > div:nth-of-type(60) {
    --x: 0.3132232188;
    --y: 0.8479547024;
    --x2: -0.4602031098;
    --y2: 0.4580977142;
    --delay: 0.0063186879;
  }
  .startails > div:nth-of-type(61) {
    --x: 0.0024403334;
    --y: 0.3064563506;
    --x2: 0.2044063782;
    --y2: 0.4332943059;
    --delay: 0.1726838902;
  }
  .startails > div:nth-of-type(62) {
    --x: 0.6489847041;
    --y: 0.9789536647;
    --x2: 0.0597481523;
    --y2: -0.1414907956;
    --delay: 0.4621586366;
  }
  .startails > div:nth-of-type(63) {
    --x: 0.942085296;
    --y: 0.1156834898;
    --x2: 0.232333701;
    --y2: -0.2791072585;
    --delay: 0.9423757134;
  }
  .startails > div:nth-of-type(64) {
    --x: 0.2753864255;
    --y: 0.7897189982;
    --x2: 0.4150097847;
    --y2: -0.4678218178;
    --delay: 0.4183840198;
  }
  .startails > div:nth-of-type(65) {
    --x: 0.3331476163;
    --y: 0.9959260418;
    --x2: -0.4398971028;
    --y2: -0.2257987598;
    --delay: 0.8225003015;
  }
  .startails > div:nth-of-type(66) {
    --x: 0.4595876407;
    --y: 0.212373967;
    --x2: -0.3826441327;
    --y2: 0.3390063041;
    --delay: 0.2938074488;
  }
  .startails > div:nth-of-type(67) {
    --x: 0.0549384991;
    --y: 0.559033881;
    --x2: -0.1754340147;
    --y2: 0.4801004114;
    --delay: 0.9379954756;
  }
  .startails > div:nth-of-type(68) {
    --x: 0.2191785837;
    --y: 0.988703551;
    --x2: 0.3901529493;
    --y2: 0.3710540235;
    --delay: 0.3235247656;
  }
  .startails > div:nth-of-type(69) {
    --x: 0.2121323422;
    --y: 0.5197203689;
    --x2: 0.0180584452;
    --y2: 0.1939285622;
    --delay: 0.9886580446;
  }
  .startails > div:nth-of-type(70) {
    --x: 0.7343310736;
    --y: 0.457871233;
    --x2: -0.062015087;
    --y2: 0.3858005888;
    --delay: 0.355681871;
  }
  .startails > div:nth-of-type(71) {
    --x: 0.5768064999;
    --y: 0.8346170203;
    --x2: 0.4078889705;
    --y2: 0.0465745582;
    --delay: 0.6147165293;
  }
  .startails > div:nth-of-type(72) {
    --x: 0.529854576;
    --y: 0.7959404084;
    --x2: 0.2281296207;
    --y2: 0.1041831873;
    --delay: 0.4059043262;
  }
  .startails > div:nth-of-type(73) {
    --x: 0.5832841359;
    --y: 0.5767466989;
    --x2: 0.339454867;
    --y2: -0.4353590804;
    --delay: 0.12854563;
  }
  .startails > div:nth-of-type(74) {
    --x: 0.9333581827;
    --y: 0.5303173616;
    --x2: 0.2007769171;
    --y2: -0.0525104673;
    --delay: 0.1637381204;
  }
  .startails > div:nth-of-type(75) {
    --x: 0.5325170343;
    --y: 0.1356831949;
    --x2: -0.2991843701;
    --y2: 0.0263847816;
    --delay: 0.2534441898;
  }
  .startails > div:nth-of-type(76) {
    --x: 0.5395836391;
    --y: 0.8780753943;
    --x2: -0.1127207234;
    --y2: -0.0994376068;
    --delay: 0.400131272;
  }
  .startails > div:nth-of-type(77) {
    --x: 0.5957247608;
    --y: 0.1209016687;
    --x2: -0.0023765596;
    --y2: -0.2780975879;
    --delay: 0.1834669604;
  }
  .startails > div:nth-of-type(78) {
    --x: 0.40509617;
    --y: 0.6804985147;
    --x2: -0.270591861;
    --y2: 0.0361894508;
    --delay: 0.0431421664;
  }
  .startails > div:nth-of-type(79) {
    --x: 0.0565636794;
    --y: 0.3227564245;
    --x2: -0.4617292485;
    --y2: 0.0261806091;
    --delay: 0.8695100927;
  }
  .startails > div:nth-of-type(80) {
    --x: 0.3126204429;
    --y: 0.5052458548;
    --x2: 0.3027895823;
    --y2: -0.2693073191;
    --delay: 0.4988248987;
  }
  .startails > div:nth-of-type(81) {
    --x: 0.8580749032;
    --y: 0.5718458666;
    --x2: 0.4165666864;
    --y2: -0.0117717962;
    --delay: 0.7527205157;
  }
  .startails > div:nth-of-type(82) {
    --x: 0.901248651;
    --y: 0.3516695227;
    --x2: 0.098617452;
    --y2: -0.2951352637;
    --delay: 0.3949994782;
  }
  .startails > div:nth-of-type(83) {
    --x: 0.0094492712;
    --y: 0.6440753921;
    --x2: 0.4694234573;
    --y2: 0.4847505842;
    --delay: 0.0422666142;
  }
  .startails > div:nth-of-type(84) {
    --x: 0.5426405877;
    --y: 0.8175386565;
    --x2: 0.2513144743;
    --y2: -0.0668836236;
    --delay: 0.3852632996;
  }
  .startails > div:nth-of-type(85) {
    --x: 0.2812031211;
    --y: 0.6937307874;
    --x2: -0.0766815421;
    --y2: 0.0362401402;
    --delay: 0.9198721714;
  }
  .startails > div:nth-of-type(86) {
    --x: 0.3425365953;
    --y: 0.4245464516;
    --x2: -0.2300989041;
    --y2: 0.4594307971;
    --delay: 0.0356284052;
  }
  .startails > div:nth-of-type(87) {
    --x: 0.1144956937;
    --y: 0.7786551922;
    --x2: -0.0338747887;
    --y2: 0.041405109;
    --delay: 0.7247722467;
  }
  .startails > div:nth-of-type(88) {
    --x: 0.5268199033;
    --y: 0.5458424344;
    --x2: 0.0060623348;
    --y2: -0.0266528786;
    --delay: 0.4906862403;
  }
  .startails > div:nth-of-type(89) {
    --x: 0.0011366258;
    --y: 0.5596265023;
    --x2: -0.1360005354;
    --y2: -0.1089971408;
    --delay: 0.1329395898;
  }
  .startails > div:nth-of-type(90) {
    --x: 0.2649964834;
    --y: 0.7430904885;
    --x2: -0.2623980338;
    --y2: -0.0819341047;
    --delay: 0.7531816471;
  }
  .startails > div:nth-of-type(91) {
    --x: 0.8050620692;
    --y: 0.0414790859;
    --x2: -0.0603751298;
    --y2: -0.0424085785;
    --delay: 0.6054597643;
  }
  .startails > div:nth-of-type(92) {
    --x: 0.3475942015;
    --y: 0.7663826332;
    --x2: -0.3357242687;
    --y2: -0.258774301;
    --delay: 0.5021049489;
  }
  .startails > div:nth-of-type(93) {
    --x: 0.2577671068;
    --y: 0.0239784212;
    --x2: 0.1077822281;
    --y2: 0.1867897745;
    --delay: 0.5600237526;
  }
  .startails > div:nth-of-type(94) {
    --x: 0.0294834188;
    --y: 0.0286027402;
    --x2: -0.3907356775;
    --y2: 0.3402257914;
    --delay: 0.8538051948;
  }
  .startails > div:nth-of-type(95) {
    --x: 0.6350523052;
    --y: 0.1220675591;
    --x2: -0.1028833575;
    --y2: 0.1009493932;
    --delay: 0.8744102882;
  }
  .startails > div:nth-of-type(96) {
    --x: 0.4326094808;
    --y: 0.9578113979;
    --x2: -0.3946683996;
    --y2: 0.4346400502;
    --delay: 0.2879881542;
  }
  .startails > div:nth-of-type(97) {
    --x: 0.9312597503;
    --y: 0.9003805071;
    --x2: 0.0044167681;
    --y2: 0.0420688305;
    --delay: 0.1799721895;
  }
  .startails > div:nth-of-type(98) {
    --x: 0.3565000329;
    --y: 0.4138956922;
    --x2: -0.0670092868;
    --y2: 0.257845732;
    --delay: 0.5297697984;
  }
  .startails > div:nth-of-type(99) {
    --x: 0.2378161483;
    --y: 0.1283137152;
    --x2: -0.3711473659;
    --y2: -0.3228841808;
    --delay: 0.9798337182;
  }
  .startails > div:nth-of-type(100) {
    --x: 0.9987271397;
    --y: 0.7521609028;
    --x2: -0.4597644557;
    --y2: -0.4919125099;
    --delay: 0.9786262451;
  }
  .startails > div:nth-of-type(101) {
    --x: 0.6004310682;
    --y: 0.6786420152;
    --x2: 0.0667781406;
    --y2: -0.4447040323;
    --delay: 0.4089754781;
  }
  .startails > div:nth-of-type(102) {
    --x: 0.1664508886;
    --y: 0.6000509914;
    --x2: -0.4613772953;
    --y2: -0.0683301692;
    --delay: 0.2796476041;
  }
  .startails > div:nth-of-type(103) {
    --x: 0.8273388123;
    --y: 0.3299590938;
    --x2: -0.2564338562;
    --y2: 0.1812503516;
    --delay: 0.930410563;
  }
  .startails > div:nth-of-type(104) {
    --x: 0.508773369;
    --y: 0.1855582821;
    --x2: -0.4379598338;
    --y2: -0.4441699767;
    --delay: 0.2225463657;
  }
  .startails > div:nth-of-type(105) {
    --x: 0.4298087994;
    --y: 0.1563443154;
    --x2: 0.2955269281;
    --y2: -0.2996310215;
    --delay: 0.6751045381;
  }
  .startails > div:nth-of-type(106) {
    --x: 0.8556455392;
    --y: 0.2388382943;
    --x2: 0.0334474364;
    --y2: -0.2656986051;
    --delay: 0.4632205693;
  }
  .startails > div:nth-of-type(107) {
    --x: 0.4307913474;
    --y: 0.3902798221;
    --x2: -0.1274377914;
    --y2: -0.2297745377;
    --delay: 0.9192701509;
  }
  .startails > div:nth-of-type(108) {
    --x: 0.3196565257;
    --y: 0.5468747883;
    --x2: 0.4375308948;
    --y2: 0.05311286;
    --delay: 0.1166404934;
  }
  .startails > div:nth-of-type(109) {
    --x: 0.0695797016;
    --y: 0.9187082834;
    --x2: 0.3783661249;
    --y2: -0.3780918024;
    --delay: 0.3260070889;
  }
  .startails > div:nth-of-type(110) {
    --x: 0.7356836912;
    --y: 0.8864515687;
    --x2: -0.3497629795;
    --y2: 0.3999365731;
    --delay: 0.0383435235;
  }
  .startails > div:nth-of-type(111) {
    --x: 0.3568964408;
    --y: 0.0818455607;
    --x2: 0.3984751299;
    --y2: 0.4062956697;
    --delay: 0.350589197;
  }
  .startails > div:nth-of-type(112) {
    --x: 0.538530306;
    --y: 0.6517720799;
    --x2: 0.0526498121;
    --y2: -0.3411938311;
    --delay: 0.1034490735;
  }
  .startails > div:nth-of-type(113) {
    --x: 0.2939547463;
    --y: 0.1815168429;
    --x2: 0.4799204617;
    --y2: -0.0772531365;
    --delay: 0.2407103383;
  }
  .startails > div:nth-of-type(114) {
    --x: 0.1328215515;
    --y: 0.5140573587;
    --x2: -0.0185648377;
    --y2: -0.1501858676;
    --delay: 0.35733777;
  }
  .startails > div:nth-of-type(115) {
    --x: 0.9824013084;
    --y: 0.4918475603;
    --x2: 0.0080103896;
    --y2: 0.0190821267;
    --delay: 0.7280212327;
  }
  .startails > div:nth-of-type(116) {
    --x: 0.0770703208;
    --y: 0.1167576383;
    --x2: -0.3818689508;
    --y2: -0.1204323308;
    --delay: 0.2224612571;
  }
  .startails > div:nth-of-type(117) {
    --x: 0.3127294518;
    --y: 0.1690111254;
    --x2: 0.4433743408;
    --y2: -0.443542739;
    --delay: 0.3487312378;
  }
  .startails > div:nth-of-type(118) {
    --x: 0.2216283179;
    --y: 0.0153706301;
    --x2: -0.2557694885;
    --y2: -0.1013706497;
    --delay: 0.7970048881;
  }
  .startails > div:nth-of-type(119) {
    --x: 0.4606604878;
    --y: 0.8845456127;
    --x2: -0.3315497951;
    --y2: -0.3418914224;
    --delay: 0.0973969826;
  }
  .startails > div:nth-of-type(120) {
    --x: 0.2875499955;
    --y: 0.1037522664;
    --x2: 0.1825844039;
    --y2: -0.411143108;
    --delay: 0.7980853861;
  }
  .startails > div:nth-of-type(121) {
    --x: 0.2328955698;
    --y: 0.7232388488;
    --x2: -0.065006503;
    --y2: 0.2110939475;
    --delay: 0.0308421421;
  }
  .startails > div:nth-of-type(122) {
    --x: 0.4736899595;
    --y: 0.4626158933;
    --x2: -0.1394917577;
    --y2: 0.0474770842;
    --delay: 0.0842677085;
  }
  .startails > div:nth-of-type(123) {
    --x: 0.3337845024;
    --y: 0.057945608;
    --x2: -0.050250273;
    --y2: 0.2118878121;
    --delay: 0.6642233651;
  }
  .startails > div:nth-of-type(124) {
    --x: 0.6089129334;
    --y: 0.3379825539;
    --x2: -0.4637030642;
    --y2: -0.3348276068;
    --delay: 0.7063714973;
  }
  .startails > div:nth-of-type(125) {
    --x: 0.0509782374;
    --y: 0.1970687845;
    --x2: 0.2137315915;
    --y2: 0.2179018497;
    --delay: 0.0734689327;
  }
  .startails > div:nth-of-type(126) {
    --x: 0.8093863851;
    --y: 0.736086816;
    --x2: 0.0900438895;
    --y2: 0.0256459331;
    --delay: 0.6300012697;
  }
  .startails > div:nth-of-type(127) {
    --x: 0.037259252;
    --y: 0.2219075471;
    --x2: -0.4111981206;
    --y2: 0.2890016919;
    --delay: 0.6577042896;
  }
  .startails > div:nth-of-type(128) {
    --x: 0.1784407879;
    --y: 0.2692173613;
    --x2: -0.4241303829;
    --y2: -0.479449472;
    --delay: 0.7316574666;
  }
  .startails > div:nth-of-type(129) {
    --x: 0.5345060078;
    --y: 0.3942697586;
    --x2: -0.3817262712;
    --y2: 0.4215164861;
    --delay: 0.9792846512;
  }
  .startails > div:nth-of-type(130) {
    --x: 0.2656485263;
    --y: 0.6033048816;
    --x2: 0.0765494471;
    --y2: -0.4324076061;
    --delay: 0.5433402107;
  }
  .startails > div:nth-of-type(131) {
    --x: 0.1432925554;
    --y: 0.2450066113;
    --x2: -0.1659023391;
    --y2: -0.0875656592;
    --delay: 0.8101131858;
  }
  .startails > div:nth-of-type(132) {
    --x: 0.4553185471;
    --y: 0.4980132939;
    --x2: 0.0159176066;
    --y2: 0.2901212206;
    --delay: 0.1077884835;
  }
  .startails > div:nth-of-type(133) {
    --x: 0.352965958;
    --y: 0.9211610728;
    --x2: -0.2762723524;
    --y2: -0.1023795943;
    --delay: 0.0765927206;
  }
  .startails > div:nth-of-type(134) {
    --x: 0.373691522;
    --y: 0.7124680446;
    --x2: 0.2230029483;
    --y2: 0.2168403533;
    --delay: 0.5815242055;
  }
  .startails > div:nth-of-type(135) {
    --x: 0.9891392728;
    --y: 0.5369241883;
    --x2: -0.1147472752;
    --y2: 0.0228300608;
    --delay: 0.220416173;
  }
  .startails > div:nth-of-type(136) {
    --x: 0.9665003534;
    --y: 0.6217198112;
    --x2: -0.2424307867;
    --y2: -0.2786159634;
    --delay: 0.154600426;
  }
  .startails > div:nth-of-type(137) {
    --x: 0.4654534029;
    --y: 0.3106792973;
    --x2: 0.464003659;
    --y2: 0.1678512188;
    --delay: 0.1844559251;
  }
  .startails > div:nth-of-type(138) {
    --x: 0.6108265884;
    --y: 0.2036895509;
    --x2: -0.3287281377;
    --y2: 0.2477970871;
    --delay: 0.3561507238;
  }
  .startails > div:nth-of-type(139) {
    --x: 0.8195974058;
    --y: 0.1752891645;
    --x2: 0.1754033947;
    --y2: -0.0833451848;
    --delay: 0.3278682929;
  }
  .startails > div:nth-of-type(140) {
    --x: 0.0315224175;
    --y: 0.0599254907;
    --x2: 0.4938669173;
    --y2: -0.06929414;
    --delay: 0.1269951689;
  }
  .startails > div:nth-of-type(141) {
    --x: 0.2481866287;
    --y: 0.8765763146;
    --x2: -0.0968926284;
    --y2: -0.4270515936;
    --delay: 0.023720199;
  }
  .startails > div:nth-of-type(142) {
    --x: 0.6926310561;
    --y: 0.0359975422;
    --x2: 0.4797913147;
    --y2: -0.1868626309;
    --delay: 0.885185037;
  }
  .startails > div:nth-of-type(143) {
    --x: 0.328115789;
    --y: 0.2979778469;
    --x2: 0.2830934337;
    --y2: -0.0275081411;
    --delay: 0.2555749351;
  }
  .startails > div:nth-of-type(144) {
    --x: 0.9202197192;
    --y: 0.7753011033;
    --x2: -0.1747310764;
    --y2: -0.4052714643;
    --delay: 0.7707054085;
  }
  .startails > div:nth-of-type(145) {
    --x: 0.9834463607;
    --y: 0.2530149048;
    --x2: 0.3319818303;
    --y2: -0.1091377809;
    --delay: 0.4224519566;
  }
  .startails > div:nth-of-type(146) {
    --x: 0.1622649527;
    --y: 0.5557455556;
    --x2: -0.1337653426;
    --y2: -0.0206660437;
    --delay: 0.3736669388;
  }
  .startails > div:nth-of-type(147) {
    --x: 0.3006467203;
    --y: 0.822509492;
    --x2: -0.1232476244;
    --y2: 0.3544670829;
    --delay: 0.5301879931;
  }
  .startails > div:nth-of-type(148) {
    --x: 0.2599288391;
    --y: 0.115441637;
    --x2: -0.122182578;
    --y2: -0.3228181226;
    --delay: 0.6865092378;
  }
  .startails > div:nth-of-type(149) {
    --x: 0.6249481397;
    --y: 0.017187338;
    --x2: 0.4188894558;
    --y2: -0.4657331819;
    --delay: 0.9791301607;
  }
  .startails > div:nth-of-type(150) {
    --x: 0.6307604163;
    --y: 0.0227380345;
    --x2: -0.2839422729;
    --y2: -0.2409430217;
    --delay: 0.1564346985;
  }
  .startails > div:nth-of-type(151) {
    --x: 0.3767003376;
    --y: 0.6478230391;
    --x2: 0.0337109925;
    --y2: -0.2569439321;
    --delay: 0.1351916287;
  }
  .startails > div:nth-of-type(152) {
    --x: 0.8950585359;
    --y: 0.3729608516;
    --x2: -0.3413816007;
    --y2: 0.3206753312;
    --delay: 0.3808611161;
  }
  .startails > div:nth-of-type(153) {
    --x: 0.9861312999;
    --y: 0.3562278087;
    --x2: -0.3318529668;
    --y2: -0.0766811239;
    --delay: 0.0714844862;
  }
  .startails > div:nth-of-type(154) {
    --x: 0.1875014011;
    --y: 0.1407185364;
    --x2: 0.1797536286;
    --y2: 0.3450042393;
    --delay: 0.5461428154;
  }
  .startails > div:nth-of-type(155) {
    --x: 0.8064757468;
    --y: 0.9879007224;
    --x2: -0.1263747899;
    --y2: -0.1814723076;
    --delay: 0.5308451102;
  }
  .startails > div:nth-of-type(156) {
    --x: 0.9773942485;
    --y: 0.7690759375;
    --x2: -0.1879089544;
    --y2: -0.1021187385;
    --delay: 0.0358467265;
  }
  .startails > div:nth-of-type(157) {
    --x: 0.1951165206;
    --y: 0.8749442054;
    --x2: 0.2793766454;
    --y2: 0.3674394816;
    --delay: 0.7294767663;
  }
  .startails > div:nth-of-type(158) {
    --x: 0.2815907888;
    --y: 0.1837004537;
    --x2: -0.2599954431;
    --y2: -0.2049399195;
    --delay: 0.409925594;
  }
  .startails > div:nth-of-type(159) {
    --x: 0.5625855865;
    --y: 0.8210785069;
    --x2: 0.2549526111;
    --y2: 0.3894354034;
    --delay: 0.6527381567;
  }
  .startails > div:nth-of-type(160) {
    --x: 0.6594534654;
    --y: 0.4742873815;
    --x2: -0.2628781884;
    --y2: -0.4291963168;
    --delay: 0.5519661474;
  }
  .startails > div:nth-of-type(161) {
    --x: 0.4470145709;
    --y: 0.920392883;
    --x2: -0.1490609943;
    --y2: -0.3702172546;
    --delay: 0.3380640961;
  }
  .startails > div:nth-of-type(162) {
    --x: 0.625452001;
    --y: 0.6670009542;
    --x2: 0.4816195898;
    --y2: -0.2400149018;
    --delay: 0.5071985983;
  }
  .startails > div:nth-of-type(163) {
    --x: 0.1655226439;
    --y: 0.9813248966;
    --x2: -0.4524958295;
    --y2: 0.4833912908;
    --delay: 0.5337223407;
  }
  .startails > div:nth-of-type(164) {
    --x: 0.8366867267;
    --y: 0.8201647145;
    --x2: -0.4109860579;
    --y2: 0.022809775;
    --delay: 0.3907046277;
  }
  .startails > div:nth-of-type(165) {
    --x: 0.326809629;
    --y: 0.933055119;
    --x2: -0.4212124751;
    --y2: 0.2924763188;
    --delay: 0.0819324004;
  }
  .startails > div:nth-of-type(166) {
    --x: 0.5968553958;
    --y: 0.5864555438;
    --x2: 0.3516210117;
    --y2: -0.3428940307;
    --delay: 0.6832170919;
  }
  .startails > div:nth-of-type(167) {
    --x: 0.1477308488;
    --y: 0.2999111028;
    --x2: -0.3198614091;
    --y2: -0.0611077861;
    --delay: 0.9278238657;
  }
  .startails > div:nth-of-type(168) {
    --x: 0.5394191291;
    --y: 0.2114076764;
    --x2: -0.3977568568;
    --y2: 0.1260973869;
    --delay: 0.5779875711;
  }
  .startails > div:nth-of-type(169) {
    --x: 0.6355408611;
    --y: 0.0529633593;
    --x2: 0.4964305536;
    --y2: -0.0587198127;
    --delay: 0.625958465;
  }
  .startails > div:nth-of-type(170) {
    --x: 0.421969488;
    --y: 0.8199271366;
    --x2: 0.0336057197;
    --y2: 0.4672095398;
    --delay: 0.8618830012;
  }
  .startails > div:nth-of-type(171) {
    --x: 0.615311459;
    --y: 0.8828817904;
    --x2: -0.1366506654;
    --y2: 0.111360328;
    --delay: 0.027614686;
  }
  .startails > div:nth-of-type(172) {
    --x: 0.1798173766;
    --y: 0.5657762376;
    --x2: 0.1530014397;
    --y2: -0.2908586252;
    --delay: 0.9273342489;
  }
  .startails > div:nth-of-type(173) {
    --x: 0.6630704594;
    --y: 0.6037208506;
    --x2: -0.3012708417;
    --y2: -0.1828513176;
    --delay: 0.3331257359;
  }
  .startails > div:nth-of-type(174) {
    --x: 0.7792478689;
    --y: 0.9268714252;
    --x2: -0.2558094167;
    --y2: -0.0420685229;
    --delay: 0.4036426753;
  }
  .startails > div:nth-of-type(175) {
    --x: 0.4071888495;
    --y: 0.0805098756;
    --x2: 0.1596294439;
    --y2: -0.4627112496;
    --delay: 0.953875343;
  }
  .startails > div:nth-of-type(176) {
    --x: 0.172352256;
    --y: 0.0019476164;
    --x2: -0.2848410479;
    --y2: -0.0183616604;
    --delay: 0.082204993;
  }
  .startails > div:nth-of-type(177) {
    --x: 0.6647529443;
    --y: 0.4156972712;
    --x2: 0.1429937356;
    --y2: -0.268661623;
    --delay: 0.0297038072;
  }
  .startails > div:nth-of-type(178) {
    --x: 0.7810162555;
    --y: 0.3759256974;
    --x2: 0.3115631826;
    --y2: -0.3026643258;
    --delay: 0.2001808651;
  }
  .startails > div:nth-of-type(179) {
    --x: 0.8157233742;
    --y: 0.2894270391;
    --x2: -0.4331937377;
    --y2: 0.4109837647;
    --delay: 0.7579272064;
  }
  .startails > div:nth-of-type(180) {
    --x: 0.7305004732;
    --y: 0.3796983167;
    --x2: -0.1605809271;
    --y2: -0.065927941;
    --delay: 0.8984860033;
  }
  .startails > div:nth-of-type(181) {
    --x: 0.9581256582;
    --y: 0.7927260332;
    --x2: 0.255679726;
    --y2: 0.1860851814;
    --delay: 0.4622874374;
  }
  .startails > div:nth-of-type(182) {
    --x: 0.6335186679;
    --y: 0.6501834886;
    --x2: -0.3627903278;
    --y2: -0.4770370123;
    --delay: 0.5282048741;
  }
  .startails > div:nth-of-type(183) {
    --x: 0.424341672;
    --y: 0.9503268283;
    --x2: -0.2522647825;
    --y2: -0.4692417625;
    --delay: 0.3274819159;
  }
  .startails > div:nth-of-type(184) {
    --x: 0.16732504;
    --y: 0.6515897157;
    --x2: -0.4561663237;
    --y2: 0.0743164117;
    --delay: 0.1414068621;
  }
  .startails > div:nth-of-type(185) {
    --x: 0.575452435;
    --y: 0.7760922514;
    --x2: 0.2917159346;
    --y2: 0.3860692898;
    --delay: 0.0618263567;
  }
  .startails > div:nth-of-type(186) {
    --x: 0.5573551284;
    --y: 0.5935188737;
    --x2: -0.0869142484;
    --y2: 0.1063043352;
    --delay: 0.3747243497;
  }
  .startails > div:nth-of-type(187) {
    --x: 0.8220018088;
    --y: 0.7161117064;
    --x2: 0.087856406;
    --y2: -0.1151848716;
    --delay: 0.9104200741;
  }
  .startails > div:nth-of-type(188) {
    --x: 0.3691271817;
    --y: 0.4331846481;
    --x2: -0.289178965;
    --y2: -0.0255613167;
    --delay: 0.4470031554;
  }
  .startails > div:nth-of-type(189) {
    --x: 0.96011018;
    --y: 0.6507621587;
    --x2: 0.4685354999;
    --y2: 0.2191719904;
    --delay: 0.0128395914;
  }
  .startails > div:nth-of-type(190) {
    --x: 0.7366668932;
    --y: 0.4890524375;
    --x2: -0.298257119;
    --y2: -0.2060978386;
    --delay: 0.3730722848;
  }
  .startails > div:nth-of-type(191) {
    --x: 0.0528443194;
    --y: 0.0884731882;
    --x2: 0.1000569476;
    --y2: -0.2453532452;
    --delay: 0.6864605504;
  }
  .startails > div:nth-of-type(192) {
    --x: 0.4058782621;
    --y: 0.5881773517;
    --x2: 0.4382257468;
    --y2: -0.0975313179;
    --delay: 0.4465231772;
  }
  .startails > div:nth-of-type(193) {
    --x: 0.7924501806;
    --y: 0.0003741086;
    --x2: 0.1927369216;
    --y2: 0.068029061;
    --delay: 0.2957565093;
  }
  .startails > div:nth-of-type(194) {
    --x: 0.3454447884;
    --y: 0.4078193368;
    --x2: -0.1810706399;
    --y2: -0.1499913482;
    --delay: 0.0955703334;
  }
  .startails > div:nth-of-type(195) {
    --x: 0.4230779515;
    --y: 0.8737416101;
    --x2: 0.3844561957;
    --y2: 0.2163061549;
    --delay: 0.5494342863;
  }
  .startails > div:nth-of-type(196) {
    --x: 0.8431959901;
    --y: 0.5189154349;
    --x2: -0.1156732806;
    --y2: 0.1700787904;
    --delay: 0.0820839242;
  }
  .startails > div:nth-of-type(197) {
    --x: 0.4371044217;
    --y: 0.721767528;
    --x2: 0.4656080157;
    --y2: 0.4279195827;
    --delay: 0.1902251439;
  }
  .startails > div:nth-of-type(198) {
    --x: 0.6730136139;
    --y: 0.8083069176;
    --x2: 0.2497857648;
    --y2: -0.3787527764;
    --delay: 0.7421372072;
  }
  .startails > div:nth-of-type(199) {
    --x: 0.7524923325;
    --y: 0.5866678101;
    --x2: 0.0695922111;
    --y2: 0.3702567635;
    --delay: 0.5696768606;
  }
  .startails > div:nth-of-type(200) {
    --x: 0.3703558584;
    --y: 0.6496543282;
    --x2: 0.2323465664;
    --y2: -0.3727233123;
    --delay: 0.4060620051;
  }
  .startails > div:nth-of-type(201) {
    --x: 0.9608976763;
    --y: 0.4211094476;
    --x2: 0.2173736289;
    --y2: -0.1887959746;
    --delay: 0.6624799155;
  }

  @-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;
    --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;
  }
  .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.765045231;
    --y: 0.7285981885;
    --x2: -0.2117500079;
    --y2: -0.0612258301;
    --delay: 0.5849917738;
  }
  .planets > div:nth-of-type(2),
.planets-2 > div:nth-of-type(2) {
    --x: 0.1318091171;
    --y: 0.7706092499;
    --x2: 0.2334710803;
    --y2: -0.0777001294;
    --delay: 0.6121708506;
  }
  .planets > div:nth-of-type(3),
.planets-2 > div:nth-of-type(3) {
    --x: 0.5357878911;
    --y: 0.1461580702;
    --x2: 0.003844282;
    --y2: 0.4165106188;
    --delay: 0.24360458;
  }
  .planets > div:nth-of-type(4),
.planets-2 > div:nth-of-type(4) {
    --x: 0.1365425107;
    --y: 0.8648332496;
    --x2: -0.1667275004;
    --y2: 0.3805687875;
    --delay: 0.819112825;
  }
  .planets > div:nth-of-type(5),
.planets-2 > div:nth-of-type(5) {
    --x: 0.6816870713;
    --y: 0.5137244633;
    --x2: -0.2345864256;
    --y2: 0.2302462433;
    --delay: 0.3029771692;
  }
  .planets > div:nth-of-type(6),
.planets-2 > div:nth-of-type(6) {
    --x: 0.9458521831;
    --y: 0.3728593719;
    --x2: 0.1005394705;
    --y2: 0.3041768126;
    --delay: 0.6083676591;
  }
  .planets > div:nth-of-type(7),
.planets-2 > div:nth-of-type(7) {
    --x: 0.6054915393;
    --y: 0.3437582595;
    --x2: -0.2738635564;
    --y2: -0.2932741246;
    --delay: 0.2715444903;
  }
  .planets > div:nth-of-type(8),
.planets-2 > div:nth-of-type(8) {
    --x: 0.6773519109;
    --y: 0.7350534673;
    --x2: -0.0941388054;
    --y2: 0.1865000075;
    --delay: 0.5109503616;
  }
  .planets > div:nth-of-type(9),
.planets-2 > div:nth-of-type(9) {
    --x: 0.0495177069;
    --y: 0.2039435446;
    --x2: 0.2587302898;
    --y2: 0.1884894698;
    --delay: 0.9034277896;
  }
  .planets > div:nth-of-type(10),
.planets-2 > div:nth-of-type(10) {
    --x: 0.0039060662;
    --y: 0.7076697;
    --x2: -0.0203640689;
    --y2: 0.4473555374;
    --delay: 0.1663540168;
  }
  .planets > div:nth-of-type(11),
.planets-2 > div:nth-of-type(11) {
    --x: 0.9217826845;
    --y: 0.1455654824;
    --x2: -0.4212712224;
    --y2: 0.1124204014;
    --delay: 0.4126399612;
  }
  .planets > div:nth-of-type(12),
.planets-2 > div:nth-of-type(12) {
    --x: 0.3713260567;
    --y: 0.7485350764;
    --x2: -0.220397623;
    --y2: 0.0339069467;
    --delay: 0.9843706138;
  }
  .planets > div:nth-of-type(13),
.planets-2 > div:nth-of-type(13) {
    --x: 0.9515664927;
    --y: 0.4037814978;
    --x2: 0.4933816691;
    --y2: 0.2761673181;
    --delay: 0.5292750297;
  }
  .planets > div:nth-of-type(14),
.planets-2 > div:nth-of-type(14) {
    --x: 0.5988174711;
    --y: 0.1662467092;
    --x2: -0.4118481105;
    --y2: -0.2563254822;
    --delay: 0.2422746527;
  }
  .planets > div:nth-of-type(15),
.planets-2 > div:nth-of-type(15) {
    --x: 0.8442093621;
    --y: 0.6301012388;
    --x2: -0.474709094;
    --y2: 0.3683410257;
    --delay: 0.585690773;
  }
  .planets > div:nth-of-type(16),
.planets-2 > div:nth-of-type(16) {
    --x: 0.9545361275;
    --y: 0.0326898835;
    --x2: 0.0362960646;
    --y2: -0.0033386954;
    --delay: 0.8780386553;
  }
  .planets > div:nth-of-type(17),
.planets-2 > div:nth-of-type(17) {
    --x: 0.2545740138;
    --y: 0.2266388704;
    --x2: 0.1501288252;
    --y2: 0.0784541408;
    --delay: 0.2568302694;
  }
  .planets > div:nth-of-type(18),
.planets-2 > div:nth-of-type(18) {
    --x: 0.0113443486;
    --y: 0.9615634717;
    --x2: 0.1432586091;
    --y2: -0.2994797966;
    --delay: 0.1858136321;
  }
  .planets > div:nth-of-type(19),
.planets-2 > div:nth-of-type(19) {
    --x: 0.7784336771;
    --y: 0.0615854299;
    --x2: -0.2285873229;
    --y2: 0.0435319848;
    --delay: 0.6177558082;
  }
  .planets > div:nth-of-type(20),
.planets-2 > div:nth-of-type(20) {
    --x: 0.8533887466;
    --y: 0.8283270784;
    --x2: 0.0230299576;
    --y2: 0.0924413599;
    --delay: 0.1473472379;
  }
  .planets > div:nth-of-type(21),
.planets-2 > div:nth-of-type(21) {
    --x: 0.757097391;
    --y: 0.3274131101;
    --x2: 0.4301970583;
    --y2: -0.093823093;
    --delay: 0.0641344309;
  }
  .planets > div:nth-of-type(22),
.planets-2 > div:nth-of-type(22) {
    --x: 0.8039115242;
    --y: 0.5201272053;
    --x2: -0.1411752611;
    --y2: -0.1881810943;
    --delay: 0.5913006679;
  }
  .planets > div:nth-of-type(23),
.planets-2 > div:nth-of-type(23) {
    --x: 0.1384697164;
    --y: 0.4605413786;
    --x2: -0.2131525129;
    --y2: -0.3147628215;
    --delay: 0.2346288385;
  }
  .planets > div:nth-of-type(24),
.planets-2 > div:nth-of-type(24) {
    --x: 0.6740585879;
    --y: 0.0737622361;
    --x2: 0.0602450599;
    --y2: -0.0512396174;
    --delay: 0.5156237476;
  }
  .planets > div:nth-of-type(25),
.planets-2 > div:nth-of-type(25) {
    --x: 0.6314599062;
    --y: 0.1282522465;
    --x2: 0.2869142629;
    --y2: -0.0447184308;
    --delay: 0.4270553369;
  }
  .planets > div:nth-of-type(26),
.planets-2 > div:nth-of-type(26) {
    --x: 0.3502883316;
    --y: 0.1647277731;
    --x2: -0.4324190157;
    --y2: -0.1622163741;
    --delay: 0.5791168005;
  }
  .planets > div:nth-of-type(27),
.planets-2 > div:nth-of-type(27) {
    --x: 0.3182613558;
    --y: 0.2616001317;
    --x2: -0.1172538463;
    --y2: 0.3014669335;
    --delay: 0.9041442031;
  }
  .planets > div:nth-of-type(28),
.planets-2 > div:nth-of-type(28) {
    --x: 0.1314254301;
    --y: 0.8526243301;
    --x2: -0.2282708432;
    --y2: 0.4279096571;
    --delay: 0.2966973651;
  }
  .planets > div:nth-of-type(29),
.planets-2 > div:nth-of-type(29) {
    --x: 0.7078822665;
    --y: 0.4240818442;
    --x2: 0.356305958;
    --y2: 0.1898144517;
    --delay: 0.7572527726;
  }
  .planets > div:nth-of-type(30),
.planets-2 > div:nth-of-type(30) {
    --x: 0.4723209353;
    --y: 0.6790379249;
    --x2: 0.4475382751;
    --y2: -0.3633630882;
    --delay: 0.3606225905;
  }
  .planets > div:nth-of-type(31),
.planets-2 > div:nth-of-type(31) {
    --x: 0.5428397971;
    --y: 0.0067824006;
    --x2: 0.2891609973;
    --y2: 0.368676315;
    --delay: 0.7314192873;
  }
  .planets > div:nth-of-type(32),
.planets-2 > div:nth-of-type(32) {
    --x: 0.7383858475;
    --y: 0.7903045079;
    --x2: 0.2927217175;
    --y2: -0.3313516176;
    --delay: 0.9805067902;
  }
  .planets > div:nth-of-type(33),
.planets-2 > div:nth-of-type(33) {
    --x: 0.6328523146;
    --y: 0.4536341878;
    --x2: 0.3723652407;
    --y2: 0.0879431059;
    --delay: 0.0373698772;
  }
  .planets > div:nth-of-type(34),
.planets-2 > div:nth-of-type(34) {
    --x: 0.5047566133;
    --y: 0.967687642;
    --x2: -0.3277900989;
    --y2: -0.0004256199;
    --delay: 0.0900642001;
  }
  .planets > div:nth-of-type(35),
.planets-2 > div:nth-of-type(35) {
    --x: 0.7720756672;
    --y: 0.2118011016;
    --x2: 0.3186540762;
    --y2: 0.3575269264;
    --delay: 0.5667688376;
  }
  .planets > div:nth-of-type(36),
.planets-2 > div:nth-of-type(36) {
    --x: 0.5400925819;
    --y: 0.2771886652;
    --x2: -0.1930995142;
    --y2: 0.4300469236;
    --delay: 0.1987599816;
  }
  .planets > div:nth-of-type(37),
.planets-2 > div:nth-of-type(37) {
    --x: 0.2661520962;
    --y: 0.9263292159;
    --x2: 0.2213161074;
    --y2: -0.4821210722;
    --delay: 0.8118490521;
  }
  .planets > div:nth-of-type(38),
.planets-2 > div:nth-of-type(38) {
    --x: 0.0679379152;
    --y: 0.1858504065;
    --x2: 0.4068151521;
    --y2: 0.0259311502;
    --delay: 0.6344278813;
  }
  .planets > div:nth-of-type(39),
.planets-2 > div:nth-of-type(39) {
    --x: 0.0369674444;
    --y: 0.2884752395;
    --x2: 0.1854312345;
    --y2: 0.3136581438;
    --delay: 0.1868752618;
  }
  .planets > div:nth-of-type(40),
.planets-2 > div:nth-of-type(40) {
    --x: 0.3097190034;
    --y: 0.9486381173;
    --x2: 0.2139226251;
    --y2: -0.4179806333;
    --delay: 0.0508116108;
  }
  .planets > div:nth-of-type(41),
.planets-2 > div:nth-of-type(41) {
    --x: 0.5670197857;
    --y: 0.5992438438;
    --x2: -0.475457781;
    --y2: -0.4022640557;
    --delay: 0.2249658289;
  }
  .planets > div:nth-of-type(42),
.planets-2 > div:nth-of-type(42) {
    --x: 0.621042898;
    --y: 0.9391755958;
    --x2: -0.4775214888;
    --y2: -0.1699023688;
    --delay: 0.5882459617;
  }
  .planets > div:nth-of-type(43),
.planets-2 > div:nth-of-type(43) {
    --x: 0.4360521753;
    --y: 0.8336992509;
    --x2: -0.0131966144;
    --y2: -0.0804076481;
    --delay: 0.4783256564;
  }
  .planets > div:nth-of-type(44),
.planets-2 > div:nth-of-type(44) {
    --x: 0.8277122511;
    --y: 0.9666543723;
    --x2: 0.139215255;
    --y2: -0.1196521865;
    --delay: 0.0995220968;
  }
  .planets > div:nth-of-type(45),
.planets-2 > div:nth-of-type(45) {
    --x: 0.2726867857;
    --y: 0.0297062136;
    --x2: -0.072217323;
    --y2: 0.1104286864;
    --delay: 0.0802149648;
  }
  .planets > div:nth-of-type(46),
.planets-2 > div:nth-of-type(46) {
    --x: 0.9079785483;
    --y: 0.8241470485;
    --x2: -0.3353123587;
    --y2: 0.253870871;
    --delay: 0.3229419852;
  }
  .planets > div:nth-of-type(47),
.planets-2 > div:nth-of-type(47) {
    --x: 0.9665542677;
    --y: 0.5892170386;
    --x2: 0.4948279406;
    --y2: 0.4142628324;
    --delay: 0.0197093569;
  }
  .planets > div:nth-of-type(48),
.planets-2 > div:nth-of-type(48) {
    --x: 0.9380221493;
    --y: 0.6331124201;
    --x2: -0.1300256194;
    --y2: -0.29023781;
    --delay: 0.0927029237;
  }
  .planets > div:nth-of-type(49),
.planets-2 > div:nth-of-type(49) {
    --x: 0.0896517522;
    --y: 0.0295860942;
    --x2: -0.1015533845;
    --y2: 0.0303838134;
    --delay: 0.071943635;
  }
  .planets > div:nth-of-type(50),
.planets-2 > div:nth-of-type(50) {
    --x: 0.7990139638;
    --y: 0.569669006;
    --x2: -0.2106202732;
    --y2: 0.2272885302;
    --delay: 0.1629806578;
  }
  .planets > div:nth-of-type(51),
.planets-2 > div:nth-of-type(51) {
    --x: 0.8705891645;
    --y: 0.9358127285;
    --x2: -0.255263798;
    --y2: 0.172645031;
    --delay: 0.9583654887;
  }

  .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;
}