*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { background: #ffffff; }
html, body { color: #0c1322; font-family: 'Inter', -apple-system, sans-serif; min-height: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; overscroll-behavior: none; }
body { background: #ffffff; }
#viewport-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 0;
  pointer-events: none;
  background: #ffffff;
}
#root { min-height: 100dvh; height: 100dvh; max-width: 430px; margin: 0 auto; position: relative; z-index: 1; overflow: hidden; background: transparent; }
#preloader {
  position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  padding: 32px 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(43, 108, 255, 0.10), transparent 34%),
    radial-gradient(circle at 80% 28%, rgba(92, 146, 255, 0.10), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  contain: layout paint style;
}
#preloader .preloader-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 400px);
  margin: 0 auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}
#preloader .preloader-logo-wrap,
#preloader .preloader-text-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-duration: 1100ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
#preloader .preloader-logo-wrap { animation-name: preLogoLeft; }
#preloader .preloader-text-wrap { animation-name: preLogoRight; animation-delay: 160ms; }
#preloader .preloader-logo {
  width: clamp(104px, 26vw, 138px);
  height: auto;
  display: block;
}
#preloader .preloader-text {
  width: clamp(156px, 36vw, 210px);
  height: auto;
  display: block;
}
#preloader .preloader-pulse {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
#preloader .preloader-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #76beff 0%, #2b6cff 100%);
  box-shadow: 0 0 0 1px rgba(43, 108, 255, 0.08);
  opacity: 0.24;
  transform: translate3d(0, 0, 0) scale(0.88);
  animation: prePulseDot 1.45s ease-in-out infinite;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
#preloader .preloader-pulse-dot:nth-child(2) {
  animation-delay: 0.16s;
}
#preloader .preloader-pulse-dot:nth-child(3) {
  animation-delay: 0.32s;
}
@keyframes preLogoLeft {
  0% { opacity: 0; transform: translate3d(-74px, 0, 0) scale(0.92); }
  70% { opacity: 1; transform: translate3d(8px, 0, 0) scale(1.02); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes preLogoRight {
  0% { opacity: 0; transform: translate3d(90px, 0, 0) scale(0.96); }
  70% { opacity: 1; transform: translate3d(-8px, 0, 0) scale(1.01); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes prePulseDot {
  0% { opacity: 0.24; transform: translate3d(0, 0, 0) scale(0.88); }
  35% { opacity: 1; transform: translate3d(0, -6px, 0) scale(1.02); }
  100% { opacity: 0.24; transform: translate3d(0, 0, 0) scale(0.88); }
}
#preloader.fade-out {
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
@media (max-width: 420px) {
  #preloader .preloader-brand { gap: 8px; }
  #preloader .preloader-logo { width: 92px; }
  #preloader .preloader-text { width: min(44vw, 182px); }
}