@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.4379667199;
    --y: 0.8565765321;
    --x2: 0.3969246516;
    --y2: -0.3937523189;
    --delay: 0.4460406958;
  }
  .startails > div:nth-of-type(2) {
    --x: 0.8170592914;
    --y: 0.5521219655;
    --x2: -0.0078474127;
    --y2: 0.3526488742;
    --delay: 0.760981011;
  }
  .startails > div:nth-of-type(3) {
    --x: 0.3289042904;
    --y: 0.5925937667;
    --x2: 0.2909799861;
    --y2: -0.2278320676;
    --delay: 0.6738540015;
  }
  .startails > div:nth-of-type(4) {
    --x: 0.2763275542;
    --y: 0.4233434616;
    --x2: 0.0808181457;
    --y2: 0.0230618106;
    --delay: 0.473802019;
  }
  .startails > div:nth-of-type(5) {
    --x: 0.3961319885;
    --y: 0.9953771508;
    --x2: 0.3063708944;
    --y2: 0.2775864562;
    --delay: 0.9064775563;
  }
  .startails > div:nth-of-type(6) {
    --x: 0.8837359874;
    --y: 0.0159370246;
    --x2: -0.2873294575;
    --y2: -0.2418976498;
    --delay: 0.6412583367;
  }
  .startails > div:nth-of-type(7) {
    --x: 0.9957420324;
    --y: 0.4461231913;
    --x2: 0.2589756616;
    --y2: 0.291727004;
    --delay: 0.3017355529;
  }
  .startails > div:nth-of-type(8) {
    --x: 0.0502717072;
    --y: 0.7262780366;
    --x2: -0.1136127897;
    --y2: 0.1281493287;
    --delay: 0.6980722475;
  }
  .startails > div:nth-of-type(9) {
    --x: 0.9181761212;
    --y: 0.3520365936;
    --x2: 0.470080529;
    --y2: 0.4221691258;
    --delay: 0.5790030363;
  }
  .startails > div:nth-of-type(10) {
    --x: 0.8362769515;
    --y: 0.6983188767;
    --x2: -0.2794205711;
    --y2: 0.2149035026;
    --delay: 0.0385438831;
  }
  .startails > div:nth-of-type(11) {
    --x: 0.6432283496;
    --y: 0.7797916955;
    --x2: 0.064232582;
    --y2: -0.1078865287;
    --delay: 0.5985967429;
  }
  .startails > div:nth-of-type(12) {
    --x: 0.7579785613;
    --y: 0.1430424566;
    --x2: 0.172627007;
    --y2: 0.3502746006;
    --delay: 0.8485626786;
  }
  .startails > div:nth-of-type(13) {
    --x: 0.1416059676;
    --y: 0.9236736448;
    --x2: -0.2116356483;
    --y2: -0.4566802165;
    --delay: 0.2253045418;
  }
  .startails > div:nth-of-type(14) {
    --x: 0.549058358;
    --y: 0.4870656809;
    --x2: 0.3492598726;
    --y2: 0.0567788087;
    --delay: 0.736409893;
  }
  .startails > div:nth-of-type(15) {
    --x: 0.4131835305;
    --y: 0.2422518868;
    --x2: -0.4332713751;
    --y2: 0.3319648485;
    --delay: 0.1325265039;
  }
  .startails > div:nth-of-type(16) {
    --x: 0.755901282;
    --y: 0.1483912294;
    --x2: -0.2407039822;
    --y2: 0.1060620531;
    --delay: 0.3420941303;
  }
  .startails > div:nth-of-type(17) {
    --x: 0.4412796229;
    --y: 0.7855505527;
    --x2: 0.3191615829;
    --y2: -0.3514219231;
    --delay: 0.8283759522;
  }
  .startails > div:nth-of-type(18) {
    --x: 0.04694219;
    --y: 0.1631663972;
    --x2: -0.4258944731;
    --y2: 0.2214590924;
    --delay: 0.8011894707;
  }
  .startails > div:nth-of-type(19) {
    --x: 0.9105855018;
    --y: 0.4664421661;
    --x2: -0.4320087959;
    --y2: -0.0439481648;
    --delay: 0.1242251965;
  }
  .startails > div:nth-of-type(20) {
    --x: 0.5834682823;
    --y: 0.2251070575;
    --x2: 0.2564808639;
    --y2: -0.2899357314;
    --delay: 0.1407853143;
  }
  .startails > div:nth-of-type(21) {
    --x: 0.8090770972;
    --y: 0.5218777647;
    --x2: -0.4561539582;
    --y2: 0.1970602557;
    --delay: 0.9290867246;
  }
  .startails > div:nth-of-type(22) {
    --x: 0.5811517398;
    --y: 0.233874577;
    --x2: -0.1175155868;
    --y2: 0.260614943;
    --delay: 0.0086394108;
  }
  .startails > div:nth-of-type(23) {
    --x: 0.2252044043;
    --y: 0.9042879209;
    --x2: -0.2563887981;
    --y2: -0.1239786477;
    --delay: 0.8272730773;
  }
  .startails > div:nth-of-type(24) {
    --x: 0.2884582266;
    --y: 0.186173639;
    --x2: -0.3822905457;
    --y2: 0.4713524325;
    --delay: 0.9201639951;
  }
  .startails > div:nth-of-type(25) {
    --x: 0.2235425938;
    --y: 0.2462220869;
    --x2: 0.3937502964;
    --y2: 0.2651515119;
    --delay: 0.6625738808;
  }
  .startails > div:nth-of-type(26) {
    --x: 0.41867827;
    --y: 0.3876133885;
    --x2: 0.0645554776;
    --y2: -0.4180333729;
    --delay: 0.6670301178;
  }
  .startails > div:nth-of-type(27) {
    --x: 0.6408561777;
    --y: 0.0290634417;
    --x2: -0.327613883;
    --y2: -0.3334273091;
    --delay: 0.8806512244;
  }
  .startails > div:nth-of-type(28) {
    --x: 0.9363544135;
    --y: 0.8160622216;
    --x2: -0.3133176488;
    --y2: -0.4257899607;
    --delay: 0.2035453362;
  }
  .startails > div:nth-of-type(29) {
    --x: 0.3512466342;
    --y: 0.5603343455;
    --x2: 0.1076604487;
    --y2: -0.3672042838;
    --delay: 0.8532332629;
  }
  .startails > div:nth-of-type(30) {
    --x: 0.9541309812;
    --y: 0.9150668148;
    --x2: 0.0761602584;
    --y2: 0.3916778106;
    --delay: 0.311602023;
  }
  .startails > div:nth-of-type(31) {
    --x: 0.6241063344;
    --y: 0.2850053886;
    --x2: 0.2968957551;
    --y2: -0.2118005989;
    --delay: 0.2048284643;
  }
  .startails > div:nth-of-type(32) {
    --x: 0.7466744635;
    --y: 0.1897172441;
    --x2: -0.2454431287;
    --y2: 0.0977740179;
    --delay: 0.0376677297;
  }
  .startails > div:nth-of-type(33) {
    --x: 0.8710342322;
    --y: 0.9229309122;
    --x2: -0.2601571009;
    --y2: -0.2270817063;
    --delay: 0.8545330327;
  }
  .startails > div:nth-of-type(34) {
    --x: 0.1191663366;
    --y: 0.6587436542;
    --x2: -0.1070825072;
    --y2: -0.1505129834;
    --delay: 0.2118427809;
  }
  .startails > div:nth-of-type(35) {
    --x: 0.6385719065;
    --y: 0.0923459508;
    --x2: 0.028465295;
    --y2: -0.4972566886;
    --delay: 0.96273356;
  }
  .startails > div:nth-of-type(36) {
    --x: 0.9758802728;
    --y: 0.7320297534;
    --x2: 0.3870056428;
    --y2: -0.0588905622;
    --delay: 0.5219715938;
  }
  .startails > div:nth-of-type(37) {
    --x: 0.9815753925;
    --y: 0.3046098914;
    --x2: -0.2732456267;
    --y2: -0.1661268312;
    --delay: 0.3504166858;
  }
  .startails > div:nth-of-type(38) {
    --x: 0.5281708937;
    --y: 0.5086185083;
    --x2: 0.3656860407;
    --y2: 0.1540313926;
    --delay: 0.7489154065;
  }
  .startails > div:nth-of-type(39) {
    --x: 0.4668134188;
    --y: 0.2291324653;
    --x2: 0.0062976837;
    --y2: -0.3808833783;
    --delay: 0.5564935289;
  }
  .startails > div:nth-of-type(40) {
    --x: 0.2354110338;
    --y: 0.5103072221;
    --x2: 0.4075883281;
    --y2: -0.4574762135;
    --delay: 0.1166125533;
  }
  .startails > div:nth-of-type(41) {
    --x: 0.5503530906;
    --y: 0.0352076821;
    --x2: -0.2009980933;
    --y2: -0.288411325;
    --delay: 0.5432406597;
  }
  .startails > div:nth-of-type(42) {
    --x: 0.9481371928;
    --y: 0.6468969349;
    --x2: -0.4489942369;
    --y2: -0.0318263921;
    --delay: 0.4088660565;
  }
  .startails > div:nth-of-type(43) {
    --x: 0.0560742578;
    --y: 0.2412429707;
    --x2: -0.2190033847;
    --y2: 0.4643003405;
    --delay: 0.5702877197;
  }
  .startails > div:nth-of-type(44) {
    --x: 0.3393607271;
    --y: 0.6093611075;
    --x2: -0.458983686;
    --y2: -0.2608950528;
    --delay: 0.980657196;
  }
  .startails > div:nth-of-type(45) {
    --x: 0.333594858;
    --y: 0.8716968864;
    --x2: -0.0922830244;
    --y2: -0.489152347;
    --delay: 0.0623447175;
  }
  .startails > div:nth-of-type(46) {
    --x: 0.365763676;
    --y: 0.6430711824;
    --x2: -0.1997850287;
    --y2: -0.1509350905;
    --delay: 0.0952708786;
  }
  .startails > div:nth-of-type(47) {
    --x: 0.7066823286;
    --y: 0.6285177133;
    --x2: -0.2527707614;
    --y2: -0.3866985428;
    --delay: 0.4787851986;
  }
  .startails > div:nth-of-type(48) {
    --x: 0.0836669992;
    --y: 0.7600511615;
    --x2: 0.3452575279;
    --y2: 0.0989615338;
    --delay: 0.9792881885;
  }
  .startails > div:nth-of-type(49) {
    --x: 0.3159725436;
    --y: 0.6738745452;
    --x2: 0.4691601718;
    --y2: 0.2058976873;
    --delay: 0.4660611431;
  }
  .startails > div:nth-of-type(50) {
    --x: 0.3614360179;
    --y: 0.2691088332;
    --x2: -0.4434089558;
    --y2: -0.4633043688;
    --delay: 0.9160145435;
  }
  .startails > div:nth-of-type(51) {
    --x: 0.6000473252;
    --y: 0.8360804445;
    --x2: -0.0761411027;
    --y2: 0.0514865181;
    --delay: 0.1476334056;
  }
  .startails > div:nth-of-type(52) {
    --x: 0.1000250567;
    --y: 0.9669012073;
    --x2: 0.0284840359;
    --y2: 0.3671211811;
    --delay: 0.3226380386;
  }
  .startails > div:nth-of-type(53) {
    --x: 0.733333285;
    --y: 0.0068816291;
    --x2: -0.4950523697;
    --y2: -0.1738055558;
    --delay: 0.9575914926;
  }
  .startails > div:nth-of-type(54) {
    --x: 0.9541965234;
    --y: 0.3675275922;
    --x2: 0.2751535681;
    --y2: 0.3623160444;
    --delay: 0.9210359983;
  }
  .startails > div:nth-of-type(55) {
    --x: 0.5605227042;
    --y: 0.1547511126;
    --x2: 0.0661309026;
    --y2: -0.232580787;
    --delay: 0.1959340454;
  }
  .startails > div:nth-of-type(56) {
    --x: 0.7356352499;
    --y: 0.7951703645;
    --x2: -0.235040402;
    --y2: 0.3558608682;
    --delay: 0.2016878926;
  }
  .startails > div:nth-of-type(57) {
    --x: 0.3384813861;
    --y: 0.8409788173;
    --x2: -0.1895199052;
    --y2: -0.0385613525;
    --delay: 0.2274988906;
  }
  .startails > div:nth-of-type(58) {
    --x: 0.5676884185;
    --y: 0.3863838996;
    --x2: 0.3722558231;
    --y2: 0.3088465405;
    --delay: 0.4300098918;
  }
  .startails > div:nth-of-type(59) {
    --x: 0.9765151166;
    --y: 0.9569878543;
    --x2: -0.0189202474;
    --y2: -0.2080326353;
    --delay: 0.0764285484;
  }
  .startails > div:nth-of-type(60) {
    --x: 0.0336180583;
    --y: 0.2793169931;
    --x2: -0.4589770708;
    --y2: 0.2811471871;
    --delay: 0.7055855365;
  }
  .startails > div:nth-of-type(61) {
    --x: 0.2749412825;
    --y: 0.5157015604;
    --x2: -0.4076583582;
    --y2: -0.4539173132;
    --delay: 0.9113722989;
  }
  .startails > div:nth-of-type(62) {
    --x: 0.6311347963;
    --y: 0.1281693539;
    --x2: 0.1774547306;
    --y2: -0.1457236004;
    --delay: 0.0330070256;
  }
  .startails > div:nth-of-type(63) {
    --x: 0.3452531077;
    --y: 0.5388228513;
    --x2: -0.1196307313;
    --y2: -0.3949598138;
    --delay: 0.6413562147;
  }
  .startails > div:nth-of-type(64) {
    --x: 0.2123608983;
    --y: 0.0870761744;
    --x2: -0.2419268628;
    --y2: 0.1114607792;
    --delay: 0.5662279494;
  }
  .startails > div:nth-of-type(65) {
    --x: 0.212465417;
    --y: 0.7581356406;
    --x2: -0.1918540324;
    --y2: 0.4156833173;
    --delay: 0.3489512195;
  }
  .startails > div:nth-of-type(66) {
    --x: 0.1688866032;
    --y: 0.0842797833;
    --x2: -0.428318718;
    --y2: 0.1075129045;
    --delay: 0.3583507325;
  }
  .startails > div:nth-of-type(67) {
    --x: 0.1749320342;
    --y: 0.303558459;
    --x2: 0.0516663698;
    --y2: 0.1875098276;
    --delay: 0.8475771496;
  }
  .startails > div:nth-of-type(68) {
    --x: 0.5842831263;
    --y: 0.9435721812;
    --x2: 0.2358312422;
    --y2: -0.4073792275;
    --delay: 0.6008639569;
  }
  .startails > div:nth-of-type(69) {
    --x: 0.7467359062;
    --y: 0.3156369163;
    --x2: 0.3288278858;
    --y2: 0.1582215039;
    --delay: 0.4732930686;
  }
  .startails > div:nth-of-type(70) {
    --x: 0.8371875105;
    --y: 0.8063646786;
    --x2: -0.3525051782;
    --y2: 0.4692497345;
    --delay: 0.817981249;
  }
  .startails > div:nth-of-type(71) {
    --x: 0.4979869121;
    --y: 0.2706912483;
    --x2: 0.4746319967;
    --y2: 0.0906527247;
    --delay: 0.9320386053;
  }
  .startails > div:nth-of-type(72) {
    --x: 0.4770647179;
    --y: 0.7343870428;
    --x2: -0.2408900836;
    --y2: 0.1811957733;
    --delay: 0.0352131004;
  }
  .startails > div:nth-of-type(73) {
    --x: 0.2010786705;
    --y: 0.5652707359;
    --x2: -0.4440126803;
    --y2: 0.0018934154;
    --delay: 0.9505503762;
  }
  .startails > div:nth-of-type(74) {
    --x: 0.4434396565;
    --y: 0.8675748338;
    --x2: -0.3588971442;
    --y2: -0.0057962516;
    --delay: 0.7638666151;
  }
  .startails > div:nth-of-type(75) {
    --x: 0.082414633;
    --y: 0.674597278;
    --x2: 0.3892425718;
    --y2: 0.0216426601;
    --delay: 0.0472832221;
  }
  .startails > div:nth-of-type(76) {
    --x: 0.0766932051;
    --y: 0.4107623565;
    --x2: -0.0855661553;
    --y2: 0.0414347097;
    --delay: 0.7890936334;
  }
  .startails > div:nth-of-type(77) {
    --x: 0.9712305251;
    --y: 0.7412413118;
    --x2: 0.1470575187;
    --y2: 0.380464789;
    --delay: 0.5656517539;
  }
  .startails > div:nth-of-type(78) {
    --x: 0.2618221413;
    --y: 0.8255171886;
    --x2: -0.4730061783;
    --y2: 0.186239061;
    --delay: 0.5476931508;
  }
  .startails > div:nth-of-type(79) {
    --x: 0.3655018626;
    --y: 0.1315785321;
    --x2: -0.3713925645;
    --y2: -0.374534949;
    --delay: 0.0191839953;
  }
  .startails > div:nth-of-type(80) {
    --x: 0.2960162623;
    --y: 0.9006161139;
    --x2: -0.3733116923;
    --y2: -0.3686502095;
    --delay: 0.1688062153;
  }
  .startails > div:nth-of-type(81) {
    --x: 0.2264706601;
    --y: 0.1712125303;
    --x2: -0.2865139076;
    --y2: 0.2226798108;
    --delay: 0.2220794817;
  }
  .startails > div:nth-of-type(82) {
    --x: 0.560503607;
    --y: 0.8783436248;
    --x2: -0.3116900476;
    --y2: -0.4293282316;
    --delay: 0.434868491;
  }
  .startails > div:nth-of-type(83) {
    --x: 0.1957399412;
    --y: 0.1760994134;
    --x2: 0.344056103;
    --y2: 0.3220110123;
    --delay: 0.2865012005;
  }
  .startails > div:nth-of-type(84) {
    --x: 0.456871653;
    --y: 0.8735925984;
    --x2: 0.035030024;
    --y2: -0.3732940595;
    --delay: 0.974614658;
  }
  .startails > div:nth-of-type(85) {
    --x: 0.5866882503;
    --y: 0.7796318227;
    --x2: 0.1376078067;
    --y2: 0.2959715945;
    --delay: 0.188995045;
  }
  .startails > div:nth-of-type(86) {
    --x: 0.601006513;
    --y: 0.8300748346;
    --x2: 0.1420676606;
    --y2: 0.1860707847;
    --delay: 0.1004736509;
  }
  .startails > div:nth-of-type(87) {
    --x: 0.1542956424;
    --y: 0.8643246128;
    --x2: 0.0960258705;
    --y2: -0.2642716795;
    --delay: 0.320125694;
  }
  .startails > div:nth-of-type(88) {
    --x: 0.6388278669;
    --y: 0.1194234956;
    --x2: 0.342686822;
    --y2: -0.2475622251;
    --delay: 0.0421783467;
  }
  .startails > div:nth-of-type(89) {
    --x: 0.2881496349;
    --y: 0.5097407979;
    --x2: 0.427171606;
    --y2: -0.4030992426;
    --delay: 0.8184441496;
  }
  .startails > div:nth-of-type(90) {
    --x: 0.3133142225;
    --y: 0.9766053096;
    --x2: 0.2883984316;
    --y2: -0.392085891;
    --delay: 0.2225743432;
  }
  .startails > div:nth-of-type(91) {
    --x: 0.8086288244;
    --y: 0.1729430458;
    --x2: -0.0287870635;
    --y2: 0.4941676456;
    --delay: 0.619416606;
  }
  .startails > div:nth-of-type(92) {
    --x: 0.7737642285;
    --y: 0.0194605304;
    --x2: -0.1004916855;
    --y2: -0.426744051;
    --delay: 0.5202985935;
  }
  .startails > div:nth-of-type(93) {
    --x: 0.3948208878;
    --y: 0.7983101339;
    --x2: -0.1386625814;
    --y2: 0.2177964631;
    --delay: 0.2430336277;
  }
  .startails > div:nth-of-type(94) {
    --x: 0.2317158216;
    --y: 0.7262267296;
    --x2: -0.2218166862;
    --y2: -0.4960732461;
    --delay: 0.7397854306;
  }
  .startails > div:nth-of-type(95) {
    --x: 0.4986790915;
    --y: 0.6027671637;
    --x2: 0.398577692;
    --y2: -0.1165762998;
    --delay: 0.0459268763;
  }
  .startails > div:nth-of-type(96) {
    --x: 0.5800622753;
    --y: 0.4595460274;
    --x2: -0.0661215117;
    --y2: -0.0821325256;
    --delay: 0.6617784111;
  }
  .startails > div:nth-of-type(97) {
    --x: 0.6282776439;
    --y: 0.2505743252;
    --x2: 0.2248878895;
    --y2: -0.1803638151;
    --delay: 0.2210687179;
  }
  .startails > div:nth-of-type(98) {
    --x: 0.3684914264;
    --y: 0.9622436909;
    --x2: -0.3059871673;
    --y2: 0.2572673588;
    --delay: 0.2864674;
  }
  .startails > div:nth-of-type(99) {
    --x: 0.0714062818;
    --y: 0.2589038058;
    --x2: -0.2433596767;
    --y2: -0.2779903137;
    --delay: 0.543645614;
  }
  .startails > div:nth-of-type(100) {
    --x: 0.0774050428;
    --y: 0.0314770813;
    --x2: 0.4017591463;
    --y2: 0.2250029255;
    --delay: 0.2716696387;
  }
  .startails > div:nth-of-type(101) {
    --x: 0.9533607218;
    --y: 0.1378013159;
    --x2: 0.0782422141;
    --y2: -0.4428266613;
    --delay: 0.1131680637;
  }
  .startails > div:nth-of-type(102) {
    --x: 0.5685265978;
    --y: 0.543793781;
    --x2: 0.2826602249;
    --y2: 0.0696886567;
    --delay: 0.7041019117;
  }
  .startails > div:nth-of-type(103) {
    --x: 0.3970886082;
    --y: 0.1129542631;
    --x2: -0.1362901757;
    --y2: 0.3416283832;
    --delay: 0.4498072831;
  }
  .startails > div:nth-of-type(104) {
    --x: 0.7242791089;
    --y: 0.0003788505;
    --x2: -0.2310584843;
    --y2: 0.3147714829;
    --delay: 0.532524718;
  }
  .startails > div:nth-of-type(105) {
    --x: 0.1673416653;
    --y: 0.6368251277;
    --x2: 0.2029590877;
    --y2: 0.4268882264;
    --delay: 0.8416261122;
  }
  .startails > div:nth-of-type(106) {
    --x: 0.5322321891;
    --y: 0.0063842789;
    --x2: 0.3052491284;
    --y2: -0.0895185887;
    --delay: 0.4045577946;
  }
  .startails > div:nth-of-type(107) {
    --x: 0.2633616213;
    --y: 0.7463719544;
    --x2: -0.2939192314;
    --y2: 0.1778248727;
    --delay: 0.9841270906;
  }
  .startails > div:nth-of-type(108) {
    --x: 0.0524577398;
    --y: 0.17909443;
    --x2: 0.0500031321;
    --y2: 0.4198067535;
    --delay: 0.9297471688;
  }
  .startails > div:nth-of-type(109) {
    --x: 0.8965773047;
    --y: 0.8570588411;
    --x2: -0.2539553642;
    --y2: 0.4822150613;
    --delay: 0.3727483279;
  }
  .startails > div:nth-of-type(110) {
    --x: 0.1814518531;
    --y: 0.7448759276;
    --x2: -0.0925678049;
    --y2: 0.4176024478;
    --delay: 0.0859640337;
  }
  .startails > div:nth-of-type(111) {
    --x: 0.5195383289;
    --y: 0.9332942321;
    --x2: -0.1506627563;
    --y2: -0.0195721623;
    --delay: 0.5684816475;
  }
  .startails > div:nth-of-type(112) {
    --x: 0.7183012187;
    --y: 0.3417737037;
    --x2: -0.3175063365;
    --y2: -0.3380288702;
    --delay: 0.7905820374;
  }
  .startails > div:nth-of-type(113) {
    --x: 0.5127557395;
    --y: 0.5877549809;
    --x2: 0.248395052;
    --y2: -0.0847467602;
    --delay: 0.2643526301;
  }
  .startails > div:nth-of-type(114) {
    --x: 0.1121437321;
    --y: 0.3611504533;
    --x2: 0.4475110408;
    --y2: -0.2542580887;
    --delay: 0.8110649604;
  }
  .startails > div:nth-of-type(115) {
    --x: 0.4815205368;
    --y: 0.9448949882;
    --x2: 0.0543832813;
    --y2: 0.0073215951;
    --delay: 0.121094355;
  }
  .startails > div:nth-of-type(116) {
    --x: 0.5802013909;
    --y: 0.9771961679;
    --x2: -0.2884890621;
    --y2: 0.3824326014;
    --delay: 0.0363744342;
  }
  .startails > div:nth-of-type(117) {
    --x: 0.3102438785;
    --y: 0.1219487838;
    --x2: -0.4160902178;
    --y2: 0.3531340138;
    --delay: 0.0256200775;
  }
  .startails > div:nth-of-type(118) {
    --x: 0.6859738016;
    --y: 0.0494756659;
    --x2: -0.3864196846;
    --y2: 0.4114991393;
    --delay: 0.9354651101;
  }
  .startails > div:nth-of-type(119) {
    --x: 0.6691040654;
    --y: 0.953684611;
    --x2: -0.0256480994;
    --y2: -0.1777266414;
    --delay: 0.8357763282;
  }
  .startails > div:nth-of-type(120) {
    --x: 0.0891657492;
    --y: 0.2095958773;
    --x2: -0.4897596678;
    --y2: -0.0518338356;
    --delay: 0.2588795658;
  }
  .startails > div:nth-of-type(121) {
    --x: 0.325055623;
    --y: 0.0645713719;
    --x2: 0.4953943181;
    --y2: -0.468634975;
    --delay: 0.8939033831;
  }
  .startails > div:nth-of-type(122) {
    --x: 0.4389449268;
    --y: 0.69081106;
    --x2: 0.2184150775;
    --y2: -0.1794512293;
    --delay: 0.5052784169;
  }
  .startails > div:nth-of-type(123) {
    --x: 0.1515622364;
    --y: 0.1767765708;
    --x2: 0.2343245374;
    --y2: -0.1499409903;
    --delay: 0.8351725599;
  }
  .startails > div:nth-of-type(124) {
    --x: 0.2749355945;
    --y: 0.6428557718;
    --x2: 0.3503006973;
    --y2: 0.2955160991;
    --delay: 0.1348486173;
  }
  .startails > div:nth-of-type(125) {
    --x: 0.0505411817;
    --y: 0.3622374613;
    --x2: -0.3140420319;
    --y2: -0.4489852795;
    --delay: 0.5259255936;
  }
  .startails > div:nth-of-type(126) {
    --x: 0.5649478098;
    --y: 0.00280467;
    --x2: 0.2792869021;
    --y2: -0.4142205928;
    --delay: 0.0818342895;
  }
  .startails > div:nth-of-type(127) {
    --x: 0.5498870148;
    --y: 0.0128588263;
    --x2: 0.1636073768;
    --y2: -0.4575248209;
    --delay: 0.9474541329;
  }
  .startails > div:nth-of-type(128) {
    --x: 0.9269950816;
    --y: 0.4966567567;
    --x2: 0.2887003848;
    --y2: 0.3970244319;
    --delay: 0.9459287964;
  }
  .startails > div:nth-of-type(129) {
    --x: 0.7325473349;
    --y: 0.2532159972;
    --x2: 0.1234281532;
    --y2: 0.3644812116;
    --delay: 0.5194210737;
  }
  .startails > div:nth-of-type(130) {
    --x: 0.5629222001;
    --y: 0.081365404;
    --x2: -0.3170513315;
    --y2: -0.4104457884;
    --delay: 0.3936341242;
  }
  .startails > div:nth-of-type(131) {
    --x: 0.469895833;
    --y: 0.4824186899;
    --x2: -0.0457696358;
    --y2: -0.0485790387;
    --delay: 0.2424246152;
  }
  .startails > div:nth-of-type(132) {
    --x: 0.9666809886;
    --y: 0.2431724942;
    --x2: -0.1512201352;
    --y2: 0.1907434277;
    --delay: 0.0823200925;
  }
  .startails > div:nth-of-type(133) {
    --x: 0.3676995258;
    --y: 0.6320239661;
    --x2: -0.2344461996;
    --y2: 0.3868027931;
    --delay: 0.8841892791;
  }
  .startails > div:nth-of-type(134) {
    --x: 0.3929598391;
    --y: 0.4306159503;
    --x2: 0.1810416751;
    --y2: 0.4973482188;
    --delay: 0.7881710049;
  }
  .startails > div:nth-of-type(135) {
    --x: 0.9665124632;
    --y: 0.0713723039;
    --x2: 0.3199436911;
    --y2: -0.0314780826;
    --delay: 0.6705195968;
  }
  .startails > div:nth-of-type(136) {
    --x: 0.3606115769;
    --y: 0.1163264378;
    --x2: 0.4004911962;
    --y2: 0.0183737874;
    --delay: 0.6259512613;
  }
  .startails > div:nth-of-type(137) {
    --x: 0.568361583;
    --y: 0.8408384535;
    --x2: -0.3085411229;
    --y2: 0.4540325489;
    --delay: 0.6882029125;
  }
  .startails > div:nth-of-type(138) {
    --x: 0.8952401791;
    --y: 0.6579066418;
    --x2: -0.3544003479;
    --y2: -0.3997060561;
    --delay: 0.0950006418;
  }
  .startails > div:nth-of-type(139) {
    --x: 0.9302198004;
    --y: 0.8442189191;
    --x2: 0.3715698613;
    --y2: 0.4036397787;
    --delay: 0.9598433738;
  }
  .startails > div:nth-of-type(140) {
    --x: 0.8345896451;
    --y: 0.4728222522;
    --x2: -0.1489384223;
    --y2: 0.4185682293;
    --delay: 0.26033365;
  }
  .startails > div:nth-of-type(141) {
    --x: 0.7808696942;
    --y: 0.4420782989;
    --x2: -0.4996590955;
    --y2: -0.245750524;
    --delay: 0.8612622756;
  }
  .startails > div:nth-of-type(142) {
    --x: 0.3940022558;
    --y: 0.9887579074;
    --x2: 0.0585348714;
    --y2: 0.2921780018;
    --delay: 0.7433662389;
  }
  .startails > div:nth-of-type(143) {
    --x: 0.522196715;
    --y: 0.0896718711;
    --x2: -0.4376183019;
    --y2: 0.3263475646;
    --delay: 0.2936117162;
  }
  .startails > div:nth-of-type(144) {
    --x: 0.1928596407;
    --y: 0.2243617534;
    --x2: 0.38209783;
    --y2: 0.3918724344;
    --delay: 0.175377865;
  }
  .startails > div:nth-of-type(145) {
    --x: 0.150649261;
    --y: 0.1825543244;
    --x2: 0.0003497043;
    --y2: 0.3888975741;
    --delay: 0.3064687466;
  }
  .startails > div:nth-of-type(146) {
    --x: 0.5700197845;
    --y: 0.727011252;
    --x2: -0.4311934437;
    --y2: 0.4928780001;
    --delay: 0.6460236659;
  }
  .startails > div:nth-of-type(147) {
    --x: 0.2998496683;
    --y: 0.733844221;
    --x2: 0.3214005406;
    --y2: 0.0212919623;
    --delay: 0.4176024486;
  }
  .startails > div:nth-of-type(148) {
    --x: 0.1228223195;
    --y: 0.7310443575;
    --x2: -0.0923098568;
    --y2: 0.1175213221;
    --delay: 0.2496541485;
  }
  .startails > div:nth-of-type(149) {
    --x: 0.2743916706;
    --y: 0.6879589036;
    --x2: 0.2765966882;
    --y2: -0.3226770928;
    --delay: 0.7454121511;
  }
  .startails > div:nth-of-type(150) {
    --x: 0.5583267562;
    --y: 0.8995618332;
    --x2: 0.3884169514;
    --y2: -0.1891634116;
    --delay: 0.0571069281;
  }
  .startails > div:nth-of-type(151) {
    --x: 0.123450456;
    --y: 0.5772993738;
    --x2: 0.097311864;
    --y2: -0.0814725906;
    --delay: 0.8647756794;
  }
  .startails > div:nth-of-type(152) {
    --x: 0.4850233014;
    --y: 0.2327439971;
    --x2: -0.4572043059;
    --y2: -0.3210190401;
    --delay: 0.1753504331;
  }
  .startails > div:nth-of-type(153) {
    --x: 0.3750168449;
    --y: 0.6818082134;
    --x2: 0.3450572597;
    --y2: -0.1673816275;
    --delay: 0.8973857652;
  }
  .startails > div:nth-of-type(154) {
    --x: 0.6347718496;
    --y: 0.290463197;
    --x2: 0.2201948541;
    --y2: 0.4580686126;
    --delay: 0.5874106714;
  }
  .startails > div:nth-of-type(155) {
    --x: 0.956137832;
    --y: 0.4476812646;
    --x2: 0.0032244951;
    --y2: 0.3882858833;
    --delay: 0.0786599478;
  }
  .startails > div:nth-of-type(156) {
    --x: 0.907788583;
    --y: 0.5916085683;
    --x2: -0.4449608992;
    --y2: -0.2954763559;
    --delay: 0.2022266432;
  }
  .startails > div:nth-of-type(157) {
    --x: 0.1823861683;
    --y: 0.8312001547;
    --x2: 0.3496395517;
    --y2: 0.1761621983;
    --delay: 0.8704624969;
  }
  .startails > div:nth-of-type(158) {
    --x: 0.1849234388;
    --y: 0.4086218866;
    --x2: -0.4495252021;
    --y2: 0.2151851446;
    --delay: 0.2894049817;
  }
  .startails > div:nth-of-type(159) {
    --x: 0.7142666178;
    --y: 0.14078831;
    --x2: -0.2383576854;
    --y2: 0.3792551197;
    --delay: 0.8372111869;
  }
  .startails > div:nth-of-type(160) {
    --x: 0.23701299;
    --y: 0.7411680843;
    --x2: -0.0223153851;
    --y2: 0.1560929269;
    --delay: 0.5471821212;
  }
  .startails > div:nth-of-type(161) {
    --x: 0.5361120676;
    --y: 0.1778301453;
    --x2: -0.2321198135;
    --y2: -0.3415841751;
    --delay: 0.8209089927;
  }
  .startails > div:nth-of-type(162) {
    --x: 0.5255559238;
    --y: 0.7577990162;
    --x2: -0.442591156;
    --y2: 0.4965077864;
    --delay: 0.3125774421;
  }
  .startails > div:nth-of-type(163) {
    --x: 0.0866917734;
    --y: 0.360843917;
    --x2: -0.3688038086;
    --y2: -0.4088417987;
    --delay: 0.9083233915;
  }
  .startails > div:nth-of-type(164) {
    --x: 0.9695638606;
    --y: 0.0927715145;
    --x2: -0.3292967359;
    --y2: -0.4671079868;
    --delay: 0.7789218299;
  }
  .startails > div:nth-of-type(165) {
    --x: 0.6968124334;
    --y: 0.7420173364;
    --x2: 0.419600355;
    --y2: 0.077476951;
    --delay: 0.8043985019;
  }
  .startails > div:nth-of-type(166) {
    --x: 0.3025042656;
    --y: 0.6081460894;
    --x2: -0.0321252788;
    --y2: 0.4908740603;
    --delay: 0.2705149423;
  }
  .startails > div:nth-of-type(167) {
    --x: 0.2843383545;
    --y: 0.3625637273;
    --x2: 0.2672606485;
    --y2: -0.4565212039;
    --delay: 0.8561754322;
  }
  .startails > div:nth-of-type(168) {
    --x: 0.2282927497;
    --y: 0.7133722725;
    --x2: 0.3943065023;
    --y2: 0.3484076911;
    --delay: 0.5261994281;
  }
  .startails > div:nth-of-type(169) {
    --x: 0.1973001286;
    --y: 0.5829191211;
    --x2: -0.2250052831;
    --y2: -0.2558847754;
    --delay: 0.764488546;
  }
  .startails > div:nth-of-type(170) {
    --x: 0.509858767;
    --y: 0.053791008;
    --x2: -0.0879064918;
    --y2: -0.0812723564;
    --delay: 0.8654799312;
  }
  .startails > div:nth-of-type(171) {
    --x: 0.3479895478;
    --y: 0.851802793;
    --x2: 0.2675260638;
    --y2: 0.2106723392;
    --delay: 0.739149785;
  }
  .startails > div:nth-of-type(172) {
    --x: 0.4512462229;
    --y: 0.2794262021;
    --x2: 0.3249584321;
    --y2: 0.2033184919;
    --delay: 0.6366405216;
  }
  .startails > div:nth-of-type(173) {
    --x: 0.7477230594;
    --y: 0.2933376514;
    --x2: 0.0387049306;
    --y2: 0.1845034872;
    --delay: 0.3131096917;
  }
  .startails > div:nth-of-type(174) {
    --x: 0.730162268;
    --y: 0.7473967925;
    --x2: 0.1289759449;
    --y2: -0.1274503167;
    --delay: 0.6977210402;
  }
  .startails > div:nth-of-type(175) {
    --x: 0.0434666701;
    --y: 0.5143200729;
    --x2: 0.0321073535;
    --y2: -0.0379938493;
    --delay: 0.9518485134;
  }
  .startails > div:nth-of-type(176) {
    --x: 0.4643662401;
    --y: 0.906383461;
    --x2: -0.1472018041;
    --y2: -0.428418085;
    --delay: 0.4825692417;
  }
  .startails > div:nth-of-type(177) {
    --x: 0.497388776;
    --y: 0.3893954337;
    --x2: -0.3559966072;
    --y2: 0.309807552;
    --delay: 0.0792474746;
  }
  .startails > div:nth-of-type(178) {
    --x: 0.094433217;
    --y: 0.9916406114;
    --x2: 0.474733962;
    --y2: -0.2315922673;
    --delay: 0.7307169466;
  }
  .startails > div:nth-of-type(179) {
    --x: 0.0905062312;
    --y: 0.5321760027;
    --x2: 0.4313519529;
    --y2: -0.0404168274;
    --delay: 0.2909264349;
  }
  .startails > div:nth-of-type(180) {
    --x: 0.3755656824;
    --y: 0.6357506492;
    --x2: -0.3229713516;
    --y2: 0.042609575;
    --delay: 0.6847322029;
  }
  .startails > div:nth-of-type(181) {
    --x: 0.3282916067;
    --y: 0.6515024238;
    --x2: 0.3227570208;
    --y2: -0.2516033296;
    --delay: 0.0086693685;
  }
  .startails > div:nth-of-type(182) {
    --x: 0.5198085873;
    --y: 0.3466190968;
    --x2: -0.2359105804;
    --y2: 0.4624428662;
    --delay: 0.1076596596;
  }
  .startails > div:nth-of-type(183) {
    --x: 0.6539128332;
    --y: 0.4247151552;
    --x2: -0.4197652492;
    --y2: 0.3588336277;
    --delay: 0.5334835387;
  }
  .startails > div:nth-of-type(184) {
    --x: 0.4650972175;
    --y: 0.9289473867;
    --x2: -0.3340387714;
    --y2: 0.4808904215;
    --delay: 0.867567308;
  }
  .startails > div:nth-of-type(185) {
    --x: 0.9600797658;
    --y: 0.4563775507;
    --x2: 0.0152914538;
    --y2: 0.4007693611;
    --delay: 0.5732665023;
  }
  .startails > div:nth-of-type(186) {
    --x: 0.8363946762;
    --y: 0.0654528556;
    --x2: 0.4862760578;
    --y2: 0.4482614101;
    --delay: 0.5093916446;
  }
  .startails > div:nth-of-type(187) {
    --x: 0.4247696227;
    --y: 0.8940591412;
    --x2: 0.2448126333;
    --y2: -0.2360941052;
    --delay: 0.3722297709;
  }
  .startails > div:nth-of-type(188) {
    --x: 0.6240628969;
    --y: 0.2822406804;
    --x2: -0.1955076929;
    --y2: 0.2210433172;
    --delay: 0.3497665734;
  }
  .startails > div:nth-of-type(189) {
    --x: 0.7307253473;
    --y: 0.2308987079;
    --x2: -0.2864323004;
    --y2: -0.0117768714;
    --delay: 0.3818857873;
  }
  .startails > div:nth-of-type(190) {
    --x: 0.3047245264;
    --y: 0.8911784998;
    --x2: -0.1164744161;
    --y2: -0.2612246595;
    --delay: 0.0350871496;
  }
  .startails > div:nth-of-type(191) {
    --x: 0.071183786;
    --y: 0.137455127;
    --x2: 0.1557350861;
    --y2: 0.0359507864;
    --delay: 0.5849504151;
  }
  .startails > div:nth-of-type(192) {
    --x: 0.0607185919;
    --y: 0.8479779262;
    --x2: -0.4293309727;
    --y2: -0.2564083387;
    --delay: 0.5999464643;
  }
  .startails > div:nth-of-type(193) {
    --x: 0.1693319484;
    --y: 0.5894340206;
    --x2: -0.211758619;
    --y2: 0.0757151005;
    --delay: 0.40175101;
  }
  .startails > div:nth-of-type(194) {
    --x: 0.7672709016;
    --y: 0.9415052573;
    --x2: -0.3328542562;
    --y2: 0.2087455311;
    --delay: 0.8485218615;
  }
  .startails > div:nth-of-type(195) {
    --x: 0.9015898332;
    --y: 0.370551169;
    --x2: 0.3433938548;
    --y2: 0.4391062825;
    --delay: 0.1572854192;
  }
  .startails > div:nth-of-type(196) {
    --x: 0.189473922;
    --y: 0.8957046244;
    --x2: 0.0540475064;
    --y2: 0.3612258085;
    --delay: 0.7874109262;
  }
  .startails > div:nth-of-type(197) {
    --x: 0.43992993;
    --y: 0.5159576689;
    --x2: 0.048102912;
    --y2: -0.4252426497;
    --delay: 0.2029419749;
  }
  .startails > div:nth-of-type(198) {
    --x: 0.7916776203;
    --y: 0.3267291912;
    --x2: 0.4631776137;
    --y2: -0.2099790652;
    --delay: 0.6211226153;
  }
  .startails > div:nth-of-type(199) {
    --x: 0.7169731855;
    --y: 0.3027151674;
    --x2: -0.2403700685;
    --y2: -0.3194994772;
    --delay: 0.9876702505;
  }
  .startails > div:nth-of-type(200) {
    --x: 0.9669910433;
    --y: 0.3337804377;
    --x2: -0.040520687;
    --y2: 0.2261495112;
    --delay: 0.7152486422;
  }
  .startails > div:nth-of-type(201) {
    --x: 0.4488615713;
    --y: 0.8930812283;
    --x2: -0.4475512974;
    --y2: -0.0872098802;
    --delay: 0.6580637455;
  }

  @-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.5816370434;
    --y: 0.1669229097;
    --x2: 0.2338576343;
    --y2: 0.0434231881;
    --delay: 0.9633576602;
  }
  .planets > div:nth-of-type(2),
