html,body{
  margin:0;padding:0;height:100%;overflow:hidden;background:#05040a;color:white;
  touch-action:none;user-select:none;-webkit-user-select:none;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
#wrap{
  position:fixed;inset:0;display:grid;place-items:center;
  padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
  box-sizing:border-box;
  background:
    radial-gradient(circle at 50% 18%,rgba(196,86,255,.24),transparent 30%),
    radial-gradient(circle at 12% 76%,rgba(83,255,54,.08),transparent 30%),
    linear-gradient(#07050e,#120b24 50%,#05040a);
}
canvas{
  display:block;
  max-width:calc(100vw - 14px);
  max-height:calc(100svh - 14px);
  image-rendering:pixelated;image-rendering:crisp-edges;
  box-shadow:0 0 28px rgba(196,86,255,.35),0 0 0 1px rgba(255,255,255,.08);
}
#tip{
  position:fixed;left:0;right:0;top:max(3px,env(safe-area-inset-top));
  text-align:center;font-size:10px;opacity:.42;pointer-events:none;text-shadow:0 2px 7px #000;
}
@media(max-height:520px){#tip{
  position:fixed;left:0;right:0;top:max(3px,env(safe-area-inset-top));
  text-align:center;font-size:10px;opacity:.42;pointer-events:none;text-shadow:0 2px 7px #000;
}}


  canvas{
  display:block;
  max-width:calc(100vw - 14px);
  max-height:calc(100svh - 14px);
  image-rendering:pixelated;image-rendering:crisp-edges;
  box-shadow:0 0 28px rgba(196,86,255,.35),0 0 0 1px rgba(255,255,255,.08);
}
}