@import url(style_cs.1782249634.css);

/* ====================
   Основные настройки
   ==================== */

:root {
  /* Фон страницы */
  --page-background-color: #d3d3d3;
  --page-background-image: url("https://forumstatic.ru/files/001c/bc/79/44929.webp");
  --page-background-mobile-image: url("https://forumstatic.ru/files/001c/bc/79/44929.webp");

  /* Шапка */
  --header-background-color: #d3d3d3;
  --header-background-image: url("https://forumstatic.ru/files/001c/bc/79/98794.webp");
  --header-background-image-2x: url("https://forumstatic.ru/files/001c/bc/79/13612.webp");
  --header-background-mobile-image: url("https://forumstatic.ru/files/001c/bc/79/98794.webp");
  --header-background-mobile-image-2x: url("https://forumstatic.ru/files/001c/bc/79/13612.webp");

  /* Шрифты */
  --font-primary: "Alice", Georgia, serif;
  --font-description: "Arial Narrow", sans-serif;
  --font-title: "Aqiren", sans-serif;

  --font-size-base: 13px;
  --font-size-small: 11px;
  --font-size-large: 13px;
  --font-size-title: 19px;
  --font-size-online: 14px;
  --font-size-desc: 11px;
  --subcategory-title-size: 30px;

  /* Основные цвета */
  --color-dark: #2b2b2b;
  --color-white: #ffffff;
  --color-text: #202020;
  --color-muted: #636363;
  --forum-light-color: #f4f4f4;

  --link-color: #a4c350;
  --link-hover-color: #78952d;
  --link-hover-shadow: rgba(0, 0, 0, 0.18);
  --text-stroke-hover-color: rgba(0, 0, 0, 0.53);

  /* Форум */
  --forum-max-width: 1000px;
  --forum-body-padding-y: 32px;
  --forum-body-padding-x: 40px;

  /* Статистика */
  --stats-background: var(--color-dark);
  --stats-text-color: var(--forum-light-color);
  --stats-radius: 25px;
  --stats-bar-height: 30px;
  --stats-gap: 28px;
  --stats-padding-y: 12px;
  --stats-padding-x: 24px;

  /* Категории */
  --category-top-image: none;
  --category-top-height: 0px;
  --category-image: none;
  --category-image-width: 0px;
  --category-image-height: 0px;
  --category-image-ratio: 1 / 1;
  --category-margin-x: 50px;
  --category-margin-bottom: 20px;

  --forum-description-width: 60%;
  --forum-avatar-width: 10%;
  --forum-last-post-width: 30%;

  /* Подкатегории */
  --subcategory-title-color: #728341;
  --subcategory-description-color: var(--color-muted);
  --subcategory-padding-y: 12px;
  --subcategory-padding-x: 14px;
  --subcategory-hover-background: var(--forum-light-color);
  --subcategory-hover-shadow:
    inset 0 6px 8px -10px rgba(0, 0, 0, 0.28),
    inset 0 -6px 8px -10px rgba(0, 0, 0, 0.38);

  --subcategory-status-size: 10px;
  --subcategory-status-gap: 10px;
  --subcategory-status-old-color: #e6e6e5;
  --subcategory-status-new-color: #ffcb1f;
  --subcategory-title-stroke-width: 1px;

  /* Последнее сообщение */
  --lastpost-title-color: #394d00;
  --lastpost-text-color: var(--color-text);
  --lastpost-title-stroke-width: 0.5px;
  --lastpost-line-height: 10px;
  --lastpost-info-gap: 4px;

  /* Аватар последнего сообщения */
  --lastpost-avatar-size: 36px;
  --lastpost-avatar-left: -16.666%;
  --lastpost-avatar-border-color: var(--link-color);

  /* Меню на картинке категории */
  --category-menu-top: 10px;
  --category-menu-left: 0px;
  --category-menu-width: 98px;
  --category-menu-gap: 5px;

  --category-menu-button-width: 95px;
  --category-menu-button-min-height: 20px;
  --category-menu-button-line-height: 16px;
  --category-menu-button-padding-y: 3px;
  --category-menu-button-padding-x: 8px;
  --category-menu-button-radius: 0 9px 9px 0;
  --category-menu-button-bg: var(--color-dark);
  --category-menu-button-color: var(--color-white);
  --category-menu-button-hover-bg: #394d00;
  --category-menu-button-hover-color: var(--forum-light-color);
  --category-menu-button-shift: 3px;
  --category-menu-tail-width: 3px;
  --category-menu-tail-left: -3px;

  /* Баннеры */
  --banners-width: 500px;
  --banners-height: 130px;
  --banners-padding: 16px;
  --banner-width: 88px;
  --banner-height: 33px;
  --banners-column-gap: 38px;
  --banners-row-gap: 24px;
  --banners-scrollbar-width: 3px;
  --banners-scrollbar-offset: 4px;
  --banners-scrollbar-thumb-min-height: 24px;

  /* Плавность */
  --transition-fast: 200ms ease;
  --transition-base: 250ms ease;
}

