.guided-mode .role-zone.rule-bed {
  border-color: #9fd0ff;
  background: rgba(111,174,255,.16);
  box-shadow: 0 0 22px rgba(111,174,255,.68), inset 0 0 18px rgba(111,174,255,.2);
}

.guided-mode .role-zone.rule-bed:before {
  content: "Sleep Wall";
  position: absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  color: #d8edff;
}

.guided-mode .role-zone.rule-lamp:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 96px;
  height: 96px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,218,112,.42), rgba(255,218,112,0) 68%);
}

.guided-mode .role-zone.rule-desk:before {
  content: "Face Light \2190";
  position: absolute;
  left: -54px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff7b2;
  text-shadow: 0 0 9px rgba(255,229,102,.85);
}

.guided-mode .role-zone.rule-dining {
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(255,255,255,.08), 0 0 22px rgba(73,255,95,.68);
}

.guided-mode .guided-gesture:before {
  content: "\261D";
  display: inline-block;
  margin-right: 8px;
  color: #ffd94f;
  font-size: 20px;
  vertical-align: -3px;
  animation: guidedHandDrag 1.05s ease-in-out infinite;
}

.guided-mode .guided-gesture:after {
  content: "";
  position: absolute;
  left: 50%;
  top: -34px;
  width: 88px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #8bff93);
  transform: translateX(-50%) rotate(-12deg);
  box-shadow: 0 0 10px rgba(118,255,140,.8);
}

@keyframes guidedHandDrag {
  0%, 100% { transform: translateX(-5px); }
  50% { transform: translateX(8px); }
}