:root { color-scheme: light; font-family: system-ui, sans-serif; background: #ffffff; color: #243f6b; }
body { margin: 0; overflow: hidden; }
#stage { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
/* Slint uses a transparent DOM input for the on-screen keyboard. */
#stage > input { font-size: 16px; }
#scene-status { flex: none; font-size: 14px; padding: 0 16px; margin: 8px 0; }
#canvas { display: block; flex: 1 1 0; width: 420px; max-width: 100%; height: 0; min-height: 0; outline-offset: -3px; }
@media (max-width: 760px) {
  #canvas { width: 100%; }
}

#scene-status:empty { display: none; }