/* ====================
   Постоянно скрытые элементы
   ==================== */

#pun-break3,
#pun-crumbs2,
#pun-break4,
#pun-about,
#pun-title .title-logo,
#pun-index #pun-main > h1,
#pun-index .category thead,
#pun-stats h2,
#pun-stats .item3,
#pun-index #pun-main .category .tclcon .newtext,
#pun-index #pun-main .category .tclcon .new,
#pun-index #pun-main .category .tclcon .inew,
#pun-index #pun-main .category .tclcon strong {
  display: none;
}
#pun-index #pun-main div[id^="pun-category"] > h2,
#pun-index #pun-main .category > h2,
#pun-index #pun-main .category .tc2 {
  display: none !important;
}

/* Единая модель размеров для основных блоков */
#pun,
#pun-title,
#pun-main,
#pun-stats .container,
#pun-stats #onlinelist,
#pun-stats .onlinelist,
#pun-stats .users_24h,
.banners {
  box-sizing: border-box;
}

/* ====================
   Страница и общий фон
   ==================== */

html {
  min-height: 100%;
  background-color: var(--page-background-color);
  font-size: var(--font-size-base);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: scroll;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  position: relative;
  z-index: 0;
  min-height: 100vh; /* Запасной вариант для старых браузеров */
  min-height: 100dvh;
  min-width: var(--forum-max-width);
  margin: 0;
}

/* Фиксированный слой работает на мобильных устройствах стабильнее,
   чем background-attachment: fixed. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--page-background-color);
  background-image: var(--page-background-image);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ====================
   Каркас форума
   ==================== */

/* Общая ширина шапки, содержимого и статистики */
#pun {
  width: var(--forum-max-width);
  max-width: none;
  margin: 0 auto;
}

#pun a,
#pun a:visited {
  color: var(--link-color);
  text-decoration: none;
  text-shadow: 0 2px 3px transparent;

  transition:
    color var(--transition-base),
    text-shadow var(--transition-base);
}

#pun a:hover,
#pun a:focus-visible {
  color: var(--link-hover-color);
  text-shadow: 0 2px 3px var(--link-hover-shadow);
}

/* Шапка форума */
#pun-title {
  width: 100%;
  margin: 0;
  aspect-ratio: 763 / 372;
  background-color: var(--header-background-color);
  background-image: var(--header-background-image);
  background-image: -webkit-image-set(
    var(--header-background-image) 1x,
    var(--header-background-image-2x) 2x
  );
  background-image: image-set(
    var(--header-background-image) 1x,
    var(--header-background-image-2x) 2x
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* При дальнейшем увеличении шапки используем изображение 2x.
   796px окна − 32px боковых отступов = 764px шапки. */
@media (min-width: 796px) {
  #pun-title {
    background-image: var(--header-background-image-2x);
  }
}

/* Основное тело форума */
#pun-main {
  width: 100%;
  padding: var(--forum-body-padding-y) var(--forum-body-padding-x);
  background-color: var(--forum-light-color);
}

