.hs-host { position: relative; display: block; }
.hs-host .atl-figure__btn { display: block; }
.hs-host--preview .atl-figure__btn { cursor: zoom-in; }
.hs-overlay {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; overflow: visible;
}
.hs-hot { pointer-events: auto; cursor: pointer; outline: none; }
.hs-dot { fill: #0a84ff; stroke: #fff; stroke-width: 6; transition: fill .12s; }
.hs-ring {
fill: #0a84ff; opacity: .5;
transform-box: fill-box; transform-origin: center;
animation: hsPulse 2.1s ease-out infinite;
}
.hs-hot--point.is-active .hs-dot { fill: #0066cc; }
@media (hover: hover) and (pointer: fine) {
.hs-hot--point:hover .hs-dot { fill: #0066cc; }
}
.hs-hot:focus-visible .hs-dot { stroke: #cfe4ff; stroke-width: 9; }
@keyframes hsPulse {
0%   { transform: scale(.55); opacity: .55; }
70%  { transform: scale(1.9);  opacity: 0; }
100% { transform: scale(1.9);  opacity: 0; }
}
.hs-rect {
fill: rgba(10, 132, 255, 0.05);
stroke: rgba(10, 132, 255, 0.42);
stroke-width: 3;
stroke-dasharray: 10 8;
transition: fill .12s, stroke .12s, stroke-width .12s;
}
.hs-hot--rect:hover .hs-rect,
.hs-hot--rect.is-active .hs-rect {
fill: rgba(10, 132, 255, 0.16);
stroke: #0a84ff;
stroke-width: 5;
stroke-dasharray: none;
}
.hs-hot:focus-visible .hs-rect { stroke: #0066cc; stroke-width: 5; stroke-dasharray: none; }
.hs-circle {
fill: rgba(10, 132, 255, 0.05);
stroke: rgba(10, 132, 255, 0.42);
stroke-width: 3;
stroke-dasharray: 10 8;
transition: fill .12s, stroke .12s, stroke-width .12s;
}
.hs-hot--circle:hover .hs-circle,
.hs-hot--circle.is-active .hs-circle {
fill: rgba(10, 132, 255, 0.16);
stroke: #0a84ff;
stroke-width: 5;
stroke-dasharray: none;
}
.hs-hot:focus-visible .hs-circle { stroke: #0066cc; stroke-width: 5; stroke-dasharray: none; }
.hs-poly {
fill: rgba(10, 132, 255, 0.06);
stroke: rgba(10, 132, 255, 0.5);
stroke-width: 3;
stroke-linejoin: round;
transition: fill .12s, stroke .12s, stroke-width .12s;
}
.hs-hot--poly:hover .hs-poly,
.hs-hot--poly.is-active .hs-poly {
fill: rgba(10, 132, 255, 0.2);
stroke: #0a84ff;
stroke-width: 5;
}
.hs-hot:focus-visible .hs-poly { stroke: #0066cc; stroke-width: 5; }
.hs-path {
stroke: rgba(10, 132, 255, 0.5);
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke .12s, stroke-width .12s;
}
.hs-hot--path:hover .hs-path,
.hs-hot--path.is-active .hs-path { stroke: #0a84ff; stroke-width: 15; }
.hs-hot:focus-visible .hs-path { stroke: #0066cc; stroke-width: 15; }
@media (prefers-reduced-motion: reduce) {
.hs-ring { animation: none; opacity: .35; }
}
.hs-layer { position: absolute; inset: 0; pointer-events: none; }
.hs-callout {
position: absolute;
min-width: 168px; max-width: 236px;
padding: 10px 12px;
background: #fff; color: #111111;
border: 1px solid rgba(15, 23, 42, 0.14);
border-radius: 10px;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
font-size: 12.5px; line-height: 1.45;
opacity: 0; visibility: hidden;
transition: opacity .12s;
z-index: 6;
}
.hs-callout.is-open { opacity: 1; visibility: visible; }
.hs-callout strong { font-weight: 800; color: #111111; }
.hs-callout--above { transform: translate(-50%, calc(-100% - 15px)); }
.hs-callout--below { transform: translate(-50%, 15px); }
.hs-flow-path {
stroke: rgba(225, 29, 72, 0.5);
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 3 16;
}
.hs-flow-p {
fill: #e11d48;
stroke: #fff;
stroke-width: 2;
filter: drop-shadow(0 0 3px rgba(225, 29, 72, 0.6));
}
.hs-hot.is-flow .hs-dot { fill: #e11d48; }
.hs-hot.is-flow .hs-ring { fill: #e11d48; opacity: .75; animation-duration: .8s; }
.hs-flow-toggle {
position: absolute; left: 8px; bottom: 8px; z-index: 5;
width: 30px; height: 30px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(15, 23, 42, 0.18);
background: rgba(255, 255, 255, 0.92); color: #111111; cursor: pointer;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
@media (hover: hover) and (pointer: fine) {
.hs-flow-toggle:hover { background: #fff; }
}
.hs-zoom {
position: fixed; inset: 0; z-index: 4000;
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.hs-zoom[hidden] { display: none; }
.hs-zoom__backdrop { position: absolute; inset: 0; background: rgba(8, 12, 22, 0.82); }
.hs-zoom__panel { position: relative; width: min(1100px, 92vw); max-height: 92vh; }
.hs-zoom__x {
position: absolute; top: -14px; right: -14px; z-index: 2;
width: 40px; height: 40px; border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.4);
background: #fff; color: #111111; font-size: 16px; cursor: pointer;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.hs-zoom__fig { position: relative; display: block; }
.hs-zoom__img {
display: block; width: 100%; height: auto; max-height: 88vh; object-fit: contain;
border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); background: #fff;
}
body.hs-zoom-open { overflow: hidden; }