/* The page around the app: the app fills it; until it starts, the page is the app's own night blue. */
html, body { margin: 0; padding: 0; height: 100%; background: #0C0E1A; overflow: hidden; }
#out { width: 100%; height: 100%; }

/* While it loads: the mark, a hairline that fills as the app comes down, and a quiet line under it. */
.ramah-loading { display: flex; flex-direction: column; height: 100%; align-items: center; justify-content: center; gap: 26px; }
.ramah-loading img { width: 72px; height: auto; opacity: 0.92; }
.ramah-progress { position: relative; width: 168px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ramah-progress i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, #7C4DFF, #4DD0E2); transition: width 0.25s ease-out; }
.ramah-progress-text { margin: -12px 0 0; font: 500 12.5px/1.4 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; letter-spacing: 0.02em; color: rgba(232, 230, 245, 0.55); font-variant-numeric: tabular-nums; }

/* Down, and starting: the bar is full and a light runs along it until the first screen is drawn. */
.ramah-loading.ramah-starting .ramah-progress i { width: 100%; }
.ramah-loading.ramah-starting .ramah-progress::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: ramah-sweep 1.1s ease-in-out infinite; }
@keyframes ramah-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  .ramah-progress i { transition: none; }
  .ramah-loading.ramah-starting .ramah-progress::after { animation: none; }
}

/* Avalonia marks the loading splash splash-close once the app is drawn. */
#avalonia-splash.splash-close { display: none; }