.hotspot {
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-50%);
  border:0;
  background:none;
  padding:0;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:9px;
  z-index:1;
}

.hotspot-label {
  white-space:nowrap;
  background:#fffffff5;
  border:1px solid #ffffff;
  border-radius:30px;
  padding:10px 24px;
  box-shadow:0 4px 20px #302e2c14;
  font-size:14px;
  line-height:1.3;
  color:#302e2c;
  transition:transform .15s,box-shadow .15s;
}

.hotspot-dot {
  width:20px;
  height:20px;
  background:#e56b54;
  border:5px solid white;
  border-radius:50%;
  box-shadow:0 0 0 4px #ffffff60;
}

.hotspot:hover .hotspot-label {
  transform:translateY(-3px);
  box-shadow:0 5px 24px #302e2c25;
}

.scene-controls {
  position:absolute;
  bottom:22px;
  left:4%;
  display:flex;
  align-items:center;
  gap:3px;
  z-index:3;
  background:#fffffff2;
  border:1px solid var(--line);
  border-radius:24px;
  padding:5px;
}

.scene-controls button {
  background:none;
  border:0;
  border-radius:20px;
  min-width:44px;
  min-height:44px;
  font-size:16px;
  padding:2px 10px;
}

.scene-controls button:hover {
  background:var(--tint);
}

.scene-controls span {
  font-size:11px;
  color:#786d65;
  padding:0 10px;
}