.stepfig-region {
fill: rgba(10, 132, 255, 0.02);
stroke: rgba(10, 132, 255, 0.28);
stroke-width: 3;
stroke-dasharray: 12 10;
cursor: pointer; outline: none;
transition: fill .18s, stroke .18s, stroke-width .18s;
}
.stepfig-region.is-active {
fill: rgba(10, 132, 255, 0.16);
stroke: #0a84ff; stroke-width: 6; stroke-dasharray: none;
}
.stepfig-region:focus-visible { stroke: #0066cc; stroke-dasharray: none; }
.stepfig-player {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 12px 16px;
}
.stepfig-transport { display: inline-flex; align-items: center; gap: 8px; }
.stepfig-btn {
min-width: 34px; height: 34px; padding: 0 9px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.16);
background: #fff; color: #111111; font-size: 15px; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.stepfig-btn:hover { border-color: rgba(15, 23, 42, 0.34); }
}
.stepfig-btn--pp { font-size: 12px; letter-spacing: 1px; }
.stepfig-dots { display: inline-flex; gap: 7px; margin-left: 4px; }
.stepfig-dot {
width: 9px; height: 9px; padding: 0; border: none; border-radius: 999px;
background: #cfd6e2; cursor: pointer; transition: width .2s, background .2s;
}
.stepfig-dot.is-active { width: 24px; background: #0a84ff; }
.stepfig-cap-n {
display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px;
background: rgba(10, 132, 255, 0.12); color: #0066cc; font-size: 11px; font-weight: 800;
}