/* ============================================================================
   /vectorcraft/ — коралл VectorCraft на тёплом тёмном фоне.
   Второй круг стенда — голубой: пара «коралл + голубой» и есть «две фигуры»,
   а результат их сложения закрашивается кораллом, как основной объект.
   ========================================================================= */

.pb-landing.lp-vectorcraft {
  --lp-primary:   #e8573f;
  --lp-secondary: #ff9473;
  --lp-accent:    #4dabf7;
  --lp-glow:      rgba(232, 87, 63, .38);
  --lp-glow2:     rgba(77, 171, 247, .22);
  --lp-bg:        #150f12;
  --lp-surface:   rgba(255, 255, 255, .05);
  --lp-border:    rgba(255, 148, 115, .18);
  --lp-text:      #fbeee9;
  --lp-muted:     rgba(251, 238, 233, .72);
  --lp-text-dim:  rgba(251, 238, 233, .72);
  --lp-wave:      #1b1316;
}

/* ── Стенд ──────────────────────────────────────────────────────────────── */
.vcd { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.vcd > .lpd-status { grid-column: 1 / -1; margin: 0; }
@media (max-width: 860px) { .vcd { grid-template-columns: 1fr; } }

.vcd__ops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
@media (max-width: 480px) { .vcd__ops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vcd__op {
  display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; cursor: pointer;
  font: inherit; color: var(--lp-text); background: rgba(255, 255, 255, .04); border: 1.5px solid var(--lp-border);
}
.vcd__op:hover { border-color: var(--lp-primary); }
.vcd__op[aria-checked="true"] { border-color: var(--lp-primary); background: rgba(232, 87, 63, .16); }
.vcd__op-ic { width: 40px; height: 32px; }
.vcd__op-ic .is-fill { fill: var(--lp-primary); }
.vcd__op-ic .is-ghost { fill: none; stroke: var(--lp-muted); stroke-width: 1.2; stroke-dasharray: 2 2; }
.vcd__op-t { font-size: .84rem; font-weight: 700; }
.vcd__op-en { font-size: .68rem; color: var(--lp-muted); font-family: ui-monospace, monospace; }

.vcd__svg {
  display: block; width: 100%; height: auto; border-radius: 14px; touch-action: none;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 20px 20px,
    #1d1518;
  border: 1px solid var(--lp-border);
}
.vcd__svg.is-drag { cursor: grabbing; }
.vcd__result { fill: #e8573f; fill-opacity: .92; }
.vcd__out { fill: none; stroke-width: 1.5; stroke-dasharray: 5 4; }
.vcd__out--a { stroke: rgba(255, 200, 185, .7); }
.vcd__out--b { stroke: #4dabf7; }
.vcd__handle { fill: #4dabf7; stroke: #fff; stroke-width: 2.5; cursor: grab; }
.vcd__handle:focus-visible { outline: none; stroke: #ffd43b; stroke-width: 4; }
.vcd__hint { margin: 6px 0 0; font-size: .82rem; color: var(--lp-muted); }

.vcd__panes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vcd__pane { margin: 0; display: grid; justify-items: center; gap: 6px; text-align: center; }
.vcd__pane figcaption { font-size: .82rem; font-weight: 600; color: var(--lp-muted); }
.vcd__vp { position: relative; width: 160px; height: 160px; max-width: 100%; overflow: hidden; border-radius: 10px; background: #f6efe9; }
.vcd__raster { position: absolute; left: 0; top: 0; transform-origin: 0 0; image-rendering: pixelated; }
.vcd__vector { display: block; width: 160px; height: 160px; }
.vcd__zl { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: .88rem; color: var(--lp-muted); }
.vcd__zl input { flex: 1; accent-color: var(--lp-primary); }
.vcd__zv { min-width: 2.6em; font-weight: 700; color: var(--lp-text); font-variant-numeric: tabular-nums; }