* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #e8e8ea; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#app-root { display: flex; width: 100%; height: 100%; flex-direction: row; }
#canvas-wrap { flex: 1; min-width: 0; min-height: 0; position: relative; background: #f5f5f7; }
canvas#canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
/* Transparent input blocker with a centered spinner. Dimming the whole page
   flashes visibly when the engine brackets a short operation with Show/Hide
   (e.g. the constraint solve after a dimension edit), so the overlay itself
   stays invisible — the busy state reads from the spinner alone. */
#loading-overlay {
  position: fixed; inset: 0;
  background: transparent;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 900;
}
#loading-overlay.hidden { display: none; }
.loading-spinner {
  width: 40px; height: 40px;
  border: 4px solid rgba(0,0,0,0.12);
  border-top-color: #e05a2b;
  border-radius: 50%;
  animation: lc-spin 0.75s linear infinite;
}
@keyframes lc-spin { to { transform: rotate(360deg); } }
#loading-message {
  margin-top: 14px;
  color: #444;
  font-size: 14px;
  text-align: center;
  max-width: 240px;
  text-shadow: 0 0 4px #fff;
}