.planets-2 > div:nth-of-type(2) {
    --x: 0.2770656211;
    --y: 0.249100507;
    --x2: -0.3760916709;
    --y2: 0.4447234653;
    --delay: 0.6991213991;
  }
  .planets > div:nth-of-type(3),
.planets-2 > div:nth-of-type(3) {
    --x: 0.0277636862;
    --y: 0.5100955395;
    --x2: -0.2041559451;
    --y2: 0.1715466244;
    --delay: 0.099432346;
  }
  .planets > div:nth-of-type(4),
.planets-2 > div:nth-of-type(4) {
    --x: 0.2042561872;
    --y: 0.8364507274;
    --x2: -0.0240021219;
    --y2: -0.0893333224;
    --delay: 0.2972208694;
  }
  .planets > div:nth-of-type(5),
.planets-2 > div:nth-of-type(5) {
    --x: 0.4415582674;
    --y: 0.6044088493;
    --x2: 0.3316221532;
    --y2: -0.343411398;
    --delay: 0.508771717;
  }
  .planets > div:nth-of-type(6),
.planets-2 > div:nth-of-type(6) {
    --x: 0.9314454836;
    --y: 0.5392724539;
    --x2: 0.2135709314;
    --y2: -0.0108970098;
    --delay: 0.7916553026;
  }
  .planets > div:nth-of-type(7),
