.qb-location-actions, .qb-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.qb-figure { margin: 24px 0 0; }
.qb-dial { width: min(100%, 250px); aspect-ratio: 1; margin: 0 auto 16px; position: relative; border: 2px solid #d0d0d0; border-radius: 50%; background: #fafafa; }
.qb-dial > span:not(.qb-centre) { position: absolute; font-weight: 700; color: #626262; font-size: 14px; line-height: 1; }
.qb-north { left: 50%; top: 13px; transform: translateX(-50%); }
.qb-east { right: 13px; top: 50%; transform: translateY(-50%); }
.qb-south { left: 50%; bottom: 13px; transform: translateX(-50%); }
.qb-west { left: 13px; top: 50%; transform: translateY(-50%); }
.qb-arrow { position: absolute; left: calc(50% - 2px); bottom: 50%; width: 4px; height: 33%; background: #242424; transform: rotate(var(--qb-angle, 0deg)); transform-origin: 50% 100%; border-radius: 2px; }
.qb-arrow::before { content: ''; position: absolute; top: -9px; left: -5px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 13px solid #242424; }
.qb-centre { position: absolute; width: 12px; height: 12px; top: calc(50% - 6px); left: calc(50% - 6px); border-radius: 50%; background: #242424; }
.qb-figure figcaption { color: #626262; font-size: 13px; line-height: 1.7; }