#pun-index #pun-main {
  padding-right: 0;
  padding-left: 0;
}

/* Общий блок категории */
#pun-index #pun-main .category {
  display: grid;
  position: relative;

  grid-template-columns:
    var(--category-image-width)
    1fr;

  grid-template-rows:
    var(--category-top-height)
    1fr;

  height: var(--category-image-height);
  margin: 0 var(--category-margin-x) var(--category-margin-bottom);
}

#pun-index #pun-main .category::before {
  content: "";

  grid-column: 1;
  grid-row: 1 / 3;

  width: 100%;
  height: 100%;

  background-image: var(--category-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#pun-index #pun-main .category::after {
  content: "";

  grid-column: 2;
  grid-row: 1;

  width: 100%;
  height: var(--category-top-height);

  background-image: var(--category-top-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#pun-index #pun-main .category > .container {
  grid-column: 2;
  grid-row: 2;

  min-width: 0;
  min-height: 0;
  height: 100%;
}

#pun-category1 {
  --category-image: url("https://forumstatic.ru/files/001c/bc/79/90993.webp");
  --category-image-width: 159px;
  --category-image-height: 225px;
  --category-image-ratio: 159 / 225;

  --category-top-image: url("https://forumstatic.ru/files/001c/bc/79/25211.webp");
  --category-top-height: 58px;
}

/* Соотношение описания форума, аватарки и последнего сообщения */
#pun-index #pun-main .category .tcl {
  box-sizing: border-box;
  width: var(--forum-description-width);
}

#pun-index #pun-main .category .tc3 {
  display: table-cell !important;
  box-sizing: border-box;
  width: var(--forum-avatar-width);

  font-size: 0;
  color: transparent;
}

#pun-index #pun-main .category .tcr {
  position: relative;
  box-sizing: border-box;
  width: var(--forum-last-post-width);
  text-align: left;
}

#pun-index #pun-main .category .tcl,
#pun-index #pun-main .category .tclcon {
  margin-top: 0;
  padding-top: 0;
}

#pun-index #pun-main .category table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-spacing: 0;
}

#pun-index #pun-main .category tbody {
  height: 100%;
}

#pun-index #pun-main .category tbody > tr {
  height: 50%;
}

/* Аватарка последнего сообщения */
#pun-index #pun-main .category .tcr .user-avatar {
  position: absolute;
  top: 50%;
  left: var(--lastpost-avatar-left);

  display: block;
  width: var(--lastpost-avatar-size);
  height: var(--lastpost-avatar-size);

  border: 0;
  border-radius: 50%;

  transform: translate(-50%, -50%);
}

#pun-index #pun-main .category .tcr .user-avatar::after {
  content: "";
  position: absolute;
  inset: 0;

  box-sizing: border-box;
  border: 1px solid var(--lastpost-avatar-border-color);
  border-radius: 50%;

  pointer-events: none;
}

/* Перенос строки из исходной разметки больше не нужен */
#pun-index #pun-main .category .tcr br {
  display: none;
}

/* Название последней темы */
/* Название последней темы */
#pun-index #pun-main .category .tcr .lastpost-link,
#pun-index #pun-main .category .tcr .lastpost-link:visited {
  display: block;

  color: var(--lastpost-title-color);

  font-family: var(--font-primary);
  font-size: var(--font-size-large);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lastpost-line-height);
  letter-spacing: 0;

  text-align: left;
  text-transform: lowercase;
  text-shadow: none;

  -webkit-text-stroke: var(--lastpost-title-stroke-width) transparent;

  transition:
    color var(--transition-base),
    -webkit-text-stroke-color var(--transition-base);
}

#pun-index #pun-main .category .tcr .lastpost-link:hover,
#pun-index #pun-main .category .tcr .lastpost-link:focus-visible {
  color: var(--lastpost-title-color);
  -webkit-text-stroke-color: var(--text-stroke-hover-color);
  text-shadow: none;
}

