:root {
  color-scheme: light dark;
  --dx-canvas: #f3f5f9;
  --dx-text: #111f35;
  --dx-muted: #526078;
}

@media (prefers-color-scheme: dark) {
  :root {
    --dx-canvas: #0c1422;
    --dx-text: #e8eef8;
    --dx-muted: #c5d0e2;
  }
}

html, body {
  margin: 0;
  background: var(--dx-canvas);
}

.dx-startup {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  align-items: safe center;
  justify-items: center;
  overflow: auto;
  box-sizing: border-box;
  padding: 24px;
  background: var(--dx-canvas);
  color: var(--dx-text);
  font: 600 16px/1.5 "Segoe UI", system-ui, sans-serif;
  text-align: center;
}

.dx-startup-content { max-width: 380px; }
.dx-startup-mark {
  display: inline-block;
  width: 80px;
  height: 80px;
  animation: dx-loading-turn 2.4s linear infinite;
}
.dx-startup-mark img { display: block; width: 100%; height: 100%; }
.dx-startup p { margin: 18px 0 0; }
.dx-startup-detail { color: var(--dx-muted); font-size: 14px; font-weight: 400; }
.dx-startup button {
  margin-top: 20px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid #5279b4;
  border-radius: 12px;
  background: #2457c5;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.dx-startup button:hover { background: #1d48a5; }
.dx-startup button:focus-visible { outline: 3px solid #73a9ff; outline-offset: 4px; }
.dx-startup[data-failed="true"] .dx-startup-mark { animation: none; }
.dx-startup [hidden] { display: none; }

@keyframes dx-loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dx-startup-mark { animation: none; }
}