/* The scene draws the labels on the objects. These are keyboard targets. */
.hotspots.object-navigation .scene-hotspot{
  display:block;
  padding:0;
  border:0;
  border-radius:3px;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  transform:none;
  pointer-events:none;
  transition:none;
}
.hotspots.object-navigation .scene-hotspot>*{opacity:0}
.hotspots.object-navigation .scene-hotspot:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}
@media(forced-colors:active){
  .hotspots.object-navigation .scene-hotspot:focus-visible{outline-color:Highlight}
}

/* Small click markers track the objects without inheriting their perspective. */
:root{--qwelp-object-navigation-version:2}
.hotspots.object-navigation.object-navigation--clicks .scene-hotspot{
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:transparent;box-shadow:none;backdrop-filter:none;
  transform:translate(-50%,-50%);transition:opacity .18s;pointer-events:auto;
}
.hotspots.object-navigation.object-navigation--clicks .scene-hotspot:not(.is-visible){pointer-events:none}
.hotspots.object-navigation.object-navigation--clicks .scene-hotspot::before{
  content:'';position:absolute;left:50%;top:50%;height:1px;
  width:var(--link-length);background:#8a71e8;
  transform-origin:0 50%;transform:rotate(var(--link-angle));
}
.hotspots.object-navigation.object-navigation--clicks .object-click-mark{
  position:relative;display:grid;place-items:center;width:34px;height:34px;opacity:1;
  border:1.5px solid #8261e8;border-radius:50%;color:#7651df;background:#fff;
  box-shadow:0 2px 8px #43377120;transition:transform .15s,box-shadow .15s;
}
.object-click-mark svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.hotspots.object-navigation.object-navigation--clicks .object-tooltip{
  position:absolute;bottom:calc(100% + 7px);left:50%;
  display:flex;align-items:center;gap:12px;padding:9px 12px;
  border:1px solid #e9e2fa;border-radius:6px;background:#fff;color:#263455;
  font-size:12px;font-weight:550;line-height:1.4;white-space:nowrap;
  box-shadow:0 4px 14px #43377116;opacity:0;
  transform:translateX(calc(-50% + var(--tooltip-shift,0px)));transition:opacity .15s;
}
.hotspots.object-navigation.object-navigation--clicks .object-tooltip::after{
  content:'';position:absolute;top:100%;left:calc(50% - var(--tooltip-shift,0px));
  width:8px;height:8px;background:white;border-right:1px solid #e9e2fa;border-bottom:1px solid #e9e2fa;
  transform:translate(-50%,-4px) rotate(45deg);
}
.hotspots.object-navigation.object-navigation--clicks .object-tooltip b{padding:0;color:#8261e8;font-size:17px}
.hotspots.object-navigation.object-navigation--clicks .scene-hotspot[data-highlighted="true"] .object-tooltip,
.hotspots.object-navigation.object-navigation--clicks .scene-hotspot:focus-visible .object-tooltip{opacity:1}
.hotspots.object-navigation.object-navigation--clicks .scene-hotspot[data-highlighted="true"] .object-click-mark{
  transform:scale(1.06);box-shadow:0 0 0 4px #8261e813,0 3px 9px #43377120;
}
.hotspots.object-navigation.object-navigation--clicks .scene-hotspot:active .object-click-mark{transform:scale(.94)}
.hotspots.object-navigation.object-navigation--clicks .scene-hotspot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hotspots.object-navigation.object-navigation--clicks .scene-hotspot,.hotspots.object-navigation.object-navigation--clicks .object-click-mark,.hotspots.object-navigation.object-navigation--clicks .object-tooltip{transition:none}}
@media(forced-colors:active){.hotspots.object-navigation.object-navigation--clicks .object-click-mark{border-color:ButtonText}.hotspots.object-navigation.object-navigation--clicks .scene-hotspot:focus-visible{outline-color:Highlight}}