:root {
    /* Spot (solid dot; --group-color is JS-injected, token is the fallback bg) */
    /* Default: 30px */
    --hs-ext-spot-size: 30px;
    /* Default: 100px */
    --hs-ext-spot-radius: 100px;
    /* Default: rgba(255,255,255,1) */
    --hs-ext-spot-bg-fallback: rgba(255,255,255,1);
    /* Default: 1px */
    --hs-ext-spot-border-width: 1px;
    /* Default: rgba(0,0,0,0.6) */
    --hs-ext-spot-border-color: rgba(0,0,0,0.6);

    /* Ring (pulsing outline) */
    /* Default: 40px */
    --hs-ext-ring-size: 40px;
    /* Default: 100px */
    --hs-ext-ring-radius: 100px;
    /* Default: 2px */
    --hs-ext-ring-border-width: 2px;
    /* Default: rgba(255,255,255,1) */
    --hs-ext-ring-border-color: rgba(255,255,255,1);
    /* Default: 0.5 */
    --hs-ext-ring-opacity: 0.5;
    /* Default: 1 */
    --hs-ext-ring-opacity-hover: 1;
    /* Default: 1.1 */
    --hs-ext-ring-hover-scale: 1.1;
    /* Default: 2s */
    --hs-ext-ring-pulse-duration: 2s;

    /* Icon SVG fills. --group-color is JS-injected per hotspot; these are the fallbacks. */
    /* Default: #ffffff */
    --hs-ext-icon-ring-fill: #ffffff;
    /* Default: #000000 */
    --hs-ext-icon-fill: #000000;
    /* Default: #ffffff */
    --hs-ext-icon-hs-bg: #ffffff;
    /* Default: #000000 */
    --hs-ext-icon-hs-fill-fallback: #000000;

    /* Popup card */
    /* Default: 30rem */
    --hs-ext-popup-width: 30rem;
    /* Default: 8px */
    --hs-ext-popup-radius: 8px;
    /* Default: rgba(0,0,0,0.9) */
    --hs-ext-popup-bg: rgba(0,0,0,0.9);

    /* Popup text */
    /* Default: 1.6rem */
    --hs-ext-title-font-size: 1.6rem;
    /* Default: 1.2rem */
    --hs-ext-desc-font-size: 1.2rem;

    /* Scale-down (active mousedown / hs-scale-down body state) */
    /* Default: 0.7 */
    --hs-ext-scaledown-opacity: 0.7;
    /* Default: 0.7 */
    --hs-ext-scaledown-scale: 0.7;
}