:root {
  color-scheme: dark;
  background: #2c2c2e;
  font-family: system-ui, sans-serif;
}

html,
body,
#root,
.map-shell,
#map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #2c2c2e;
}

.immersive-pose-marker {
  position: absolute;
  width: 88px;
  height: 88px;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.pose-direction {
  position: absolute;
  inset: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: conic-gradient(
    from -24deg at 50% 50%,
    rgb(10 132 255 / 28%) 0deg,
    rgb(10 132 255 / 28%) 48deg,
    transparent 48deg,
    transparent 360deg
  );
}

.pose-dot {
  position: absolute;
  left: 32px;
  top: 32px;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 4px solid #fff;
  border-radius: 999px;
  background: #0a84ff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 35%);
}