/* Остальная информация под названием темы */
#pun-index #pun-main .category .tcr .lastpost {
  display: block;
  margin-top: var(--lastpost-info-gap);

  color: var(--lastpost-text-color);

  font-family: var(--font-primary);
  font-size: var(--font-size-small);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lastpost-line-height);
  letter-spacing: 0;

  text-align: left;
  text-transform: lowercase;
  text-shadow: none;
}
/* Отступы и анимация подкатегорий */
#pun-index #pun-main .category tbody td {
  box-sizing: border-box;
  padding:
    var(--subcategory-padding-y)
    var(--subcategory-padding-x);

  vertical-align: middle;

  transition:
    background-color var(--transition-base),
    box-shadow var(--transition-base);
}

#pun-index #pun-main .category tbody tr:hover td,
#pun-index #pun-main .category tbody tr:focus-within td {
  background-color: var(--subcategory-hover-background);
  box-shadow: var(--subcategory-hover-shadow);
}

/* Заголовок подкатегории + кружок статуса */
#pun-index #pun-main .category .tclcon h3 {
  display: flex;

  align-items: center;
  gap: var(--subcategory-status-gap);

  margin: 0;
  padding: 0;

  font-family: var(--font-title);
  font-size: var(--subcategory-title-size);
  font-weight: 400;
  line-height: 1;
  text-shadow: none;
}

/* Кружок рядом с названием подкатегории */
#pun-index #pun-main .category .tclcon h3::after {
  content: "";

  flex: 0 0 auto;
  width: var(--subcategory-status-size);
  height: var(--subcategory-status-size);

  border-radius: 50%;
  background-color: var(--subcategory-status-old-color);
}

/* Если в подкатегории есть новые сообщения */
#pun-index #pun-main .category tbody tr.inew .tclcon h3::after,
#pun-index #pun-main .category tbody tr.new .tclcon h3::after,
#pun-index #pun-main .category tbody tr[class*="new"] .tclcon h3::after {
  background-color: var(--subcategory-status-new-color);
}

/* Ссылка заголовка */
#pun-index #pun-main .category .tclcon h3 a,
#pun-index #pun-main .category .tclcon h3 a:visited {
  color: var(--subcategory-title-color);
  font: inherit;
  line-height: inherit;
  text-shadow: none;

  /* Обводка существует, но изначально прозрачная */
  -webkit-text-stroke: var(--subcategory-title-stroke-width) transparent;

  transition:
    color var(--transition-base),
    -webkit-text-stroke-color var(--transition-base);
}

#pun-index #pun-main .category .tclcon h3 a:hover,
#pun-index #pun-main .category .tclcon h3 a:focus-visible {
  color: var(--subcategory-title-color);
  -webkit-text-stroke-color: var(--text-stroke-hover-color);
  text-shadow: none;
}

/* Описание под названием форума */
#pun-index #pun-main .category .tclcon {
  color: var(--subcategory-description-color);

  font-family: var(--font-description);
  font-size: var(--font-size-desc);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lastpost-line-height);
  letter-spacing: 0;

  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}


/* Меню категорий до переноса скриптом не занимает место */
.category-menu {
  display: none;
}

/* Меню поверх левой картинки категории */
#pun-index #pun-main .category .category-menu {
  position: absolute;
  top: var(--category-menu-top);
  left: var(--category-menu-left);
  z-index: 3;

  display: flex;
  flex-direction: column;
  gap: var(--category-menu-gap);

  width: var(--category-menu-width);
  overflow: hidden;
}

/* Кнопки */
#pun-index #pun-main .category .category-menu a,
#pun-index #pun-main .category .category-menu a:visited {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: var(--category-menu-button-width);
  min-height: var(--category-menu-button-min-height);
  padding: var(--category-menu-button-padding-y) var(--category-menu-button-padding-x);

  border-radius: var(--category-menu-button-radius);
  background-color: var(--category-menu-button-bg);
  color: var(--category-menu-button-color);

  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--category-menu-button-line-height);
  text-align: center;
  text-decoration: none;
  text-shadow: none;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

