:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --bg: #07040f;
  --fg: #ede9fe;
  --muted: #8b7bb5;
  --land: #8b5cf6;
  --sea: #3b2a6b;
  --glow: 139, 92, 246;
  --s1: #140a30;
  --s2: #08041a;
  --star: 237, 226, 255;
}
html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  background:
    radial-gradient(
      ellipse 60% 40% at 18% 22%,
      rgba(139, 92, 246, 0.22),
      transparent 70%
    ),
    radial-gradient(
      ellipse 55% 45% at 82% 78%,
      rgba(109, 40, 217, 0.24),
      transparent 70%
    ),
    linear-gradient(
      118deg,
      transparent 33%,
      rgba(167, 139, 250, 0.1) 48%,
      rgba(192, 132, 252, 0.07) 54%,
      transparent 68%
    ),
    var(--bg);
  color: var(--fg);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  overflow: hidden;
}
canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
canvas:active {
  cursor: grabbing;
}
.ui {
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
  text-align: center;
}
.top {
  top: calc(env(safe-area-inset-top, 0px) + 22px);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
}
.tip {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 16px));
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(22, 10, 52, 0.9);
  border: 1px solid rgba(167, 139, 250, 0.55);
  color: #f1eaff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.12s;
}
.bot {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  font-size: 12px;
  color: var(--muted);
}