  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

.grid {
  display: grid;
  grid-template-columns: 20% 30% 20% 30%;
  grid-template-rows: repeat(2, auto);
  gap: 0;            /* внутренние просветы между ячейками */
  align-items: center;
  width: 70%;                /* ширина, как у канваса (если канвас тоже 70%) */
  box-sizing: border-box;
  border: 1px solid #000;    /* ВНЕШНЯЯ рамка таблицы */
  padding: 10px;             /* отступ от внешней рамки до содержимого */
  background: #f8f8f8;
margin: 0 auto 10px auto; /* снизу 20px, сверху убрали */
}


.span-2 {
  grid-row: span 2;
}

.grid label {
  display: flex;
  justify-content: space-between; /* разнести по краям ячейки */
  align-items: center;
  margin: 0;
  width: 100%;
  padding: 2px 5px;   /* вот этот отступ добавит «воздух» */
}


.grid > * {
  padding: 2px 5px;
  box-sizing: border-box;
  border: 1px solid #000; /* контур ячеек */
}

.grid input,
.grid select {
  width: auto;
  flex: 0 0 auto;
}

#canvas {
  width: 70%;
  aspect-ratio: 4 / 3; /* высота = 3/4 ширины */
  border: 1px solid #000;

  background: #f8f8f8;
  display: block;
}

body {
  font-family: Arial, sans-serif;
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* центрируем по горизонтали */
}

/* запретить инпутам растягиваться */
.grid input[type="number"] {
  flex: 0 0 auto;  /* фиксированная ширина, не растягивается */
  width: auto;     /* ширина берётся из size */
  max-width: 4em;  /* ограничение в символах, если нужно строго 4 */
}

.buttons {
  display: flex;              /* в линию */
  justify-content: center;    /* центрируем */
  align-items: center;        /* выравниваем по высоте */
  gap: 20px;                  /* расстояние между кнопками */
  margin: 10px auto;          /* отступ сверху и снизу */
  width: 100%;                /* растянем контейнер */
}


button {
  padding: 5px 5px;     /* больше размер кнопки */
  font-size: 16px;        /* чуть крупнее текст */
  border: 1px solid #000; /* более четкая граница */
  border-radius: 0;       /* острая форма */
  background: #f5f5f5;    /* светлый фон */
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

button:hover {
  background: #ddd;
  transform: scale(1.02);
}

button:active {
  background: #ccc;
  transform: scale(0.98);
}

.canvas-container {
  position: relative;
  width: 70%;        /* как у канваса */
  aspect-ratio: 4/3; /* высота */
  margin: 0 auto;    /* по центру */
}

#canvas {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  background: #f8f8f8;
  display: block;
}

.canvas-buttons {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
}

.canvas-buttons button {
  background: #f8f8f8;   /* фон как у канваса */
  border: none;          /* убрать рамку */
  padding: 0;            /* убрать внутренние отступы */
  width: auto;           /* ширина равна иконке */
  height: auto;          /* высота равна иконке */
  font-size: 24px;       /* увеличить пиктограмму (по умолчанию было 16px, стало ×1.5) */
  cursor: pointer;
  line-height: 1;        /* чтобы не было лишних отступов */
}

.canvas-buttons button:hover {
  background: #f8f8f8;   /* фон не меняется при наведении */
  transform: scale(1.1); /* лёгкое увеличение при наведении (по желанию) */
}


.scheme-button-cell, 
.scheme-svg-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}


  </style>