@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&display=swap");

:root {
  --bg-deep: #050b12;
  --bg-mid: #091521;
  --bg-light: #0b1f2d;
  --glow: #5ce9ff;
  --accent: #f7d47a;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Chakra Petch", "Trebuchet MS", sans-serif;
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(92, 233, 255, 0.18), transparent 55%),
    radial-gradient(120% 120% at 50% 100%, rgba(247, 212, 122, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-light), var(--bg-mid) 45%, var(--bg-deep));
  overflow: hidden;
}

#renderCanvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}