:root{
  --size: 260px;
  --bg-1: #ffffff;
  --bg-2: #f5f5f5;

  --accent-1: #FEDB21;
  --accent-2: #FEDB21;
  --accent-3: #FEDB21;
  --accent-4: #FEDB21;

  --main-star-shadow: drop-shadow(0 13px 37.6px #5E5C9A1c);

  --orbit-stars-shadow: drop-shadow(0 13px 37.6px #5E5C9A1c);
}

html, body{
  margin: 0;
  padding: 0;
}

html.loading, body.loading {
  overflow: hidden;
}

#global-loader{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 100vw;
  height: 100vh;
}

.star-loader{
  width:var(--size);
  height:var(--size);
  position:relative;
  display:grid;
  place-items:center;
}

svg#icons{display:none}

.core-star{
  width:72px;
  height:72px;
  display:inline-block;
  transform-origin:center;
  animation: core-rotate 8s linear infinite, core-pulse 1.5s ease-in-out infinite, core-blink 2s ease-in-out infinite alternate;
  filter: var(--main-star-shadow);
  color: var(--accent-4);
}

.orbit{
  position:absolute;
  inset:0;
  transform-origin:50% 50%;
  border-radius:50%;
  pointer-events:none;
  display:block;
}

.orbit .star{
  position:absolute;
  left:50%;
  top:6%;
  transform: translateX(-50%);
  width:22px;
  height:22px;
  transform-origin:center;
  will-change:transform,opacity;
  animation: star-twinkle calc(1.6s + var(--i)*0.18s) ease-in-out infinite alternate,
            float calc(3s + var(--i)*0.25s) ease-in-out infinite;
  filter: var(--orbit-stars-shadow);
}

.orbit.r1{ transform: scale(0.62); animation: spin 8s linear infinite; }
.orbit.r2{ transform: scale(0.84); animation: spin 11s linear reverse infinite; }
.orbit.r3{ transform: scale(1.05); animation: spin 14s linear infinite; }
.orbit.r4{ transform: scale(1.26); animation: spin 20s linear reverse infinite; }

.orbit.r1 .star{ width:16px; height:16px }
.orbit.r2 .star{ width:20px; height:20px }
.orbit.r3 .star{ width:24px; height:24px }
.orbit.r4 .star{ width:28px; height:28px }

.c1{ color:var(--accent-1) }
.c2{ color:var(--accent-2) }
.c3{ color:var(--accent-3) }
.c4{ color:var(--accent-4) }

.star::after{
  content:"";
  position:absolute;
  right:-10px;
  top:50%;
  width:26px;
  height:2px;
  opacity:0.1;
  transform:translateY(-50%) rotate(6deg);
  background:linear-gradient(90deg, currentColor 0%, rgba(255,255,255,0) 100%);
  border-radius:2px;
  filter:blur(4px);
}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}

@keyframes spin{
  from{ transform: rotateZ(0deg) scale(1) }
  to{ transform: rotateZ(360deg) scale(1) }
}

@keyframes star-twinkle{
  0%{ opacity:0.35; transform: translateX(-50%) translateY(0) scale(0.9) }
  100%{ opacity:1; transform: translateX(-50%) translateY(-6px) scale(1.06) }
}

@keyframes float{
  0%{ transform: translateX(-50%) translateY(0) }
  50%{ transform: translateX(-50%) translateY(-6px) }
  100%{ transform: translateX(-50%) translateY(0) }
}

@keyframes core-rotate{
  from{ transform: rotate(0deg) }
  to{ transform: rotate(360deg) }
}

@keyframes core-pulse{
  0%{ transform: scale(1) }
  50%{ transform: scale(1.1) }
  100%{ transform: scale(1) }
}

@keyframes core-blink{
  0%{ opacity:0.35 }
  100%{ opacity:1 }
}

.halo{
  position:absolute;
  width:220px;height:220px;
  border-radius:50%;
  background: radial-gradient(circle at 40% 30%, rgba(255,209,102,0.12), rgba(125,231,200,0.06) 20%, transparent 40%);
  filter: blur(26px);
  z-index:-1;
  animation: halo-rotate 20s linear infinite;
}

@keyframes halo-rotate{
  from{ transform: rotate(0deg) }
  to{ transform: rotate(360deg) }
}

@media (max-width:420px){
  :root{ --size:200px }
  .core-star{ width:56px;height:56px }
}