.planets-2 > div:nth-of-type(7) {
    --x: 0.5115863291;
    --y: 0.1985718753;
    --x2: -0.1645506743;
    --y2: -0.2558725657;
    --delay: 0.5037693881;
  }
  .planets > div:nth-of-type(8),
.planets-2 > div:nth-of-type(8) {
    --x: 0.6444685021;
    --y: 0.0129167113;
    --x2: 0.4361571409;
    --y2: -0.2239233655;
    --delay: 0.5011848404;
  }
  .planets > div:nth-of-type(9),
.planets-2 > div:nth-of-type(9) {
    --x: 0.1051650179;
    --y: 0.6851764754;
    --x2: -0.3545278829;
    --y2: -0.0183814834;
    --delay: 0.8953334965;
  }
  .planets > div:nth-of-type(10),
.planets-2 > div:nth-of-type(10) {
    --x: 0.2548878357;
    --y: 0.9307111511;
    --x2: 0.2685195709;
    --y2: 0.3982000123;
    --delay: 0.4787185619;
  }
  .planets > div:nth-of-type(11),
.planets-2 > div:nth-of-type(11) {
    --x: 0.3950298999;
    --y: 0.6727694172;
    --x2: -0.1158403553;
    --y2: 0.0689300745;
    --delay: 0.6039962067;
  }
  .planets > div:nth-of-type(12),
