html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  background: #0e1b21;
  color: #e7f3f6;
  font:
    16px system-ui,
    sans-serif;
}
/* Native text fields remain selectable; the canvas HUD uses ImGui editing. */
input,
textarea,
[contenteditable]:not([contenteditable="false"]) {
  -webkit-user-select: text;
  user-select: text;
}
#canvas {
  display: block;
  position: fixed;
  left: var(--viewport-left, 0px);
  top: var(--viewport-top, 0px);
  width: var(--viewport-width, 100vw);
  height: var(--viewport-height, 100dvh);
  outline: none;
  -webkit-touch-callout: none;
}
#loading {
  position: fixed;
  left: var(--viewport-left, 0px);
  top: var(--viewport-top, 0px);
  width: var(--viewport-width, 100vw);
  height: var(--viewport-height, 100dvh);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 24px;
  background: radial-gradient(ellipse at center, #142b35, #0a141b 75%);
}
.loading-card {
  width: min(100%, 340px);
  text-align: center;
}
.loading-card h1 {
  margin: 0 0 28px;
  font-size: clamp(28px, 7vw, 42px);
  font-weight: 650;
  letter-spacing: -0.04em;
}
.loading-card h1 span {
  color: #65dcff;
}
.loading-track {
  height: 2px;
  overflow: hidden;
  background: #29404c;
}
.loading-track span {
  display: block;
  width: 40%;
  height: 100%;
  background: #65dcff;
  animation: loading-sweep 1.5s ease-in-out infinite;
}
#loading-status {
  margin: 18px 0 0;
  color: #a9bec9;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
#loading[data-state='error'] .loading-track {
  display: none;
}
#loading[data-state='error'] #loading-status {
  color: #f1c5b5;
}
@keyframes loading-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  .loading-track span {
    animation: none;
    width: 100%;
    opacity: 0.55;
  }
}
[hidden] {
  display: none !important;
}