:root  > * {
  --md-primary-fg-color:        #2799b1;
  --md-accent-fg-color:           #2799b1
}

/* иконка меню */
.md-header__button.md-icon svg path {
  fill: #ffffff !important;
  stroke: none !important;
}

/* Усиленные стили для поля ввода */
body  .md-header-search .md-header-search__input,
body  .md-search__input {
  border-radius: 16px !important;
  background-color: #f8f9fa !important;
  color: #2799b1 !important;
  padding: 1px 55px !important;
  font-size: 16px !important;
}

/* 1. Родительский контейнер поиска: убираем фон и скругление, НЕ ставим overflow: hidden */
.md-header-search,
.md-search {
  border-radius: 0 !important;       /* убираем скругление у родителя */
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  /* overflow: hidden — здесь НЕ нужен, иначе срежутся подсказки */
}

/* 2. Внутренний белый блок (поле ввода): именно здесь делаем скругление и обрезку */
.md-header-search__input,
.md-search__input {
  border-radius: 16px !important;
  background-color: #ffffff !important;
  color: #212529 !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: none !important;
}

/* 3. Блок подсказок: разрешаем ему быть больше родителя и не обрезаем */
.md-search__suggest,
.md-search__output {
  border-radius: 0 !important;       /* у подсказок своё скругление, если нужно */
  overflow: visible !important;      /* ВАЖНО: разрешаем вылезать за границы */
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* 4. Промежуточные обёртки (частая проблема в Material) */
.md-search__form,
.md-header-search__form {
  border-radius: 0 !important;
  overflow: visible !important;     /* тоже разрешаем вылезать */
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* Плейсхолдер */
body .md-header-search .md-header-search__input::placeholder,
body .md-search__input::placeholder {
  color: #2799b1 !important;
  opacity: 1 !important;
}

/* Иконка лупы — несколько селекторов для надёжности */
body .md-header .md-header-search__icon svg path,
body .md-header svg path,
.md-header__button--search svg path {
  fill: #2799b1 !important;
}

/* Переопределение CSS‑переменных для текста */
:root {
  --md-text-color: #212529;
  --md-text-color-placeholder: #6c757d;
}


.numbers {
  color: #2799b1;
}
:root {
  --md-typeset-h1-font-weight: 700;
  --md-typeset-h2-font-weight: 700;
  --md-typeset-h3-font-weight: 700;
  --md-typeset-h4-font-weight: 700;
  --md-typeset-h5-font-weight: 700;
  --md-typeset-h6-font-weight: 700;
}
.md-grid {
  max-width: 1400px; 
}
.center-table {
  text-align: center;
}

.md-typeset .center-table :is(td, th):not([align]) {
  text-align: initial;
}

<div class="key-display">
  <span class="keys">
    <kbd class="key-ctrl">Ctrl</kbd>
    <kbd class="key-alt">Alt</kbd>
    <kbd class="key-delete">Delete</kbd>
    <kbd class="key-shift">Shift</kbd>
    <kbd class="key-del">Del</kbd>
    <kbd class="key-z">z</kbd>
    <kbd class="key-c">c</kbd>
    <kbd class="key-V">V</kbd>
    <kbd class="key-X">X</kbd>
    <kbd class="key-S">S</kbd>
    <kbd class="key-H">H</kbd>
    <kbd class="key-T">T</kbd>
    <kbd class="key-P">P</kbd>
    <kbd class="key-M">M</kbd>
    <kbd class="key-E">E</kbd>
    <kbd class="key-b">b</kbd>
    <kbd class="key-О">О</kbd>
  </span>
</div>

.key-display {
  padding: 10px;
  background: #f5f5f5;
  border-radius: 8px;
}

.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.key {
  padding: 8px 12px;
  background: #333;
  color: white;
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
}

.key-modifier {
  background: #007acc;
}

.md-typeset blockquote {
    border-left: 4px solid #2799b1 !important;
    color: #352e2e;
}