.planets-2 > div:nth-of-type(12) {
    --x: 0.348568238;
    --y: 0.2861817407;
    --x2: -0.3836721118;
    --y2: -0.3889575857;
    --delay: 0.433257274;
  }
  .planets > div:nth-of-type(13),
.planets-2 > div:nth-of-type(13) {
    --x: 0.4229784422;
    --y: 0.3093175093;
    --x2: -0.1710954349;
    --y2: 0.1338480382;
    --delay: 0.0005680278;
  }
  .planets > div:nth-of-type(14),
.planets-2 > div:nth-of-type(14) {
    --x: 0.6511306421;
    --y: 0.9574290955;
    --x2: -0.0586938694;
    --y2: 0.3553996529;
    --delay: 0.3037785179;
  }
  .planets > div:nth-of-type(15),
.planets-2 > div:nth-of-type(15) {
    --x: 0.5621909968;
    --y: 0.4102316704;
    --x2: -0.4042372711;
    --y2: 0.1769077614;
    --delay: 0.2638674929;
  }
  .planets > div:nth-of-type(16),
.planets-2 > div:nth-of-type(16) {
    --x: 0.1503389664;
    --y: 0.2794105957;
    --x2: 0.391974869;
    --y2: 0.2097139463;
    --delay: 0.6491149626;
  }
  .planets > div:nth-of-type(17),
