:root {
  --bg: #0e1726;
  --text: #e6efff;
  --track: #2a3443;
  --bar: #3b82f6;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}

#app {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#app > canvas {
  display: block;
  width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
  height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  touch-action: none;
}

.loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  z-index: 9999;
}

.title {
  font-size: clamp(22px, 4vw, 48px);
  font-weight: 800;
}
.track {
  width: min(600px, 70vw);
  height: 10px;
  background: var(--track);
  border-radius: 10px;
  overflow: hidden;
}
.bar {
  height: 100%;
  width: 0%;
  background: var(--bar);
  border-radius: 10px;
  transition: width 0.2s ease;
}
.file {
  font-size: 13px;
  opacity: 0.8;
}

.dots {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text);
  opacity: 0;
  animation: fade 1.4s infinite;
}
.dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes fade {
  0%,
  80%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}