/* The ClearGrow controller demo's page (sim/web). No inline styles, so a page's CSP needs no
   'unsafe-inline' for it. */
.cg-demo { box-sizing: border-box; max-width: 100%; margin: 0 auto; text-align: center; }
.cg-demo-label { display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 10px;
  background: #fff3cd; color: #5c4400; font: 600 13px/1.6 system-ui, sans-serif; }
.cg-demo canvas { display: block; margin: 0 auto; background: #f6f6f8; border-radius: 10px;
  width: min(100%, calc((100vh - 64px) * 1024 / 600)); aspect-ratio: 1024 / 600; height: auto;
  image-rendering: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.cg-demo canvas.cg-demo-up { image-rendering: pixelated; }
.cg-demo-start { font: 600 16px system-ui, sans-serif; padding: 10px 18px; border-radius: 8px;
  border: 0; background: #2f7d32; color: #fff; cursor: pointer; margin: 8px; }
.cg-demo-start[disabled] { opacity: 0.6; cursor: default; }