.vis-modes-area {
  /* ===== НАСТРАИВАЕМЫЕ ПАРАМЕТРЫ ===== */
  --side-gap: 30px;          /* отступы от краёв экрана */
  --block-height: 450px;     /* базовая высота */
  --min-height: 520px;       /* защита от "узкой колбаски" */
  --max-height: 95vh;        /* адаптивность по высоте */

  --bg-dark: #120016;        /* основной тёмный фон (не кислотный) */
  --bg-deeper: #0a000e;      /* углубление */
  --grid-size: 121px;
  --grid-line: color-mix(in hsl, #ffffff, transparent 82%);

  /* ===== ГЕОМЕТРИЯ ===== */
  width: calc(100% - (var(--side-gap) * 2));
  height: clamp(var(--min-height), var(--block-height), var(--max-height));
  margin-inline: auto;

  position: relative;
  overflow: hidden;

  /* ===== ФОН ===== */
  background:
    linear-gradient(
      180deg,
      color-mix(in hsl, var(--bg-dark), black 1%),
      var(--bg-deeper)
    );

  /* ===== BORDER ===== */
  border: 1px solid color-mix(in hsl, black, #ffffff 12%);
  border-radius: 20px;

  /* ===== SHADOW (глубокий, но не грязный) ===== */
  box-shadow:
    0 18px 25px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

    margin: 30px 0px 30px 0px
}

/* ===== СЛОЙ С СЕТКОЙ (АНАЛОГ body::before) ===== */
.vis-modes-area::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      var(--grid-line) .5px,
      transparent 1px var(--grid-size)
    )
    calc(var(--grid-size) * 0.36) 50% /
    var(--grid-size) var(--grid-size),

    linear-gradient(
      var(--grid-line) 1px,
      transparent 1px var(--grid-size)
    )
    0 calc(var(--grid-size) * 0.32) /
    var(--grid-size) var(--grid-size);

  /* Диагональная маска, мягче и темнее */
  mask: linear-gradient(-50deg, transparent 20%, white);

  pointer-events: none;
  z-index: 0;
}

/* ===== КОНТЕНТ ВНУТРИ БЛОКА ===== */
.vis-modes-area > * {
  position: relative;
  z-index: 1;
}