.planets-2 > div:nth-of-type(17) {
    --x: 0.2399686269;
    --y: 0.9496175525;
    --x2: 0.1933543082;
    --y2: -0.0634623553;
    --delay: 0.4502632236;
  }
  .planets > div:nth-of-type(18),
.planets-2 > div:nth-of-type(18) {
    --x: 0.3197294313;
    --y: 0.4950490179;
    --x2: 0.4498662782;
    --y2: 0.3889781749;
    --delay: 0.7910460058;
  }
  .planets > div:nth-of-type(19),
.planets-2 > div:nth-of-type(19) {
    --x: 0.9727581293;
    --y: 0.2687383984;
    --x2: 0.1409359099;
    --y2: 0.1509067148;
    --delay: 0.9580371342;
  }
  .planets > div:nth-of-type(20),
.planets-2 > div:nth-of-type(20) {
    --x: 0.6081933113;
    --y: 0.7188682624;
    --x2: 0.4997544123;
    --y2: 0.0052003594;
    --delay: 0.7493161864;
  }
  .planets > div:nth-of-type(21),
.planets-2 > div:nth-of-type(21) {
    --x: 0.7180347281;
    --y: 0.235878812;
    --x2: 0.3816388147;
    --y2: 0.1691855745;
    --delay: 0.5591951338;
  }
  .planets > div:nth-of-type(22),
