html {
  --startup-loader-bg-top: #f5f8fc;
  --startup-loader-bg-bottom: #e9eef5;
  --startup-loader-orb-a: rgba(255, 255, 255, 0.78);
  --startup-loader-orb-b: rgba(162, 187, 227, 0.28);
  --startup-loader-glass-top: rgba(255, 255, 255, 0.26);
  --startup-loader-glass-bottom: rgba(255, 255, 255, 0.08);
  --startup-loader-glass-stroke: rgba(255, 255, 255, 0.36);
  --startup-loader-glass-shadow: rgba(148, 163, 184, 0.22);
  --startup-loader-ball-fill: #5b8df4;
  --startup-loader-ball-line: #163f96;
  --startup-loader-ball-shine-1: #f7fbff;
  --startup-loader-ball-shine-2: #edf5ff;
  --startup-loader-ball-shine-3: #deebff;
  --startup-loader-ball-shine-4: #c0d6ff;
  --startup-loader-ball-shine-5: #97bafc;
  --startup-loader-ball-shine-6: #6f9aee;
  --startup-loader-ball-shine-7: #4d7cd0;
  --startup-loader-ball-shine-8: #2e59a8;
  --startup-loader-ball-shadow-1: #4f79d3;
  --startup-loader-ball-shadow-2: #17377d;
  --startup-loader-ball-shadow-3: #081227;
  --startup-loader-net-top: #fbfdff;
  --startup-loader-net-mid: #d8e6fa;
  --startup-loader-net-bottom: #93abd0;
  --startup-loader-rim-main: #2f6ee6;
  --startup-loader-rim-mid: #77abff;
  --startup-loader-rim-highlight: #e4efff;
  --startup-loader-net-shadow: rgba(49, 76, 124, 0.18);
  --startup-loader-rim-shadow: rgba(47, 110, 230, 0.28);
  --startup-loader-ball-shadow: rgba(21, 55, 125, 0.24);
}

html.loader-dark {
  --startup-loader-bg-top: #090c12;
  --startup-loader-bg-bottom: #141a23;
  --startup-loader-orb-a: rgba(92, 113, 153, 0.18);
  --startup-loader-orb-b: rgba(255, 255, 255, 0.06);
  --startup-loader-glass-top: rgba(255, 255, 255, 0.07);
  --startup-loader-glass-bottom: rgba(255, 255, 255, 0.02);
  --startup-loader-glass-stroke: rgba(255, 255, 255, 0.1);
  --startup-loader-glass-shadow: rgba(0, 0, 0, 0.3);
  --startup-loader-ball-fill: #da4747;
  --startup-loader-ball-line: #5d0d14;
  --startup-loader-ball-shine-1: #fff4f4;
  --startup-loader-ball-shine-2: #ffe5e6;
  --startup-loader-ball-shine-3: #ffd3d4;
  --startup-loader-ball-shine-4: #f6b3b6;
  --startup-loader-ball-shine-5: #ea8a8e;
  --startup-loader-ball-shine-6: #d65f67;
  --startup-loader-ball-shine-7: #ad3744;
  --startup-loader-ball-shine-8: #6f1420;
  --startup-loader-ball-shadow-1: #bb2634;
  --startup-loader-ball-shadow-2: #521018;
  --startup-loader-ball-shadow-3: #170205;
  --startup-loader-net-top: #fff8f8;
  --startup-loader-net-mid: #d7c2c6;
  --startup-loader-net-bottom: #9a7b82;
  --startup-loader-rim-main: #cc2434;
  --startup-loader-rim-mid: #ff5c69;
  --startup-loader-rim-highlight: #ffd9dd;
  --startup-loader-net-shadow: rgba(83, 24, 33, 0.22);
  --startup-loader-rim-shadow: rgba(204, 36, 52, 0.28);
  --startup-loader-ball-shadow: rgba(93, 13, 20, 0.28);
}