/* Дорисовываем левый кусочек фона */
#pun-index #pun-main .category .category-menu a::before {
  content: "";

  position: absolute;
  top: 0;
  left: var(--category-menu-tail-left);
  z-index: -1;

  width: var(--category-menu-tail-width);
  height: 100%;

  border-radius: 0;
  background-color: inherit;
  opacity: 0;

  transition: opacity var(--transition-fast);
}

/* Хвостик закрывает появившийся зазор */
#pun-index #pun-main .category .category-menu a:hover::before,
#pun-index #pun-main .category .category-menu a:focus-visible::before {
  opacity: 1;
}

/* При наведении кнопка едет вправо */
#pun-index #pun-main .category .category-menu a:hover,
#pun-index #pun-main .category .category-menu a:focus-visible {
  background-color: var(--lastpost-title-color);
  color: var(--category-menu-button-hover-color);
  transform: translateX(var(--category-menu-button-shift));
}

/* ====================
   Статистика форума
   ==================== */

#pun-stats {
  width: 100%;
  margin: 0;
  font-family: var(--font-primary);
}

/* Светлая плашка с посетителями */
#pun-stats #onlinelist,
#pun-stats .onlinelist,
#pun-stats .users_24h {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  padding: var(--stats-padding-y) var(--stats-padding-x);

  background-color: var(--forum-light-color);
  color: var(--stats-background);

  font-size: var(--font-size-small);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

#pun-stats .users_24h,
#pun-stats #onlinelist:last-child,
#pun-stats .onlinelist:last-child {
  border-radius: 0 0 var(--stats-radius) var(--stats-radius);
}

#pun-stats .container {
  width: 100%;
  min-height: var(--stats-bar-height);
  padding: 0;
  background-color: var(--stats-background);
  border-radius: 0 0 var(--stats-radius) var(--stats-radius);
}

#pun-stats ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 var(--stats-gap);
  min-height: var(--stats-bar-height);
  margin: 0;
  padding: 0;
  list-style: none;
}

#pun-stats .item1,
#pun-stats .item2,
#pun-stats .item4 {
  margin: 0;
  color: var(--forum-light-color);
  font-size: var(--font-size-small);
  font-weight: 400;
  text-transform: lowercase;
  line-height: var(--stats-bar-height);
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

#pun-stats a {
  color: var(--link-color);
  font: inherit;
}

/* Скрываем исходные подписи, но сохраняем вложенные элементы */
#pun-stats :is(#onlinelist, .onlinelist) > div {
  font-size: 0;
}

/* Слово «активны» */
#pun-stats :is(#onlinelist, .onlinelist) > div > a:first-child {
  color: #000;
  font-size: var(--font-size-online);
  font-weight: 400;
  line-height: 1.5;
  text-transform: lowercase;
  text-shadow: none;
}

/* Количество гостей и пользователей */
#pun-stats :is(#onlinelist, .onlinelist) > div > strong:nth-of-type(1),
#pun-stats :is(#onlinelist, .onlinelist) > div > strong:nth-of-type(2) {
  color: #000;
  font-size: var(--font-size-small);
  font-weight: 400;
  line-height: 1.5;
}

/* Восстанавливаем нужные подписи */
#pun-stats :is(#onlinelist, .onlinelist)
  > div
  > strong:nth-of-type(1)::before {
  content: "\00a0(гостей: ";
}

#pun-stats :is(#onlinelist, .onlinelist)
  > div
  > strong:nth-of-type(1)::after {
  content: ", пользователей: ";
}

#pun-stats :is(#onlinelist, .onlinelist)
  > div
  > strong:nth-of-type(2)::after {
  content: "): ";
}

/* Скрываем число рекорда */
#pun-stats :is(#onlinelist, .onlinelist) > div > strong:nth-of-type(3) {
  display: none;
}

/* Возвращаем размер текста списку пользователей */
#pun-stats :is(#onlinelist, .onlinelist) > div > span {
  font-size: var(--font-size-small);
  line-height: 1.5;
}