.planets-2 > div:nth-of-type(22) {
    --x: 0.5420424867;
    --y: 0.1304440842;
    --x2: -0.0063530402;
    --y2: 0.179919832;
    --delay: 0.0401578965;
  }
  .planets > div:nth-of-type(23),
.planets-2 > div:nth-of-type(23) {
    --x: 0.5585499766;
    --y: 0.5256552609;
    --x2: 0.2457468168;
    --y2: 0.0229068686;
    --delay: 0.6573397608;
  }
  .planets > div:nth-of-type(24),
.planets-2 > div:nth-of-type(24) {
    --x: 0.4170505874;
    --y: 0.8118731216;
    --x2: -0.3231015762;
    --y2: 0.4838534711;
    --delay: 0.0471460645;
  }
  .planets > div:nth-of-type(25),
.planets-2 > div:nth-of-type(25) {
    --x: 0.187575255;
    --y: 0.8503580905;
    --x2: -0.2990515405;
    --y2: -0.3124861891;
    --delay: 0.4160311715;
  }
  .planets > div:nth-of-type(26),
.planets-2 > div:nth-of-type(26) {
    --x: 0.9443107535;
    --y: 0.8539521652;
    --x2: -0.4263431756;
    --y2: -0.0013900139;
    --delay: 0.54552089;
  }
  .planets > div:nth-of-type(27),