body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 18%, var(--startup-loader-orb-a) 0, transparent 28%),
    radial-gradient(circle at 82% 12%, var(--startup-loader-orb-b) 0, transparent 26%),
    linear-gradient(145deg, var(--startup-loader-bg-top), var(--startup-loader-bg-bottom));
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
  min-height: 80vh;
  visibility: hidden;
  shape-rendering: geometricPrecision;
  position: relative;
  z-index: 1;
}

#ball circle,
#ball .startPath,
#ringOuter circle {
  vector-effect: non-scaling-stroke;
}

#ball > circle {
  fill: var(--startup-loader-ball-fill);
  stroke: var(--startup-loader-ball-line);
}

#ball .startPath {
  stroke: var(--startup-loader-ball-line);
}

#ringOuter circle:nth-child(1) {
  stroke: var(--startup-loader-rim-main);
}

#ringOuter circle:nth-child(2) {
  stroke: var(--startup-loader-rim-mid);
}

#ringOuter circle:nth-child(3) {
  stroke: var(--startup-loader-rim-highlight);
}

#basketballGrad stop:nth-child(1) {
  stop-color: var(--startup-loader-net-top);
}

#basketballGrad stop:nth-child(2) {
  stop-color: var(--startup-loader-net-mid);
}

#basketballGrad stop:nth-child(3) {
  stop-color: var(--startup-loader-net-bottom);
}

#ballShineGrad stop:nth-child(2) {
  stop-color: var(--startup-loader-ball-shine-1);
}

#ballShineGrad stop:nth-child(3) {
  stop-color: var(--startup-loader-ball-shine-2);
}

#ballShineGrad stop:nth-child(4) {
  stop-color: var(--startup-loader-ball-shine-3);
}

#ballShineGrad stop:nth-child(5) {
  stop-color: var(--startup-loader-ball-shine-4);
}

#ballShineGrad stop:nth-child(6) {
  stop-color: var(--startup-loader-ball-shine-5);
}

#ballShineGrad stop:nth-child(7) {
  stop-color: var(--startup-loader-ball-shine-6);
}

#ballShineGrad stop:nth-child(8) {
  stop-color: var(--startup-loader-ball-shine-7);
}

#ballShineGrad stop:nth-child(9) {
  stop-color: var(--startup-loader-ball-shine-8);
}

#ballGrad1 stop:nth-child(1) {
  stop-color: var(--startup-loader-ball-shadow-1);
}

#ballGrad1 stop:nth-child(2) {
  stop-color: var(--startup-loader-ball-shadow-2);
}

#ballGrad1 stop:nth-child(3) {
  stop-color: var(--startup-loader-ball-shadow-3);
}

#ballGradShadow {
  opacity: 0.56;
}

#ballGradShine {
  opacity: 0.28;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

body::before {
  inset: -12%;
  z-index: 0;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.24) 0, transparent 30%),
    radial-gradient(circle at 72% 72%, rgba(255, 255, 255, 0.12) 0, transparent 26%);
  filter: blur(36px);
}

body::after {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(160deg, var(--startup-loader-glass-top), transparent 42%, var(--startup-loader-glass-bottom) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%);
  box-shadow:
    inset 0 1px 0 var(--startup-loader-glass-stroke),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 24px 64px var(--startup-loader-glass-shadow);
  backdrop-filter: blur(22px) saturate(118%);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
}

#net {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18))
    drop-shadow(0 2px 4px var(--startup-loader-net-shadow));
}

#ringOuter {
  filter:
    drop-shadow(0 2px 6px var(--startup-loader-rim-shadow))
    drop-shadow(0 0 14px color-mix(in srgb, var(--startup-loader-rim-main) 18%, transparent));
}

#ball {
  filter:
    drop-shadow(0 3px 8px var(--startup-loader-ball-shadow))
    drop-shadow(0 0 18px color-mix(in srgb, var(--startup-loader-ball-fill) 16%, transparent));
}