.viewer-compass {
  position: absolute;
  right: var(--compass-right, 22px);
  bottom: var(--compass-bottom, 100px);
  width: 64px;
  height: 64px;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 64%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.viewer-compass svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.viewer-compass .compass-ring { fill: none; stroke: #becbd1; stroke-width: .6; }
.viewer-compass .compass-north { fill: #437997; }
.viewer-compass .compass-south { fill: #cad5db; }
.viewer-compass .compass-pivot { fill: #fff; }
.viewer-compass .compass-label { fill: #6d818d; font: 9px 'Segoe UI', sans-serif; font-weight: 500; }
.viewer-compass .compass-label-north { fill: #315e79; font-weight: 700; }
.viewer-compass[data-north-verified="false"] .compass-north { fill: #8398a4; }
.viewer-compass[data-north-verified="false"] .compass-label { font-size: 8px; fill: #718590; }
.workspace-mode .viewer-compass { position: fixed; }
.model-panel:has(.site-plan-view:not([hidden])) .viewer-compass { display: none; }
@media (max-width: 600px) {
  .viewer-compass { width: 58px; height: 58px; right: var(--compass-right, 12px); }
}