.planets-2 > div:nth-of-type(27) {
    --x: 0.5914312561;
    --y: 0.3372975402;
    --x2: 0.2161124304;
    --y2: 0.3172276245;
    --delay: 0.2610410623;
  }
  .planets > div:nth-of-type(28),
.planets-2 > div:nth-of-type(28) {
    --x: 0.4280895759;
    --y: 0.2047027351;
    --x2: 0.0040430841;
    --y2: 0.0222498406;
    --delay: 0.344351454;
  }
  .planets > div:nth-of-type(29),
.planets-2 > div:nth-of-type(29) {
    --x: 0.7425707519;
    --y: 0.1057166221;
    --x2: -0.0197564513;
    --y2: -0.0267336253;
    --delay: 0.2898389445;
  }
  .planets > div:nth-of-type(30),
.planets-2 > div:nth-of-type(30) {
    --x: 0.2826645879;
    --y: 0.9372246372;
    --x2: -0.0097623047;
    --y2: 0.2003479158;
    --delay: 0.2807398481;
  }
  .planets > div:nth-of-type(31),
.planets-2 > div:nth-of-type(31) {
    --x: 0.4834265511;
    --y: 0.1848480003;
    --x2: 0.0025820528;
    --y2: -0.453509612;
    --delay: 0.557415965;
  }
  .planets > div:nth-of-type(32),
