html,
body,
#root {
  touch-action: pan-x pan-y;
}

#initial-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d1117;
  z-index: 9999;
}

#initial-loader .ring-wrap {
  position: relative;
  width: 140px;
  height: 140px;
}

#initial-loader .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(88, 101, 242, 0.18);
  border-top-color: #5865F2;
  animation: initial-loader-spin 0.9s linear infinite;
  will-change: transform;
}

#initial-loader .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes initial-loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #initial-loader .ring { animation-duration: 2.4s; }
}