:root {
  color-scheme: dark;
  background: #07090d;
  color: #e7edf6;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
#reaktor-prototype,
.reaktor-canvas {
  width: 100%;
  min-width: 320px;
  height: 100%;
  min-height: 100%;
  margin: 0;
}

html,
body {
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(circle at 18% 12%, rgba(68, 117, 255, 0.12), transparent 32rem),
    radial-gradient(circle at 82% 88%, rgba(26, 210, 177, 0.08), transparent 34rem),
    #07090d;
}

#reaktor-prototype {
  position: relative;
  isolation: isolate;
}

.reaktor-canvas {
  position: absolute;
  inset: 0;
}

.reaktor-canvas > canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.reaktor-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 32px 32px;
}

.reaktor-loader__signal {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(115, 151, 255, 0.38);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(78, 126, 255, 0.28);
  animation: reaktor-signal 1.4s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
}

.reaktor-loader__copy {
  display: grid;
  gap: 0.25rem;
  color: #778294;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.reaktor-loader__copy strong {
  color: #dce6f5;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
}

@keyframes reaktor-signal {
  0% {
    transform: scale(0.72);
    opacity: 0.55;
    box-shadow: 0 0 0 0 rgba(78, 126, 255, 0.25);
  }
  70% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0.75rem rgba(78, 126, 255, 0);
  }
  100% {
    transform: scale(0.72);
    opacity: 0.55;
    box-shadow: 0 0 0 0 rgba(78, 126, 255, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reaktor-loader__signal {
    animation-duration: 3s;
  }
}