.planets-2 > div:nth-of-type(32) {
    --x: 0.8266342744;
    --y: 0.7132246519;
    --x2: -0.0713533123;
    --y2: 0.2492777579;
    --delay: 0.842866185;
  }
  .planets > div:nth-of-type(33),
.planets-2 > div:nth-of-type(33) {
    --x: 0.3340175718;
    --y: 0.0630505705;
    --x2: -0.2785417451;
    --y2: -0.2010976802;
    --delay: 0.550793287;
  }
  .planets > div:nth-of-type(34),
.planets-2 > div:nth-of-type(34) {
    --x: 0.2194455618;
    --y: 0.1916375167;
    --x2: -0.4034247316;
    --y2: -0.0588095964;
    --delay: 0.1003308827;
  }
  .planets > div:nth-of-type(35),
.planets-2 > div:nth-of-type(35) {
    --x: 0.8848418803;
    --y: 0.7200881121;
    --x2: -0.0121897281;
    --y2: -0.1858268283;
    --delay: 0.5545423783;
  }
  .planets > div:nth-of-type(36),
.planets-2 > div:nth-of-type(36) {
    --x: 0.711014217;
    --y: 0.8176154087;
    --x2: -0.118142721;
    --y2: 0.0784689358;
    --delay: 0.0271685064;
  }
  .planets > div:nth-of-type(37),
.planets-2 > div:nth-of-type(37) {
    --x: 0.1152176269;
    --y: 0.0135895302;
    --x2: -0.1372987913;
    --y2: 0.1137727213;
    --delay: 0.1931292939;
  }
  .planets > div:nth-of-type(38),
.planets-2 > div:nth-of-type(38) {
    --x: 0.0856268488;
    --y: 0.8012769558;
    --x2: -0.4415003256;
    --y2: -0.1687098038;
    --delay: 0.6977329145;
  }
  .planets > div:nth-of-type(39),
.planets-2 > div:nth-of-type(39) {
    --x: 0.6534019806;
    --y: 0.7606194379;
    --x2: -0.0573580169;
    --y2: -0.348224928;
    --delay: 0.3993035786;
  }
  .planets > div:nth-of-type(40),
.planets-2 > div:nth-of-type(40) {
    --x: 0.4090557691;
    --y: 0.7844012606;
    --x2: 0.0304994768;
    --y2: -0.0084985258;
    --delay: 0.2112630364;
  }
  .planets > div:nth-of-type(41),
.planets-2 > div:nth-of-type(41) {
    --x: 0.1994329721;
    --y: 0.325049952;
    --x2: -0.099426624;
    --y2: 0.1993162067;
    --delay: 0.6963848359;
  }
  .planets > div:nth-of-type(42),
.planets-2 > div:nth-of-type(42) {
    --x: 0.1261358405;
    --y: 0.378072377;
    --x2: -0.4815832059;
    --y2: 0.276723699;
    --delay: 0.448099934;
  }
  .planets > div:nth-of-type(43),
.planets-2 > div:nth-of-type(43) {
    --x: 0.5608969058;
    --y: 0.213522687;
    --x2: 0.2660115348;
    --y2: 0.4253952644;
    --delay: 0.7843115182;
  }
  .planets > div:nth-of-type(44),
.planets-2 > div:nth-of-type(44) {
    --x: 0.7143709181;
    --y: 0.9173230667;
    --x2: 0.2488405572;
    --y2: 0.0003033678;
    --delay: 0.2270545985;
  }
  .planets > div:nth-of-type(45),
.planets-2 > div:nth-of-type(45) {
    --x: 0.7239085423;
    --y: 0.549477914;
    --x2: -0.3696380757;
    --y2: -0.4746680653;
    --delay: 0.6581892443;
  }
  .planets > div:nth-of-type(46),
.planets-2 > div:nth-of-type(46) {
    --x: 0.300742606;
    --y: 0.6911550712;
    --x2: 0.4888689524;
    --y2: 0.3469005325;
    --delay: 0.2221763269;
  }
  .planets > div:nth-of-type(47),
.planets-2 > div:nth-of-type(47) {
    --x: 0.1984276062;
    --y: 0.0489828715;
    --x2: -0.2664397929;
    --y2: -0.1160891852;
    --delay: 0.3647453807;
  }
  .planets > div:nth-of-type(48),
.planets-2 > div:nth-of-type(48) {
    --x: 0.0224424178;
    --y: 0.0055939399;
    --x2: 0.4477490142;
    --y2: -0.4085849651;
    --delay: 0.1240237924;
  }
  .planets > div:nth-of-type(49),
.planets-2 > div:nth-of-type(49) {
    --x: 0.3611777956;
    --y: 0.9768520514;
    --x2: 0.3389359045;
    --y2: 0.3729617538;
    --delay: 0.2431193849;
  }
  .planets > div:nth-of-type(50),
.planets-2 > div:nth-of-type(50) {
    --x: 0.3509999045;
    --y: 0.9644127825;
    --x2: 0.3073384024;
    --y2: -0.1367514857;
    --delay: 0.1793965994;
  }
  .planets > div:nth-of-type(51),
.planets-2 > div:nth-of-type(51) {
    --x: 0.0026057278;
    --y: 0.903204929;
    --x2: -0.0730484077;
    --y2: 0.1899146116;
    --delay: 0.4381752824;
  }

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

.futuristic-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(128, 128, 128, 0.3); /* Grey with opacity */
  padding: 20px 0;
  text-align: center;
  z-index: 1000;
}

.futuristic-button {
  background-color: #000000; /* Black background */
  color: #ffffff; /* White text */
  border: 2px solid #FFD700; /* Gold border for Masonic touch */
  padding: 10px 20px;
  font-family: 'Arial', sans-serif; /* Or any futuristic font you prefer */
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.futuristic-button:hover {
  background-color: #FFD700; /* Gold on hover */
  color: #000000; /* Black text on hover */
}