html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  /* Matches the Avalonia dark theme SynBg so there is no colour jump between the HTML loader,
     the (briefly empty) canvas, and the app's first frame. */
  background: #14161C;
}

#out {
  height: 100vh;
}

/* Pre-boot loader: mimics the Avalonia connecting screen (title + rotating accent arc + muted
   status) so the WASM runtime download reads as "loading", not a black page. main.js fades it out
   the moment Avalonia paints its first content into #out. */
.app-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #14161C;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  opacity: 1;
  transition: opacity 0.35s ease;
  animation: app-loader-in 0.25s ease both;
}

.app-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes app-loader-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.app-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.app-loader__title {
  color: #E7E9EF;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.app-loader__status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-loader__spinner {
  width: 20px;
  height: 20px;
  animation: app-loader-spin 0.85s linear infinite;
  transform-origin: 50% 50%;
}

.app-loader__spinner circle {
  fill: none;
  stroke: #4C8DFF;
  stroke-width: 2.5;
  stroke-linecap: round;
  /* r=9 -> circumference ~56.5; ~44 draws a 280deg arc, matching the Avalonia Spinner. */
  stroke-dasharray: 44 100;
}

.app-loader__text {
  color: #8B92A4;
  font-size: 14px;
}

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

@media (prefers-reduced-motion: reduce) {
  .app-loader__spinner {
    animation-duration: 2s;
  }
}