/* Нижняя тень у имён */
#pun-stats :is(#onlinelist, .onlinelist) > div > span a {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* Пересобираем строку «Посетили за сутки», убирая гостей. */
#pun-stats .users_24h > div:first-child {
  font-size: 0;
}

/* Скрываем исходный заголовок, подписи и количество гостей. */
#pun-stats .users_24h > div:first-child > * {
  display: none;
}

#pun-stats .users_24h > div:first-child::before {
  content: "посетили за сутки";
  color: #000;
  font-size: var(--font-size-large);
  font-weight: 400;
  line-height: 1.5;
}

/* Второе число — зарегистрированные пользователи. */
#pun-stats .users_24h > div:first-child > strong:nth-of-type(2) {
  display: inline;
  color: #000;
  font-size: var(--font-size-small);
  font-weight: 400;
  line-height: 1.5;
}

#pun-stats .users_24h > div:first-child > strong:nth-of-type(2)::before {
  content: "\00a0(пользователей: ";
}

#pun-stats .users_24h > div:first-child > strong:nth-of-type(2)::after {
  content: "): ";
}

/* Последний span содержит имена пользователей. */
#pun-stats .users_24h > div:first-child > span:last-of-type {
  display: inline;
  font-size: var(--font-size-small);
  line-height: 1.5;
}

/* Зарезервированная область баннеров */
.banners-shell {
  position: relative;
  width: var(--banners-width);
  height: var(--banners-height);
}

.banners {
  display: block !important;
  width: 100%;
  height: var(--banners-height);
  margin: 0;
  padding: var(--banners-padding);

  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Полностью скрываем нативный скроллбар. Прокрутка остаётся доступной. */
.banners::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Четыре баннера в строке, две строки без прокрутки */
.banners-inside {
  display: grid;
  grid-template-columns: repeat(4, var(--banner-width));
  justify-content: start;
  gap: var(--banners-row-gap) var(--banners-column-gap);
  min-height: 90px;
}

.banners a,
.banners img {
  display: block;
  width: var(--banner-width);
  height: var(--banner-height);
}

.banners img {
  object-fit: cover;
}

/* Небольшая анимация */
.banners a {
  opacity: 0.75;
  transition: opacity var(--transition-fast);
}

.banners a:hover,
.banners a:focus-visible {
  opacity: 1;
}

/* Собственный скроллбар, который создаётся JavaScript. */
.banners-scrollbar {
  position: absolute;
  top: 16px;
  right: var(--banners-scrollbar-offset);
  bottom: 16px;
  width: var(--banners-scrollbar-width);
  border-radius: 999px;
  background-color: transparent;
}

.banners-scrollbar[hidden] {
  display: none;
}

.banners-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: var(--banners-scrollbar-thumb-min-height);
  border-radius: inherit;
  background-color: var(--link-color);
  cursor: grab;
  touch-action: none;
}

.banners-scrollbar-thumb:active {
  cursor: grabbing;
}

/* Кнопки прокрутки */
.scroll-controls {
  position: fixed;
  top: 50%;
  z-index: 1000;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  transform: translateY(-50%);
}

.scroll-control {
  display: block;

  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;

  background: transparent;
  appearance: none;
  -webkit-appearance: none;

  line-height: 0;
  cursor: pointer;
  opacity: 0.7;

  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.scroll-control img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  border: 0;
  background: transparent;
}

.scroll-control:hover,
.scroll-control:focus-visible {
  outline: 0;
  box-shadow: none;
  opacity: 1;
  transform: scale(1.05);
}

.scroll-control:disabled {
  pointer-events: none;
  opacity: 0.25;
}

/* Учитываем системную настройку уменьшенной анимации. */
@media (prefers-reduced-motion: reduce) {
  #pun a,
  .banners a,
  .scroll-control {
    transition: none;
  }
}

/* Запасной способ сохранить пропорции шапки в старых версиях Safari */
@supports not (aspect-ratio: 1 / 1) {
  #pun-title {
    height: 0;
    padding-top: 48.76%;
  }
}