/* Shared page chrome for every GPUIX browser example. */

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #11111b; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }

#gpuix-loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fafafa;
  font: 14px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}
#gpuix-loader > div { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#gpuix-loader strong { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
#gpuix-loader span { color: #8b8b96; font-size: 13px; }
#gpuix-loader i {
  width: 18px;
  height: 18px;
  border: 2px solid #34343e;
  border-top-color: #fafafa;
  border-radius: 50%;
  animation: gpuix-spin 0.8s linear infinite;
}
@keyframes gpuix-spin { to { transform: rotate(360deg); } }

/* The app draws every glyph itself, so the browser must not treat the page as
   a document: a long press would otherwise select the whole body and pop the
   iOS callout, and a tap would flash the tap highlight over the full-screen
   canvas. GPUIX handles long press and selection in its own code. */
html, body, canvas {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* GPUI's hidden IME textarea still needs a real selection for composition,
   backspace context, and clipboard. */
[data-gpui-input] {
  -webkit-user-select: text !important;
  user-select: text !important;
}