*,
*::before,
*::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;       /* про запас */
}

/* Контейнер — на всю ширину без vw, чтобы не ловить «+скролл из-за скроллбара» */
.visual {
  position: relative;
  width: 100%;
  min-height: var(--visual-min-height, 700px);
}

/* Сам SVG: заполняет ширину, сохраняет пропорции, без «лишней» высоты */
.visual > svg {
  display: block;           /* убирает нижнюю полоску */
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: hidden;         /* обрезаем «scale(1.1)» внутри */
}

/* 4) В режиме block пусть ограничивается высотой вьюпорта (если нужно) */
.visual[data-step="block"] > svg {
  max-height: 100vh;
}


/* Сам SVG / canvas: тянется по ширине, сохраняет пропорции, но не ниже минимальной высоты */
/* .visual-canvas {
  display: block;
  width: 100%;                
  height: auto;             
  max-width: 100%;              
  min-height: var(--visual-min-height); 
  margin: 0 auto;
} */

/* .visual[data-step="block"] .visual-canvas {
  width: auto;  
  height: auto;
  max-height: 100%;
  margin: auto;
} */

/* Старая подложка из экспортируемого SVG больше не управляет затемнением */
/* .visual-canvas__overlay { fill-opacity: 0 !important; } */

.visual[data-step="block"] svg {
    width: 100%;
    height: auto;
    max-height: 100vh;
}

/* Инвертированное затемнение */
.visual-dim {
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.visual:hover .visual-dim { opacity: .65; }
.visual:hover[data-step="block"] .visual-dim { opacity: 0; }

/* Поведение фигур по шагам — сохраняем твою логику */
.visual-canvas__object {
  stroke:#fff; stroke-width:var(--visual-stroke-width, 4px);
  stroke-opacity:0; fill-opacity:0; cursor:pointer;
  transition: fill-opacity var(--visual-fill-transition-duration, 0s);
}
.visual[data-step="block"] .visual-canvas__object:hover { fill-opacity:.3; fill:#000; }
.visual:not([data-step="block"]) .visual-canvas__object:hover { fill-opacity:.3; stroke-opacity:1; fill:#09e; }

.visual-empty__object {
  stroke:#fff; stroke-width:var(--visual-stroke-width, 4px);
  stroke-opacity:0; fill-opacity:0; cursor:pointer;
  transition: fill-opacity var(--visual-fill-transition-duration, 0s);
}

/* Лоадер */
.visual_loading::before,
.visual_loading::after { content:''; position:fixed; z-index:10; }
.visual_loading::before { inset:0; background:#000; opacity:.2; }
.visual_loading::after { width:40px; height:40px; border:3px solid #000; border-left-color:transparent; border-right-color:transparent; border-radius:50%; top:50%; left:50%; margin:-20px 0 0 -20px; animation:spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg);} }

.tippy-box[data-theme~=light]{border-radius:6px;color:#26323d;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background:#fff}

/* Убрали топбар полностью */

/* Титул в правом-верхнем углу — как в твоём примере */
#title {
  position: absolute;  /* остаётся «привязан» к верхнему правому углу .visual */
  top: 0;
  right: 0;
  z-index: 3;
  background-color: #fff;
  border-bottom-left-radius: 30px;
  padding: 20px;
  font-size: 18px;
  line-height: 1.2;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}