@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.9807279836;
    --y: 0.3501653223;
    --x2: -0.160437947;
    --y2: 0.4561331251;
    --delay: 0.7660156964;
  }
  .startails > div:nth-of-type(2) {
    --x: 0.6720246867;
    --y: 0.3403586003;
    --x2: 0.0218992823;
    --y2: -0.0575083923;
    --delay: 0.4343800079;
  }
  .startails > div:nth-of-type(3) {
    --x: 0.5363343877;
    --y: 0.8285880337;
    --x2: 0.2134817745;
    --y2: 0.1504409035;
    --delay: 0.8722371829;
  }
  .startails > div:nth-of-type(4) {
    --x: 0.7519142944;
    --y: 0.945024219;
    --x2: -0.3403043628;
    --y2: 0.1945419799;
    --delay: 0.5476604798;
  }
  .startails > div:nth-of-type(5) {
    --x: 0.2990609856;
    --y: 0.2910187139;
    --x2: -0.3942679031;
    --y2: 0.4573548606;
    --delay: 0.23341618;
  }
  .startails > div:nth-of-type(6) {
    --x: 0.9590791406;
    --y: 0.3562580584;
    --x2: -0.3216832266;
    --y2: 0.432701897;
    --delay: 0.2237213823;
  }
  .startails > div:nth-of-type(7) {
    --x: 0.3239688197;
    --y: 0.1103662286;
    --x2: 0.45559558;
    --y2: -0.0697565153;
    --delay: 0.195637703;
  }
  .startails > div:nth-of-type(8) {
    --x: 0.1287963278;
    --y: 0.1799778699;
    --x2: -0.3890331897;
    --y2: -0.0145895117;
    --delay: 0.0488720446;
  }
  .startails > div:nth-of-type(9) {
    --x: 0.860790113;
    --y: 0.5594608621;
    --x2: -0.0772573653;
    --y2: 0.113063991;
    --delay: 0.2906576072;
  }
  .startails > div:nth-of-type(10) {
    --x: 0.5198018131;
    --y: 0.6760453274;
    --x2: 0.4096841518;
    --y2: 0.2012021497;
    --delay: 0.0618656076;
  }
  .startails > div:nth-of-type(11) {
    --x: 0.2535219194;
    --y: 0.6323244666;
    --x2: 0.3035512179;
    --y2: 0.0053894432;
    --delay: 0.0113628275;
  }
  .startails > div:nth-of-type(12) {
    --x: 0.7548000243;
    --y: 0.9151747672;
    --x2: -0.3379328241;
    --y2: -0.4585448757;
    --delay: 0.1825796428;
  }
  .startails > div:nth-of-type(13) {
    --x: 0.603688773;
    --y: 0.767640806;
    --x2: -0.4916185904;
    --y2: -0.2238649726;
    --delay: 0.5604915376;
  }
  .startails > div:nth-of-type(14) {
    --x: 0.3541102077;
    --y: 0.8635244029;
    --x2: 0.2199684679;
    --y2: 0.3632299573;
    --delay: 0.0647298638;
  }
  .startails > div:nth-of-type(15) {
    --x: 0.5504174995;
    --y: 0.1993484616;
    --x2: 0.3078309825;
    --y2: 0.3859608318;
    --delay: 0.675681055;
  }
  .startails > div:nth-of-type(16) {
    --x: 0.4403749606;
    --y: 0.5010529556;
    --x2: -0.0256932333;
    --y2: 0.3963937891;
    --delay: 0.470165315;
  }
  .startails > div:nth-of-type(17) {
    --x: 0.7902600937;
    --y: 0.6152217661;
    --x2: 0.1615334742;
    --y2: 0.0232162112;
    --delay: 0.5431718415;
  }
  .startails > div:nth-of-type(18) {
    --x: 0.8459721708;
    --y: 0.4682994346;
    --x2: 0.2018038169;
    --y2: 0.0819301981;
    --delay: 0.4631312275;
  }
  .startails > div:nth-of-type(19) {
    --x: 0.9521482186;
    --y: 0.8997090489;
    --x2: -0.3160202229;
    --y2: 0.4881927025;
    --delay: 0.2123874304;
  }
  .startails > div:nth-of-type(20) {
    --x: 0.3557745336;
    --y: 0.6131319232;
    --x2: -0.0903295656;
    --y2: -0.0224342875;
    --delay: 0.55879636;
  }
  .startails > div:nth-of-type(21) {
    --x: 0.2510371376;
    --y: 0.596010244;
    --x2: -0.2265139079;
    --y2: 0.3712159403;
    --delay: 0.3035771645;
  }
  .startails > div:nth-of-type(22) {
    --x: 0.1380479023;
    --y: 0.6658616009;
    --x2: -0.1483593196;
    --y2: 0.4128307225;
    --delay: 0.3172697884;
  }
  .startails > div:nth-of-type(23) {
    --x: 0.1799946547;
    --y: 0.9672057245;
    --x2: 0.3105565412;
    --y2: 0.0328758585;
    --delay: 0.9213356582;
  }
  .startails > div:nth-of-type(24) {
    --x: 0.1626681441;
    --y: 0.2327962303;
    --x2: 0.0271588065;
    --y2: 0.380003376;
    --delay: 0.568237062;
  }
  .startails > div:nth-of-type(25) {
    --x: 0.9163384181;
    --y: 0.1928585384;
    --x2: 0.3582748177;
    --y2: 0.2586692762;
    --delay: 0.3595156993;
  }
  .startails > div:nth-of-type(26) {
    --x: 0.8152140785;
    --y: 0.5668303951;
    --x2: -0.4831651124;
    --y2: -0.2156547468;
    --delay: 0.7629334404;
  }
  .startails > div:nth-of-type(27) {
    --x: 0.8860296542;
    --y: 0.4611769042;
    --x2: -0.1903017929;
    --y2: -0.3400311388;
    --delay: 0.7153199691;
  }
  .startails > div:nth-of-type(28) {
    --x: 0.3907807141;
    --y: 0.934940238;
    --x2: -0.0734510541;
    --y2: -0.0838582623;
    --delay: 0.0503541284;
  }
  .startails > div:nth-of-type(29) {
    --x: 0.7196247597;
    --y: 0.9701070609;
    --x2: -0.253784478;
    --y2: -0.4887430939;
    --delay: 0.5800574616;
  }
  .startails > div:nth-of-type(30) {
    --x: 0.515784834;
    --y: 0.7771696531;
    --x2: -0.2794397499;
    --y2: -0.0596496397;
    --delay: 0.4838540792;
  }
  .startails > div:nth-of-type(31) {
    --x: 0.4405859977;
    --y: 0.178780965;
    --x2: 0.4487918242;
    --y2: -0.1473475073;
    --delay: 0.2462696543;
  }
  .startails > div:nth-of-type(32) {
    --x: 0.4773202272;
    --y: 0.4792657973;
    --x2: 0.1414600186;
    --y2: 0.3966553486;
    --delay: 0.0828065074;
  }
  .startails > div:nth-of-type(33) {
    --x: 0.1385223041;
    --y: 0.5932123837;
    --x2: 0.1337072954;
    --y2: -0.1298764445;
    --delay: 0.3502541358;
  }
  .startails > div:nth-of-type(34) {
    --x: 0.6167117572;
    --y: 0.3953797135;
    --x2: -0.4487426329;
    --y2: -0.3197979601;
    --delay: 0.8761665539;
  }
  .startails > div:nth-of-type(35) {
    --x: 0.3762417939;
    --y: 0.8877662967;
    --x2: -0.3584149297;
    --y2: 0.2532501256;
    --delay: 0.0654408877;
  }
  .startails > div:nth-of-type(36) {
    --x: 0.4355420605;
    --y: 0.144328163;
    --x2: -0.3333439375;
    --y2: 0.4277324542;
    --delay: 0.8340201463;
  }
  .startails > div:nth-of-type(37) {
    --x: 0.9079592009;
    --y: 0.4736344694;
    --x2: -0.1498055716;
    --y2: 0.3873774725;
    --delay: 0.7880620301;
  }
  .startails > div:nth-of-type(38) {
    --x: 0.7468518265;
    --y: 0.8443496355;
    --x2: 0.3865973381;
    --y2: -0.3689242474;
    --delay: 0.9783065585;
  }
  .startails > div:nth-of-type(39) {
    --x: 0.2420980003;
    --y: 0.8873379023;
    --x2: -0.3676071171;
    --y2: 0.2858362253;
    --delay: 0.9371582303;
  }
  .startails > div:nth-of-type(40) {
    --x: 0.1690657767;
    --y: 0.7657490011;
    --x2: 0.3933011349;
    --y2: -0.3712830542;
    --delay: 0.0283506825;
  }
  .startails > div:nth-of-type(41) {
    --x: 0.3002472778;
    --y: 0.2271401014;
    --x2: 0.3193716589;
    --y2: 0.261838336;
    --delay: 0.1335482825;
  }
  .startails > div:nth-of-type(42) {
    --x: 0.4485303467;
    --y: 0.9209047326;
    --x2: 0.1842410817;
    --y2: 0.0031407793;
    --delay: 0.3909721728;
  }
  .startails > div:nth-of-type(43) {
    --x: 0.1380395023;
    --y: 0.2456845063;
    --x2: 0.414011473;
    --y2: -0.0941847931;
    --delay: 0.9632890786;
  }
  .startails > div:nth-of-type(44) {
    --x: 0.0565466941;
    --y: 0.9874563192;
    --x2: 0.4031382899;
    --y2: -0.1700781213;
    --delay: 0.1921634089;
  }
  .startails > div:nth-of-type(45) {
    --x: 0.0419696534;
    --y: 0.0523874807;
    --x2: -0.3020609368;
    --y2: -0.418890337;
    --delay: 0.0935988657;
  }
  .startails > div:nth-of-type(46) {
    --x: 0.7506841885;
    --y: 0.5392459241;
    --x2: -0.0617351262;
    --y2: 0.024929939;
    --delay: 0.272103155;
  }
  .startails > div:nth-of-type(47) {
    --x: 0.3268745365;
    --y: 0.7347874096;
    --x2: 0.3031991879;
    --y2: 0.4345078015;
    --delay: 0.1072213919;
  }
  .startails > div:nth-of-type(48) {
    --x: 0.3443266328;
    --y: 0.43813434;
    --x2: 0.449929101;
    --y2: 0.4508477973;
    --delay: 0.0066618928;
  }
  .startails > div:nth-of-type(49) {
    --x: 0.145500071;
    --y: 0.872585181;
    --x2: -0.3728547269;
    --y2: -0.1137694581;
    --delay: 0.2967969224;
  }
  .startails > div:nth-of-type(50) {
    --x: 0.4810088893;
    --y: 0.0897161299;
    --x2: 0.4822033153;
    --y2: 0.3309730558;
    --delay: 0.7862574935;
  }
  .startails > div:nth-of-type(51) {
    --x: 0.9873428856;
    --y: 0.5915802037;
    --x2: 0.2538827263;
    --y2: 0.362446969;
    --delay: 0.431481653;
  }
  .startails > div:nth-of-type(52) {
    --x: 0.3933881114;
    --y: 0.1187272186;
    --x2: 0.1315793821;
    --y2: -0.1797335231;
    --delay: 0.5879236939;
  }
  .startails > div:nth-of-type(53) {
    --x: 0.477275063;
    --y: 0.7648005991;
    --x2: 0.4369672121;
    --y2: -0.344423527;
    --delay: 0.2065469012;
  }
  .startails > div:nth-of-type(54) {
    --x: 0.6793381051;
    --y: 0.6828828253;
    --x2: 0.1081211085;
    --y2: 0.3749499221;
    --delay: 0.2791838661;
  }
  .startails > div:nth-of-type(55) {
    --x: 0.4639632999;
    --y: 0.3461575193;
    --x2: -0.1912248874;
    --y2: 0.1217462461;
    --delay: 0.2636029214;
  }
  .startails > div:nth-of-type(56) {
    --x: 0.7040839501;
    --y: 0.5196061779;
    --x2: 0.4074792682;
    --y2: 0.2136792969;
    --delay: 0.6379121531;
  }
  .startails > div:nth-of-type(57) {
    --x: 0.552399916;
    --y: 0.2550570797;
    --x2: 0.4972121955;
    --y2: -0.4557770838;
    --delay: 0.4654443875;
  }
  .startails > div:nth-of-type(58) {
    --x: 0.2903120763;
    --y: 0.0867502819;
    --x2: 0.0807949047;
    --y2: -0.459791239;
    --delay: 0.5399724342;
  }
  .startails > div:nth-of-type(59) {
    --x: 0.8339787663;
    --y: 0.0956940084;
    --x2: -0.0205532649;
    --y2: 0.4701977496;
    --delay: 0.244925229;
  }
  .startails > div:nth-of-type(60) {
    --x: 0.0204263587;
    --y: 0.7981546121;
    --x2: 0.3530849307;
    --y2: -0.4889410637;
    --delay: 0.237447845;
  }
  .startails > div:nth-of-type(61) {
    --x: 0.7039229964;
    --y: 0.181388143;
    --x2: -0.4646057397;
    --y2: -0.0187938976;
    --delay: 0.9528331169;
  }
  .startails > div:nth-of-type(62) {
    --x: 0.041834725;
    --y: 0.0314997973;
    --x2: 0.4873821283;
    --y2: -0.3121074468;
    --delay: 0.1339842;
  }
  .startails > div:nth-of-type(63) {
    --x: 0.170002118;
    --y: 0.6633130479;
    --x2: 0.290292535;
    --y2: -0.3774523154;
    --delay: 0.2368025675;
  }
  .startails > div:nth-of-type(64) {
    --x: 0.5375650301;
    --y: 0.3789192224;
    --x2: -0.3463610635;
    --y2: -0.4153012838;
    --delay: 0.7388492301;
  }
  .startails > div:nth-of-type(65) {
    --x: 0.1769743367;
    --y: 0.0677966759;
    --x2: -0.4962479785;
    --y2: 0.2640725161;
    --delay: 0.2861021209;
  }
  .startails > div:nth-of-type(66) {
    --x: 0.5113610269;
    --y: 0.8074943944;
    --x2: -0.2206722443;
    --y2: 0.0986657219;
    --delay: 0.658056076;
  }
  .startails > div:nth-of-type(67) {
    --x: 0.1239623046;
    --y: 0.3917429753;
    --x2: -0.3548076903;
    --y2: 0.1999186214;
    --delay: 0.8273752061;
  }
  .startails > div:nth-of-type(68) {
    --x: 0.8566974712;
    --y: 0.7377769054;
    --x2: 0.3480177813;
    --y2: -0.3105985719;
    --delay: 0.8875128079;
  }
  .startails > div:nth-of-type(69) {
    --x: 0.5043579167;
    --y: 0.4603069274;
    --x2: 0.3426681922;
    --y2: 0.1509913228;
    --delay: 0.7280961031;
  }
  .startails > div:nth-of-type(70) {
    --x: 0.4310044253;
    --y: 0.0473824209;
    --x2: 0.4315086063;
    --y2: -0.4728485473;
    --delay: 0.4849993683;
  }
  .startails > div:nth-of-type(71) {
    --x: 0.8801445784;
    --y: 0.1483427389;
    --x2: 0.0415523416;
    --y2: 0.1728268571;
    --delay: 0.5162753079;
  }
  .startails > div:nth-of-type(72) {
    --x: 0.2971917704;
    --y: 0.8620340394;
    --x2: 0.1814079577;
    --y2: 0.2596006024;
    --delay: 0.7491748127;
  }
  .startails > div:nth-of-type(73) {
    --x: 0.1439649162;
    --y: 0.2333148696;
    --x2: -0.2756204428;
    --y2: -0.3053027153;
    --delay: 0.0397176754;
  }
  .startails > div:nth-of-type(74) {
    --x: 0.5738774232;
    --y: 0.9263338026;
    --x2: -0.1285232153;
    --y2: -0.2553788961;
    --delay: 0.6821121942;
  }
  .startails > div:nth-of-type(75) {
    --x: 0.1923225863;
    --y: 0.7479251952;
    --x2: -0.2783801896;
    --y2: -0.2839450014;
    --delay: 0.988377565;
  }
  .startails > div:nth-of-type(76) {
    --x: 0.510048362;
    --y: 0.4193646976;
    --x2: -0.2326088335;
    --y2: 0.335734961;
    --delay: 0.7592136058;
  }
  .startails > div:nth-of-type(77) {
    --x: 0.6968822082;
    --y: 0.5222731122;
    --x2: 0.2162302139;
    --y2: -0.0712327514;
    --delay: 0.0580426251;
  }
  .startails > div:nth-of-type(78) {
    --x: 0.744224872;
    --y: 0.4002767159;
    --x2: 0.3033038477;
    --y2: -0.2008061524;
    --delay: 0.0378462712;
  }
  .startails > div:nth-of-type(79) {
    --x: 0.426415729;
    --y: 0.5124734219;
    --x2: -0.1351945757;
    --y2: 0.1194739643;
    --delay: 0.0185887549;
  }
  .startails > div:nth-of-type(80) {
    --x: 0.0534527692;
    --y: 0.900776531;
    --x2: -0.1588102894;
    --y2: -0.291051326;
    --delay: 0.7078609351;
  }
  .startails > div:nth-of-type(81) {
    --x: 0.0439735106;
    --y: 0.6453928944;
    --x2: -0.1307425569;
    --y2: -0.130837602;
    --delay: 0.1353925628;
  }
  .startails > div:nth-of-type(82) {
    --x: 0.7737160334;
    --y: 0.0781508995;
    --x2: -0.2452424079;
    --y2: 0.2433643246;
    --delay: 0.3336647349;
  }
  .startails > div:nth-of-type(83) {
    --x: 0.4042445045;
    --y: 0.320866072;
    --x2: -0.2366660283;
    --y2: -0.1377629871;
    --delay: 0.0284084196;
  }
  .startails > div:nth-of-type(84) {
    --x: 0.384355411;
    --y: 0.8110528247;
    --x2: 0.2049348474;
    --y2: 0.3250110936;
    --delay: 0.5758529846;
  }
  .startails > div:nth-of-type(85) {
    --x: 0.0045556826;
    --y: 0.1351147588;
    --x2: -0.3240736654;
    --y2: -0.2141344218;
    --delay: 0.2926599005;
  }
  .startails > div:nth-of-type(86) {
    --x: 0.3135698664;
    --y: 0.1959846412;
    --x2: 0.4558989512;
    --y2: 0.1523694254;
    --delay: 0.9109553967;
  }
  .startails > div:nth-of-type(87) {
    --x: 0.4934610344;
    --y: 0.3697719573;
    --x2: -0.0269294559;
    --y2: 0.4343797902;
    --delay: 0.2133166346;
  }
  .startails > div:nth-of-type(88) {
    --x: 0.7353774711;
    --y: 0.7209755874;
    --x2: 0.0760621539;
    --y2: 0.0331800746;
    --delay: 0.197545667;
  }
  .startails > div:nth-of-type(89) {
    --x: 0.7072860573;
    --y: 0.9413063473;
    --x2: 0.2600267564;
    --y2: -0.0933775481;
    --delay: 0.0223458629;
  }
  .startails > div:nth-of-type(90) {
    --x: 0.1980034739;
    --y: 0.9755440964;
    --x2: -0.0535894962;
    --y2: 0.0825274134;
    --delay: 0.2556702672;
  }
  .startails > div:nth-of-type(91) {
    --x: 0.6405884415;
    --y: 0.1771949729;
    --x2: -0.2499368421;
    --y2: -0.136337377;
    --delay: 0.2714043075;
  }
  .startails > div:nth-of-type(92) {
    --x: 0.3783124688;
    --y: 0.0982664914;
    --x2: 0.1860561177;
    --y2: -0.0525495093;
    --delay: 0.5537019151;
  }
  .startails > div:nth-of-type(93) {
    --x: 0.1988244459;
    --y: 0.8083580051;
    --x2: -0.0223603815;
    --y2: 0.3992885735;
    --delay: 0.0477451758;
  }
  .startails > div:nth-of-type(94) {
    --x: 0.1523000144;
    --y: 0.9299950375;
    --x2: 0.021589196;
    --y2: -0.0623555055;
    --delay: 0.3556426384;
  }
  .startails > div:nth-of-type(95) {
    --x: 0.7041541765;
    --y: 0.0271234637;
    --x2: 0.1003341876;
    --y2: -0.3987223475;
    --delay: 0.3391314552;
  }
  .startails > div:nth-of-type(96) {
    --x: 0.9176496083;
    --y: 0.3818453692;
    --x2: 0.4112840157;
    --y2: 0.171675341;
    --delay: 0.7076071462;
  }
  .startails > div:nth-of-type(97) {
    --x: 0.3067228346;
    --y: 0.9184221382;
    --x2: 0.1698604891;
    --y2: 0.4477955935;
    --delay: 0.4184872149;
  }
  .startails > div:nth-of-type(98) {
    --x: 0.6346005023;
    --y: 0.0130608621;
    --x2: -0.2732170098;
    --y2: -0.2979335734;
    --delay: 0.6075553383;
  }
  .startails > div:nth-of-type(99) {
    --x: 0.8051685487;
    --y: 0.6053172381;
    --x2: 0.4812384471;
    --y2: 0.1133717283;
    --delay: 0.808899243;
  }
  .startails > div:nth-of-type(100) {
    --x: 0.8505339772;
    --y: 0.2832019203;
    --x2: 0.2467560987;
    --y2: -0.4222715028;
    --delay: 0.8080697516;
  }
  .startails > div:nth-of-type(101) {
    --x: 0.0582463872;
    --y: 0.2231974243;
    --x2: -0.0732975775;
    --y2: -0.2377017628;
    --delay: 0.2924706213;
  }
  .startails > div:nth-of-type(102) {
    --x: 0.5806069867;
    --y: 0.1984263266;
    --x2: -0.1946071497;
    --y2: 0.190432882;
    --delay: 0.3687706741;
  }
  .startails > div:nth-of-type(103) {
    --x: 0.3916448026;
    --y: 0.4439668408;
    --x2: -0.0147956117;
    --y2: -0.3879541078;
    --delay: 0.3878667372;
  }
  .startails > div:nth-of-type(104) {
    --x: 0.6810149626;
    --y: 0.2465257131;
    --x2: 0.4663317679;
    --y2: -0.3538732617;
    --delay: 0.473009666;
  }
  .startails > div:nth-of-type(105) {
    --x: 0.53568527;
    --y: 0.7766981031;
    --x2: 0.102111916;
    --y2: -0.2978016812;
    --delay: 0.4332121345;
  }
  .startails > div:nth-of-type(106) {
    --x: 0.1834494133;
    --y: 0.4700782861;
    --x2: -0.4256220732;
    --y2: 0.2871754928;
    --delay: 0.2545692453;
  }
  .startails > div:nth-of-type(107) {
    --x: 0.4707168107;
    --y: 0.0993202147;
    --x2: -0.0007306197;
    --y2: -0.4716420909;
    --delay: 0.8290161698;
  }
  .startails > div:nth-of-type(108) {
    --x: 0.846563682;
    --y: 0.8959215074;
    --x2: -0.3660594077;
    --y2: 0.4240627492;
    --delay: 0.2332526396;
  }
  .startails > div:nth-of-type(109) {
    --x: 0.2918600176;
    --y: 0.5445974068;
    --x2: 0.4676153913;
    --y2: -0.074220173;
    --delay: 0.6792545573;
  }
  .startails > div:nth-of-type(110) {
    --x: 0.5432090985;
    --y: 0.1385784477;
    --x2: -0.0586208289;
    --y2: -0.0174636655;
    --delay: 0.6422596793;
  }
  .startails > div:nth-of-type(111) {
    --x: 0.7967020176;
    --y: 0.6782475825;
    --x2: -0.4290629083;
    --y2: 0.2653726919;
    --delay: 0.3083551671;
  }
  .startails > div:nth-of-type(112) {
    --x: 0.3822315974;
    --y: 0.2174905046;
    --x2: 0.2991708046;
    --y2: 0.3448591397;
    --delay: 0.6624352621;
  }
  .startails > div:nth-of-type(113) {
    --x: 0.183172106;
    --y: 0.0570035008;
    --x2: 0.0864251509;
    --y2: 0.0765131764;
    --delay: 0.6703660107;
  }
  .startails > div:nth-of-type(114) {
    --x: 0.8778436626;
    --y: 0.146611216;
    --x2: 0.339699516;
    --y2: -0.0017431318;
    --delay: 0.5376968537;
  }
  .startails > div:nth-of-type(115) {
    --x: 0.218167749;
    --y: 0.8334853557;
    --x2: -0.2127811112;
    --y2: -0.0240725404;
    --delay: 0.9734761461;
  }
  .startails > div:nth-of-type(116) {
    --x: 0.1898904035;
    --y: 0.3544724786;
    --x2: 0.1733618706;
    --y2: -0.3569997762;
    --delay: 0.4212523565;
  }
  .startails > div:nth-of-type(117) {
    --x: 0.7815876713;
    --y: 0.4653981757;
    --x2: -0.1114310836;
    --y2: 0.308676345;
    --delay: 0.5332479649;
  }
  .startails > div:nth-of-type(118) {
    --x: 0.7450045682;
    --y: 0.3364502706;
    --x2: -0.4307078155;
    --y2: -0.3879408412;
    --delay: 0.9775563438;
  }
  .startails > div:nth-of-type(119) {
    --x: 0.0303265243;
    --y: 0.0677623345;
    --x2: 0.0951609084;
    --y2: -0.1129087312;
    --delay: 0.9749211086;
  }
  .startails > div:nth-of-type(120) {
    --x: 0.6020235009;
    --y: 0.6494636164;
    --x2: 0.2020524218;
    --y2: 0.0786458859;
    --delay: 0.7144468508;
  }
  .startails > div:nth-of-type(121) {
    --x: 0.7649100582;
    --y: 0.5758309559;
    --x2: -0.1489602284;
    --y2: -0.1341529381;
    --delay: 0.4837353824;
  }
  .startails > div:nth-of-type(122) {
    --x: 0.4730065213;
    --y: 0.0978450426;
    --x2: -0.0846295309;
    --y2: 0.2650439369;
    --delay: 0.5801093863;
  }
  .startails > div:nth-of-type(123) {
    --x: 0.3489641757;
    --y: 0.8435687948;
    --x2: 0.248641633;
    --y2: 0.0379526475;
    --delay: 0.8611822028;
  }
  .startails > div:nth-of-type(124) {
    --x: 0.9657762314;
    --y: 0.9409403352;
    --x2: -0.3867434137;
    --y2: -0.1816615176;
    --delay: 0.9197291913;
  }
  .startails > div:nth-of-type(125) {
    --x: 0.5112195112;
    --y: 0.3575675145;
    --x2: 0.094183237;
    --y2: 0.3163292498;
    --delay: 0.6933996647;
  }
  .startails > div:nth-of-type(126) {
    --x: 0.3371673986;
    --y: 0.4326649476;
    --x2: -0.3737661101;
    --y2: -0.1524999413;
    --delay: 0.4141211597;
  }
  .startails > div:nth-of-type(127) {
    --x: 0.1780470206;
    --y: 0.5964445286;
    --x2: 0.1639015809;
    --y2: 0.3436287524;
    --delay: 0.3761103294;
  }
  .startails > div:nth-of-type(128) {
    --x: 0.9110654439;
    --y: 0.5439612976;
    --x2: -0.0241126885;
    --y2: -0.1597514574;
    --delay: 0.6495757739;
  }
  .startails > div:nth-of-type(129) {
    --x: 0.2542356633;
    --y: 0.5831132176;
    --x2: 0.0974760412;
    --y2: -0.1142575222;
    --delay: 0.9595512224;
  }
  .startails > div:nth-of-type(130) {
    --x: 0.5187943899;
    --y: 0.2263854357;
    --x2: 0.0374940879;
    --y2: -0.1681188473;
    --delay: 0.9903630171;
  }
  .startails > div:nth-of-type(131) {
    --x: 0.101207981;
    --y: 0.5886804532;
    --x2: -0.3826218167;
    --y2: -0.4044058841;
    --delay: 0.6674184411;
  }
  .startails > div:nth-of-type(132) {
    --x: 0.1701517063;
    --y: 0.1873537248;
    --x2: -0.482117414;
    --y2: 0.0809923112;
    --delay: 0.7754179643;
  }
  .startails > div:nth-of-type(133) {
    --x: 0.2367129254;
    --y: 0.5070923997;
    --x2: -0.2264405511;
    --y2: -0.4210835901;
    --delay: 0.4722093543;
  }
  .startails > div:nth-of-type(134) {
    --x: 0.2918907504;
    --y: 0.0901580244;
    --x2: 0.074900008;
    --y2: 0.1809008319;
    --delay: 0.9059358661;
  }
  .startails > div:nth-of-type(135) {
    --x: 0.8837126359;
    --y: 0.9270988467;
    --x2: -0.2252751248;
    --y2: -0.0754231337;
    --delay: 0.4954011265;
  }
  .startails > div:nth-of-type(136) {
    --x: 0.0965928833;
    --y: 0.7992814794;
    --x2: -0.0459133833;
    --y2: 0.2799810763;
    --delay: 0.6369618255;
  }
  .startails > div:nth-of-type(137) {
    --x: 0.4996936246;
    --y: 0.2636081562;
    --x2: -0.132606222;
    --y2: 0.0286100629;
    --delay: 0.3743297488;
  }
  .startails > div:nth-of-type(138) {
    --x: 0.1437845629;
    --y: 0.243216978;
    --x2: -0.2037531951;
    --y2: 0.496989434;
    --delay: 0.66443254;
  }
  .startails > div:nth-of-type(139) {
    --x: 0.281043597;
    --y: 0.0526500775;
    --x2: 0.1532825146;
    --y2: -0.4677451094;
    --delay: 0.9400849789;
  }
  .startails > div:nth-of-type(140) {
    --x: 0.7465726641;
    --y: 0.7047769835;
    --x2: -0.368624548;
    --y2: 0.0686213991;
    --delay: 0.6881080866;
  }
  .startails > div:nth-of-type(141) {
    --x: 0.0575852101;
    --y: 0.3753857748;
    --x2: 0.4794610236;
    --y2: -0.3629017203;
    --delay: 0.1256523102;
  }
  .startails > div:nth-of-type(142) {
    --x: 0.6036906806;
    --y: 0.1180367498;
    --x2: -0.3471718265;
    --y2: 0.1437537213;
    --delay: 0.9392103495;
  }
  .startails > div:nth-of-type(143) {
    --x: 0.8940147415;
    --y: 0.7270874324;
    --x2: 0.2041363617;
    --y2: 0.1214284382;
    --delay: 0.5819511114;
  }
  .startails > div:nth-of-type(144) {
    --x: 0.6663171755;
    --y: 0.5648866136;
    --x2: -0.4866306515;
    --y2: 0.240109823;
    --delay: 0.9501853106;
  }
  .startails > div:nth-of-type(145) {
    --x: 0.4761561118;
    --y: 0.6599593457;
    --x2: 0.1005127768;
    --y2: -0.0083764435;
    --delay: 0.067104573;
  }
  .startails > div:nth-of-type(146) {
    --x: 0.0030964572;
    --y: 0.6369205182;
    --x2: -0.4925109585;
    --y2: -0.0122410216;
    --delay: 0.9908633831;
  }
  .startails > div:nth-of-type(147) {
    --x: 0.5599288947;
    --y: 0.4981939248;
    --x2: 0.2392512923;
    --y2: 0.0899391573;
    --delay: 0.2608006489;
  }
  .startails > div:nth-of-type(148) {
    --x: 0.7790142049;
    --y: 0.3378201275;
    --x2: -0.1412110576;
    --y2: -0.199763506;
    --delay: 0.9238626936;
  }
  .startails > div:nth-of-type(149) {
    --x: 0.4340557857;
    --y: 0.2450058721;
    --x2: -0.3718486496;
    --y2: -0.0250668042;
    --delay: 0.0453344969;
  }
  .startails > div:nth-of-type(150) {
    --x: 0.5163875782;
    --y: 0.6826386939;
    --x2: -0.121442045;
    --y2: 0.0795069162;
    --delay: 0.8443351;
  }
  .startails > div:nth-of-type(151) {
    --x: 0.1713159329;
    --y: 0.4360161621;
    --x2: 0.4178807357;
    --y2: -0.1717120626;
    --delay: 0.2817026334;
  }
  .startails > div:nth-of-type(152) {
    --x: 0.6175040094;
    --y: 0.2609521781;
    --x2: 0.1336140032;
    --y2: -0.2431942666;
    --delay: 0.4275863836;
  }
  .startails > div:nth-of-type(153) {
    --x: 0.4819382974;
    --y: 0.8288322112;
    --x2: -0.4113282291;
    --y2: -0.2456857546;
    --delay: 0.7813850192;
  }
  .startails > div:nth-of-type(154) {
    --x: 0.8774366836;
    --y: 0.6041373568;
    --x2: -0.3668299503;
    --y2: -0.1017927093;
    --delay: 0.6572223827;
  }
  .startails > div:nth-of-type(155) {
    --x: 0.7842034034;
    --y: 0.8870966763;
    --x2: 0.0567199762;
    --y2: -0.302117661;
    --delay: 0.0513490071;
  }
  .startails > div:nth-of-type(156) {
    --x: 0.0495360322;
    --y: 0.7815581896;
    --x2: 0.2217217071;
    --y2: 0.2847815418;
    --delay: 0.2848855522;
  }
  .startails > div:nth-of-type(157) {
    --x: 0.9695827408;
    --y: 0.2760787381;
    --x2: -0.2515501375;
    --y2: -0.4717740426;
    --delay: 0.2011158522;
  }
  .startails > div:nth-of-type(158) {
    --x: 0.0496785063;
    --y: 0.2928821216;
    --x2: 0.3651650675;
    --y2: 0.3453474417;
    --delay: 0.8858370668;
  }
  .startails > div:nth-of-type(159) {
    --x: 0.324193576;
    --y: 0.2059011774;
    --x2: -0.2813175536;
    --y2: -0.1482542338;
    --delay: 0.3962926904;
  }
  .startails > div:nth-of-type(160) {
    --x: 0.3394441906;
    --y: 0.4778697203;
    --x2: 0.3735848605;
    --y2: 0.0094007438;
    --delay: 0.167188819;
  }
  .startails > div:nth-of-type(161) {
    --x: 0.2006991609;
    --y: 0.0777382798;
    --x2: 0.4183268303;
    --y2: 0.1323105512;
    --delay: 0.238281425;
  }
  .startails > div:nth-of-type(162) {
    --x: 0.2332808074;
    --y: 0.5655246544;
    --x2: 0.3785218352;
    --y2: -0.4928706354;
    --delay: 0.3872836242;
  }
  .startails > div:nth-of-type(163) {
    --x: 0.3238927205;
    --y: 0.2426936045;
    --x2: -0.206968289;
    --y2: -0.0400774476;
    --delay: 0.9387358198;
  }
  .startails > div:nth-of-type(164) {
    --x: 0.6823279498;
    --y: 0.4131782371;
    --x2: -0.1838133821;
    --y2: 0.2888644863;
    --delay: 0.6207482852;
  }
  .startails > div:nth-of-type(165) {
    --x: 0.5564922457;
    --y: 0.8107263996;
    --x2: 0.1614040028;
    --y2: -0.1074827897;
    --delay: 0.6941166504;
  }
  .startails > div:nth-of-type(166) {
    --x: 0.8459895789;
    --y: 0.4487630062;
    --x2: -0.1215467702;
    --y2: 0.0973026207;
    --delay: 0.5343909789;
  }
  .startails > div:nth-of-type(167) {
    --x: 0.4487088134;
    --y: 0.7476956946;
    --x2: -0.3257453585;
    --y2: -0.1442436237;
    --delay: 0.0337415334;
  }
  .startails > div:nth-of-type(168) {
    --x: 0.7587959047;
    --y: 0.5123346703;
    --x2: -0.004312128;
    --y2: 0.1542725985;
    --delay: 0.5558453015;
  }
  .startails > div:nth-of-type(169) {
    --x: 0.5555046175;
    --y: 0.9957311651;
    --x2: -0.3667034717;
    --y2: -0.364803911;
    --delay: 0.2693767866;
  }
  .startails > div:nth-of-type(170) {
    --x: 0.8135076161;
    --y: 0.4124296148;
    --x2: -0.4463563317;
    --y2: -0.3346616856;
    --delay: 0.998799544;
  }
  .startails > div:nth-of-type(171) {
    --x: 0.4381337486;
    --y: 0.0146897391;
    --x2: -0.2615187993;
    --y2: -0.3122451236;
    --delay: 0.1142942982;
  }
  .startails > div:nth-of-type(172) {
    --x: 0.266652031;
    --y: 0.4611046427;
    --x2: -0.3330732468;
    --y2: 0.3748264924;
    --delay: 0.7223973636;
  }
  .startails > div:nth-of-type(173) {
    --x: 0.5011712088;
    --y: 0.8609970887;
    --x2: 0.1214540914;
    --y2: -0.2383556359;
    --delay: 0.0453415916;
  }
  .startails > div:nth-of-type(174) {
    --x: 0.7801770034;
    --y: 0.7685618125;
    --x2: 0.0685415952;
    --y2: -0.1001527071;
    --delay: 0.3916310759;
  }
  .startails > div:nth-of-type(175) {
    --x: 0.1234857669;
    --y: 0.3561303641;
    --x2: -0.021937341;
    --y2: 0.1722084942;
    --delay: 0.9029796353;
  }
  .startails > div:nth-of-type(176) {
    --x: 0.5252394742;
    --y: 0.8174088151;
    --x2: -0.1281834803;
    --y2: -0.3021402672;
    --delay: 0.5269685888;
  }
  .startails > div:nth-of-type(177) {
    --x: 0.1739271224;
    --y: 0.0553791519;
    --x2: 0.0206025429;
    --y2: -0.0418946752;
    --delay: 0.6738244726;
  }
  .startails > div:nth-of-type(178) {
    --x: 0.040713256;
    --y: 0.2799206726;
    --x2: -0.0800145686;
    --y2: 0.4816145708;
    --delay: 0.4376746271;
  }
  .startails > div:nth-of-type(179) {
    --x: 0.2588192289;
    --y: 0.7398857651;
    --x2: -0.0718341383;
    --y2: -0.4105522902;
    --delay: 0.328679226;
  }
  .startails > div:nth-of-type(180) {
    --x: 0.8721607543;
    --y: 0.3451988036;
    --x2: 0.2318142933;
    --y2: 0.404841902;
    --delay: 0.7817023494;
  }
  .startails > div:nth-of-type(181) {
    --x: 0.678878649;
    --y: 0.6734035961;
    --x2: -0.4460001392;
    --y2: 0.2899961972;
    --delay: 0.1038408119;
  }
  .startails > div:nth-of-type(182) {
    --x: 0.982760536;
    --y: 0.5255542582;
    --x2: 0.4520023533;
    --y2: -0.2335316906;
    --delay: 0.6690559521;
  }
  .startails > div:nth-of-type(183) {
    --x: 0.6400071155;
    --y: 0.5189644615;
    --x2: -0.0547560048;
    --y2: 0.3763171534;
    --delay: 0.9510452016;
  }
  .startails > div:nth-of-type(184) {
    --x: 0.9526800797;
    --y: 0.1256721395;
    --x2: 0.1018252717;
    --y2: 0.3162705203;
    --delay: 0.969270551;
  }
  .startails > div:nth-of-type(185) {
    --x: 0.9363475001;
    --y: 0.2753551182;
    --x2: 0.0361128007;
    --y2: 0.1338472874;
    --delay: 0.9362044059;
  }
  .startails > div:nth-of-type(186) {
    --x: 0.956612432;
    --y: 0.0126251161;
    --x2: -0.3760342708;
    --y2: -0.0199437857;
    --delay: 0.0249104962;
  }
  .startails > div:nth-of-type(187) {
    --x: 0.0811620777;
    --y: 0.2455848678;
    --x2: -0.2078659084;
    --y2: -0.0285164059;
    --delay: 0.5412774947;
  }
  .startails > div:nth-of-type(188) {
    --x: 0.9198966257;
    --y: 0.6484793076;
    --x2: 0.0637667017;
    --y2: -0.0786183637;
    --delay: 0.1426445092;
  }
  .startails > div:nth-of-type(189) {
    --x: 0.8037886608;
    --y: 0.3156892154;
    --x2: -0.05301822;
    --y2: -0.3058065087;
    --delay: 0.7594775566;
  }
  .startails > div:nth-of-type(190) {
    --x: 0.1969056347;
    --y: 0.1644396447;
    --x2: 0.472201449;
    --y2: 0.4180150851;
    --delay: 0.219696423;
  }
  .startails > div:nth-of-type(191) {
    --x: 0.4947759862;
    --y: 0.2623465389;
    --x2: 0.2309095294;
    --y2: 0.0626036414;
    --delay: 0.89770434;
  }
  .startails > div:nth-of-type(192) {
    --x: 0.6990953891;
    --y: 0.4824740375;
    --x2: -0.0959009314;
    --y2: -0.2149496879;
    --delay: 0.6688761137;
  }
  .startails > div:nth-of-type(193) {
    --x: 0.9518747491;
    --y: 0.7200696051;
    --x2: -0.1862591376;
    --y2: 0.3871623329;
    --delay: 0.4497723283;
  }
  .startails > div:nth-of-type(194) {
    --x: 0.1440012932;
    --y: 0.1300211039;
    --x2: 0.4113726527;
    --y2: 0.1769741053;
    --delay: 0.4974439421;
  }
  .startails > div:nth-of-type(195) {
    --x: 0.2729380286;
    --y: 0.6393280618;
    --x2: 0.217030921;
    --y2: 0.4069032651;
    --delay: 0.8326368977;
  }
  .startails > div:nth-of-type(196) {
    --x: 0.1391412416;
    --y: 0.5324672596;
    --x2: -0.2934247706;
    --y2: 0.239468933;
    --delay: 0.1918313171;
  }
  .startails > div:nth-of-type(197) {
    --x: 0.3803144978;
    --y: 0.7526086724;
    --x2: 0.2806628226;
    --y2: -0.4902043315;
    --delay: 0.545659698;
  }
  .startails > div:nth-of-type(198) {
    --x: 0.3532383439;
    --y: 0.5559472141;
    --x2: 0.0537285032;
    --y2: -0.3479788129;
    --delay: 0.2508512638;
  }
  .startails > div:nth-of-type(199) {
    --x: 0.7268779301;
    --y: 0.4255022142;
    --x2: -0.4542012376;
    --y2: -0.384475538;
    --delay: 0.5962210203;
  }
  .startails > div:nth-of-type(200) {
    --x: 0.9183377695;
    --y: 0.9218593067;
    --x2: 0.0245764883;
    --y2: 0.4971992462;
    --delay: 0.515806912;
  }
  .startails > div:nth-of-type(201) {
    --x: 0.133622222;
    --y: 0.5037906137;
    --x2: 0.3320442996;
    --y2: 0.483835063;
    --delay: 0.9465530946;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .planets,
.planets-2 {
    position: absolute;
    inset: 0;
  }
  .planets > div,
.planets-2 > div {
    --distance: 20vmax;
    border-radius: 50%;
    width: 1.6vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 70% 50%, #bbbaba, #888586 38%, #121415 52%, #131617 60%, transparent 82%);
    opacity: 0.5;
    filter: blur(0.1rem);
    translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
  }
  .planets > div:nth-of-type(1),
.planets-2 > div:nth-of-type(1) {
    --x: 0.6684291637;
    --y: 0.7079752623;
    --x2: 0.1501676703;
    --y2: 0.106880609;
    --delay: 0.854529608;
  }
  .planets > div:nth-of-type(2),
.planets-2 > div:nth-of-type(2) {
    --x: 0.4529204549;
    --y: 0.2007942077;
    --x2: -0.1949247054;
    --y2: 0.3529836718;
    --delay: 0.0576412205;
  }
  .planets > div:nth-of-type(3),
.planets-2 > div:nth-of-type(3) {
    --x: 0.5873306158;
    --y: 0.843699043;
    --x2: -0.1401128631;
    --y2: 0.3790393373;
    --delay: 0.9483623877;
  }
  .planets > div:nth-of-type(4),
.planets-2 > div:nth-of-type(4) {
    --x: 0.657300841;
    --y: 0.7721317311;
    --x2: 0.147448633;
    --y2: -0.1299702829;
    --delay: 0.7576753176;
  }
  .planets > div:nth-of-type(5),
.planets-2 > div:nth-of-type(5) {
    --x: 0.4909289245;
    --y: 0.1411012077;
    --x2: -0.0265644637;
    --y2: 0.2827701072;
    --delay: 0.4459039883;
  }
  .planets > div:nth-of-type(6),
.planets-2 > div:nth-of-type(6) {
    --x: 0.3217316164;
    --y: 0.1763763243;
    --x2: 0.2322225291;
    --y2: -0.0108199215;
    --delay: 0.3906477253;
  }
  .planets > div:nth-of-type(7),
.planets-2 > div:nth-of-type(7) {
    --x: 0.0025145798;
    --y: 0.9186540594;
    --x2: 0.0041965743;
    --y2: 0.081799745;
    --delay: 0.0934201488;
  }
  .planets > div:nth-of-type(8),
.planets-2 > div:nth-of-type(8) {
    --x: 0.0906685539;
    --y: 0.617558744;
    --x2: 0.4318883902;
    --y2: -0.1223377258;
    --delay: 0.6452568416;
  }
  .planets > div:nth-of-type(9),
.planets-2 > div:nth-of-type(9) {
    --x: 0.7819295924;
    --y: 0.2285110417;
    --x2: -0.2824902805;
    --y2: -0.248267376;
    --delay: 0.3282270598;
  }
  .planets > div:nth-of-type(10),
.planets-2 > div:nth-of-type(10) {
    --x: 0.9223923256;
    --y: 0.8129544411;
    --x2: -0.1374585177;
    --y2: -0.1036468848;
    --delay: 0.0996054564;
  }
  .planets > div:nth-of-type(11),
.planets-2 > div:nth-of-type(11) {
    --x: 0.8395512565;
    --y: 0.1919317293;
    --x2: 0.1914438413;
    --y2: 0.2604663682;
    --delay: 0.4095748791;
  }
  .planets > div:nth-of-type(12),
.planets-2 > div:nth-of-type(12) {
    --x: 0.1530959523;
    --y: 0.0425537732;
    --x2: 0.4220562884;
    --y2: 0.3418954841;
    --delay: 0.0659613812;
  }
  .planets > div:nth-of-type(13),
.planets-2 > div:nth-of-type(13) {
    --x: 0.7888209155;
    --y: 0.0742378597;
    --x2: -0.1979822406;
    --y2: -0.4131248852;
    --delay: 0.9105320808;
  }
  .planets > div:nth-of-type(14),
.planets-2 > div:nth-of-type(14) {
    --x: 0.0413736102;
    --y: 0.3814340851;
    --x2: 0.0477270964;
    --y2: 0.3339540031;
    --delay: 0.3337520418;
  }
  .planets > div:nth-of-type(15),
.planets-2 > div:nth-of-type(15) {
    --x: 0.4028218282;
    --y: 0.2134015241;
    --x2: 0.3868969319;
    --y2: 0.0469924629;
    --delay: 0.2115196405;
  }
  .planets > div:nth-of-type(16),
.planets-2 > div:nth-of-type(16) {
    --x: 0.5014842948;
    --y: 0.4322482991;
    --x2: 0.0735022407;
    --y2: 0.4709228849;
    --delay: 0.673282482;
  }
  .planets > div:nth-of-type(17),
.planets-2 > div:nth-of-type(17) {
    --x: 0.6505589847;
    --y: 0.3505890237;
    --x2: -0.3123884428;
    --y2: 0.4645382907;
    --delay: 0.6172205624;
  }
  .planets > div:nth-of-type(18),
.planets-2 > div:nth-of-type(18) {
    --x: 0.887844671;
    --y: 0.2388448512;
    --x2: 0.1816276834;
    --y2: -0.2589986702;
    --delay: 0.0791299974;
  }
  .planets > div:nth-of-type(19),
.planets-2 > div:nth-of-type(19) {
    --x: 0.0957894749;
    --y: 0.1862793686;
    --x2: 0.2251878449;
    --y2: -0.1850148706;
    --delay: 0.0484237547;
  }
  .planets > div:nth-of-type(20),
.planets-2 > div:nth-of-type(20) {
    --x: 0.9459731843;
    --y: 0.997550002;
    --x2: 0.1880236554;
    --y2: 0.2644215286;
    --delay: 0.8728108019;
  }
  .planets > div:nth-of-type(21),
.planets-2 > div:nth-of-type(21) {
    --x: 0.1908748909;
    --y: 0.6597650179;
    --x2: -0.264075918;
    --y2: -0.017276891;
    --delay: 0.2362045625;
  }
  .planets > div:nth-of-type(22),
.planets-2 > div:nth-of-type(22) {
    --x: 0.5197998839;
    --y: 0.1739969802;
    --x2: -0.052034276;
    --y2: -0.1595489937;
    --delay: 0.3224443751;
  }
  .planets > div:nth-of-type(23),
.planets-2 > div:nth-of-type(23) {
    --x: 0.3776797544;
    --y: 0.9735382397;
    --x2: 0.2272919583;
    --y2: 0.4688230432;
    --delay: 0.9809038309;
  }
  .planets > div:nth-of-type(24),
.planets-2 > div:nth-of-type(24) {
    --x: 0.0281792292;
    --y: 0.816019641;
    --x2: -0.0371227704;
    --y2: 0.398928678;
    --delay: 0.2707417617;
  }
  .planets > div:nth-of-type(25),
.planets-2 > div:nth-of-type(25) {
    --x: 0.0898212286;
    --y: 0.0657062916;
    --x2: -0.0574312846;
    --y2: 0.0128178461;
    --delay: 0.6626491973;
  }
  .planets > div:nth-of-type(26),
.planets-2 > div:nth-of-type(26) {
    --x: 0.6322276733;
    --y: 0.0032501304;
    --x2: 0.1879800638;
    --y2: -0.2648089468;
    --delay: 0.398658027;
  }
  .planets > div:nth-of-type(27),
.planets-2 > div:nth-of-type(27) {
    --x: 0.5717189595;
    --y: 0.4905815337;
    --x2: 0.4757669074;
    --y2: 0.2262004901;
    --delay: 0.9922022513;
  }
  .planets > div:nth-of-type(28),
.planets-2 > div:nth-of-type(28) {
    --x: 0.5740445115;
    --y: 0.9658712546;
    --x2: 0.3219409845;
    --y2: -0.2441704998;
    --delay: 0.6295820708;
  }
  .planets > div:nth-of-type(29),
.planets-2 > div:nth-of-type(29) {
    --x: 0.089168475;
    --y: 0.3145793694;
    --x2: 0.2148420739;
    --y2: -0.3716206818;
    --delay: 0.3106721461;
  }
  .planets > div:nth-of-type(30),
.planets-2 > div:nth-of-type(30) {
    --x: 0.1211125397;
    --y: 0.2860810193;
    --x2: -0.3507602885;
    --y2: -0.2689101304;
    --delay: 0.6574916492;
  }
  .planets > div:nth-of-type(31),
.planets-2 > div:nth-of-type(31) {
    --x: 0.2576907601;
    --y: 0.4181345513;
    --x2: 0.4512870132;
    --y2: -0.125944164;
    --delay: 0.9473000014;
  }
  .planets > div:nth-of-type(32),
.planets-2 > div:nth-of-type(32) {
    --x: 0.961998686;
    --y: 0.023847837;
    --x2: 0.0169019047;
    --y2: 0.0839678515;
    --delay: 0.4752006364;
  }
  .planets > div:nth-of-type(33),
.planets-2 > div:nth-of-type(33) {
    --x: 0.261555039;
    --y: 0.6451619009;
    --x2: -0.0017015225;
    --y2: -0.0841033828;
    --delay: 0.7948077761;
  }
  .planets > div:nth-of-type(34),
.planets-2 > div:nth-of-type(34) {
    --x: 0.010033249;
    --y: 0.0015043701;
    --x2: -0.2295138502;
    --y2: 0.2982614678;
    --delay: 0.8241714666;
  }
  .planets > div:nth-of-type(35),
.planets-2 > div:nth-of-type(35) {
    --x: 0.9310040459;
    --y: 0.879404794;
    --x2: -0.3849477684;
    --y2: 0.3100586176;
    --delay: 0.0018898036;
  }
  .planets > div:nth-of-type(36),
.planets-2 > div:nth-of-type(36) {
    --x: 0.7515867948;
    --y: 0.9741301222;
    --x2: -0.0474743494;
    --y2: -0.2386399767;
    --delay: 0.3696198984;
  }
  .planets > div:nth-of-type(37),
.planets-2 > div:nth-of-type(37) {
    --x: 0.8119761816;
    --y: 0.4669350115;
    --x2: -0.4589758279;
    --y2: 0.319039306;
    --delay: 0.1516321888;
  }
  .planets > div:nth-of-type(38),
.planets-2 > div:nth-of-type(38) {
    --x: 0.5076980234;
    --y: 0.4691172473;
    --x2: -0.1040074095;
    --y2: -0.2690788329;
    --delay: 0.9283526782;
  }
  .planets > div:nth-of-type(39),
.planets-2 > div:nth-of-type(39) {
    --x: 0.1304416615;
    --y: 0.1184654197;
    --x2: -0.1143617194;
    --y2: 0.3566196745;
    --delay: 0.1607351978;
  }
  .planets > div:nth-of-type(40),
.planets-2 > div:nth-of-type(40) {
    --x: 0.2602366119;
    --y: 0.5465251553;
    --x2: -0.3694585673;
    --y2: -0.3506384692;
    --delay: 0.8034893031;
  }
  .planets > div:nth-of-type(41),
.planets-2 > div:nth-of-type(41) {
    --x: 0.3093842066;
    --y: 0.8779825427;
    --x2: -0.4344064299;
    --y2: -0.2019054013;
    --delay: 0.7603698513;
  }
  .planets > div:nth-of-type(42),
.planets-2 > div:nth-of-type(42) {
    --x: 0.6724460848;
    --y: 0.2714709074;
    --x2: -0.22468368;
    --y2: -0.4720536451;
    --delay: 0.4214825829;
  }
  .planets > div:nth-of-type(43),
.planets-2 > div:nth-of-type(43) {
    --x: 0.3927394502;
    --y: 0.6358129657;
    --x2: 0.2781605727;
    --y2: 0.4737227693;
    --delay: 0.9738754962;
  }
  .planets > div:nth-of-type(44),
.planets-2 > div:nth-of-type(44) {
    --x: 0.6653376388;
    --y: 0.9138187947;
    --x2: 0.3013897606;
    --y2: 0.1937599877;
    --delay: 0.0182021223;
  }
  .planets > div:nth-of-type(45),
.planets-2 > div:nth-of-type(45) {
    --x: 0.611905803;
    --y: 0.2236997588;
    --x2: -0.28670018;
    --y2: -0.0118213356;
    --delay: 0.5624834027;
  }
  .planets > div:nth-of-type(46),
.planets-2 > div:nth-of-type(46) {
    --x: 0.5470684629;
    --y: 0.8612169257;
    --x2: -0.0976570591;
    --y2: -0.4087293531;
    --delay: 0.1055695315;
  }
  .planets > div:nth-of-type(47),
.planets-2 > div:nth-of-type(47) {
    --x: 0.3504296991;
    --y: 0.325543538;
    --x2: 0.1912451657;
    --y2: -0.3994789151;
    --delay: 0.7174594546;
  }
  .planets > div:nth-of-type(48),
.planets-2 > div:nth-of-type(48) {
    --x: 0.5273206781;
    --y: 0.7565428634;
    --x2: -0.3087783495;
    --y2: -0.3561132494;
    --delay: 0.4488708465;
  }
  .planets > div:nth-of-type(49),
.planets-2 > div:nth-of-type(49) {
    --x: 0.934322819;
    --y: 0.6840346112;
    --x2: -0.0227343765;
    --y2: 0.1967441325;
    --delay: 0.6446712527;
  }
  .planets > div:nth-of-type(50),
.planets-2 > div:nth-of-type(50) {
    --x: 0.2447679618;
    --y: 0.2116992423;
    --x2: -0.4333171726;
    --y2: 0.2620442976;
    --delay: 0.5994698161;
  }
  .planets > div:nth-of-type(51),
.planets-2 > div:nth-of-type(51) {
    --x: 0.13059628;
    --y: 0.187938444;
    --x2: -0.2103169731;
    --y2: 0.3859296557;
    --delay: 0.8176489443;
  }

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