/* ═══════════════════════════════════════════════════════════════════════════
   ОДНА КАРТОЧКА НА ВЕСЬ САЙТ                                    yzcard:one
   ═══════════════════════════════════════════════════════════════════════════
   ЗАЧЕМ ЭТОТ ФАЙЛ. Карточка персонажа рисовалась в четырёх местах и четырьмя
   разными стилями: hub.css (.pc), browse.css (.pvb-card), showcase.css
   (.sc-card), club.css (.cl-card) плюс встроенный <style> в landing.php.
   Разметка у них давно одна и та же — .ph / .bd / .nm / .tg / .go — а вид
   разошёлся. Человек, проходящий каталог → категорию → вселенную, видел три
   разных сайта.

   ПОЧЕМУ СТИЛЬ, А НЕ ПЕРЕПИСЫВАНИЕ ШАБЛОНОВ. Четырнадцать мест выдают почти
   одинаковый HTML. Переписать четырнадцать шаблонов — это четырнадцать шансов
   уронить страницу ради изменения, которое целиком помещается в стиль.
   Поэтому здесь один файл, подключается последним и приводит все семейства к
   одному виду. Ссылки при этом НЕ трогаются: куда карточка ведёт — решает
   шаблон, и это решение осознанное (см. yzseo:cardhref).

   ЧТО ЗА ВИД. Портрет 3:4 во всю карточку, имя лежит НА фотографии поверх
   затемнения, подпись раскрывается по наведению. Прежний вид — квадратный
   снимок с отступом внутри рамки и подпись отдельным блоком под ним — это
   карточка товара из каталога магазина; по ней страницу и опознают как
   старую. Здесь же карточка — это лицо, а не коробочка с лицом.

   ЧТО С ТЕМАМИ. Карточка почти не зависит от палитры: тёмное затемнение и
   белый текст лежат на самой фотографии и работают одинаково в янтарной,
   облачной и полуночной теме. Переменные ниже нужны только для рамки и для
   заглушки без портрета, и у каждой есть запасное значение — файл подключается
   и на страницах со своим набором токенов (hub.css: --card/--line/--acc), и на
   страницах общего набора (tokens.css: --s2/--hair/--hero).
   ═══════════════════════════════════════════════════════════════════════════ */

.grid, .pvb-grid, .sc3-grid, .cl-grid, .cast, .pf-same-grid, .sc-rail,
.grid > li.pc > a:not(.ch-p), .grid > a.pc, .pvb-card, .sc-card, .cl-card, .ch,
.pf-same-grid > li > a:not(.ch-p) {
  --yzc-line: var(--line, var(--hair, rgba(255,255,255,.10)));
  /* Место под портрет всегда тёмное — во всех трёх темах. Это не поверхность
     интерфейса, а гнездо для фотографии: в облачной теме светлая заглушка
     читалась бы как «карточка сломалась», а буква на ней просто исчезла бы. */
  --yzc-plate: #1b1917;
  /* Акцент вселенной, если он есть; иначе фирменная терракота. */
  --yzc-hi: var(--fan-hi, var(--acc, var(--hero, #d97757)));
}

/* ── сетка ────────────────────────────────────────────────────────────────
   Зазор по вертикали заметно больше горизонтального. При равных подпись
   прилипает к следующему ряду и сетка читается как каша — это тот самый
   признак «одинаковые плитки с одинаковыми отступами», по которому страницу
   и относят к прошлому десятилетию. */
.grid, .pvb-grid, .sc3-grid, .cl-grid, .cast, .pf-same-grid {
  list-style: none;
  display: grid;
  column-gap: 14px;
  row-gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
/* padding обнуляем только у списков: у <ul> он от браузера, под маркеры, и его
   надо снять. У .sc3-grid это <div>, и на его padding держатся поля страницы —
   обнулив его заодно, мы пустили бы сетку встык к краю экрана, пока все
   соседние блоки стоят с отступом в шестнадцать пикселей. */
ul.grid, ul.cast, ul.pf-same-grid { padding: 0; margin-left: 0; margin-right: 0; }
@media (max-width: 560px) {
  .grid, .pvb-grid, .sc3-grid, .cl-grid, .cast, .pf-same-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 22px;
  }
}
/* Полка листается вбок — сетку ей навязывать нельзя, а карточку можно. */
.sc-rail > .sc-card { flex: 0 0 auto; width: 190px; }
@media (max-width: 560px) { .sc-rail > .sc-card { width: 150px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   ПОЧЕМУ ВЕЗДЕ :not(.ch-p)                                    yzcard:notchp
   ───────────────────────────────────────────────────────────────────────────
   Ярлык «о герое» — это ВТОРАЯ ссылка внутри той же ячейки списка. Значит,
   селектор «li > a» ловит и карточку, и ярлык: ярлык получал пропорцию 3:4,
   тёмную заливку и скруглённый угол и вставал под карточкой второй, точно
   такой же на вид, но пустой — а вело из него на того же персонажа, что
   изображён выше. Ровно это и увидел заказчик.

   Правило на будущее: в этом файле нельзя писать «li > a». Только «li > a
   с явным классом» или «li > a:not(.ch-p)». Проверка на стенде обязана
   рисовать ярлык во ВСЕХ семействах карточек, а не в одном — прошлый прогон
   не поймал ошибку именно потому, что ярлык стоял только у витрины.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── сама карточка ────────────────────────────────────────────────────── */
.grid > li.pc > a:not(.ch-p), .grid > a.pc, .pvb-card, .sc-card, .cl-card, .ch,
.pf-same-grid > li > a:not(.ch-p) {
  position: relative;
  display: block;
  /* Портрет вертикальный: человек в кадре — вертикальная фигура, и квадрат
     всегда режет его либо по плечам, либо по макушке. */
  aspect-ratio: 3 / 4;
  /* hub.css ставит на карточке height:100%, и он пережил бы пропорцию:
     заданная высота сильнее aspect-ratio. Явное auto возвращает ей власть. */
  height: auto;
  border-radius: 20px;
  overflow: hidden;
  /* outline вместо border: рамка не входит в размер и не сдвигает содержимое
     при наведении — сетка не дрожит. */
  border: 0;
  outline: 1px solid var(--yzc-line);
  outline-offset: -1px;
  background: var(--yzc-plate);
  padding: 0;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), outline-color .24s,
              opacity .28s, filter .28s, box-shadow .3s;
}

/* Слой с портретом. У разных шаблонов он то <img> напрямую, то обёртка .ph —
   раскладываем оба на всю карточку, чтобы дальше правила были общими. */
.grid > li.pc > a:not(.ch-p) > img, .pf-same-grid > li > a:not(.ch-p) > img, .ch > img,
.pc > .ph, .pvb-card > .ph, .sc-card > .ph, .cl-card > .ph,
.grid > li.pc > a:not(.ch-p) > .mono, .ch > .plate,
.pc > .ph.mono, .pvb-card > .ph.mono, .sc-card > .ph.mono, .cl-card > .ph.mono {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--yzc-plate);
}
.pc > .ph > img, .pvb-card > .ph > img, .sc-card > .ph > img, .cl-card > .ph > img,
.grid > li.pc > a:not(.ch-p) > img, .pf-same-grid > li > a:not(.ch-p) > img, .ch > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Снимки приходят из разных генераций и разных источников. Единая мягкая
     коррекция сводит их к одному тону, и сетка перестаёт выглядеть как
     склад чужих картинок. На наведении снимается — портрет оживает. */
  filter: brightness(.97) contrast(1.06) saturate(.94);
  transition: filter .34s, transform .5s cubic-bezier(.22, 1, .36, 1);
}
/* Заглушка без портрета: не «картинка не загрузилась», а осмысленная плашка. */
.grid > li.pc > a:not(.ch-p) > .mono, .ch > .plate,
.pc > .ph.mono, .pvb-card > .ph.mono, .sc-card > .ph.mono, .cl-card > .ph.mono {
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-family задаём явно: старые листы ставили её шорткатом font:, а он
     сбрасывает семейство целиком — без этой строки заглушка осталась бы
     засечной посреди гротескной карточки. */
  font: 800 46px/1 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: rgba(255, 255, 255, .16);
  background: linear-gradient(150deg,
              color-mix(in srgb, var(--yzc-hi) 30%, var(--yzc-plate)),
              var(--yzc-plate) 92%);
}

/* ── затемнение под надписью ──────────────────────────────────────────────
   У витрины вселенных под него есть отдельный <span class="scrim">, у прочих
   шаблонов нет — рисуем псевдоэлементом, чтобы разметку не трогать.
   Не сплошная заливка и не «opacity: .8» на всей картинке: тёмное только
   снизу, лицо остаётся в полном свете. */
.grid > li.pc > a:not(.ch-p)::after, .grid > a.pc::after, .pvb-card::after,
.sc-card::after, .cl-card::after, .pf-same-grid > li > a:not(.ch-p)::after, .ch .scrim {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(8, 7, 6, .94) 0%, rgba(8, 7, 6, .72) 26%,
              rgba(8, 7, 6, .18) 52%, transparent 76%);
}

/* ── надписи ──────────────────────────────────────────────────────────────
   .bd у старых шаблонов был блоком ПОД снимком со своими отступами и фоном —
   всё это снимаем и кладём его на фотографию. */
.pc > .bd, .pvb-card > .bd, .sc-card > .bd, .cl-card > .bd, .ch .meta {
  position: absolute;
  inset: auto 12px 12px;
  display: block;
  z-index: 2;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
/* У витрины и «похожих» надписи — прямые дети ссылки. */
.grid > li.pc > a:not(.ch-p) > .pn, .grid > li.pc > a:not(.ch-p) > .pt,
.pf-same-grid > li > a:not(.ch-p) > span {
  position: relative;
  z-index: 2;
  display: block;
  padding: 0;
  margin: 0;
}
.grid > li.pc > a:not(.ch-p) { display: flex; flex-direction: column; justify-content: flex-end; }
.grid > li.pc > a:not(.ch-p) > .pn, .grid > li.pc > a:not(.ch-p) > .pt { margin-left: 12px; margin-right: 12px; }
.grid > li.pc > a:not(.ch-p) > .pt { margin-bottom: 12px; }
.grid > li.pc > a:not(.ch-p) > .pn:last-child { margin-bottom: 12px; }
.pf-same-grid > li > a:not(.ch-p) {
  display: flex; flex-direction: column; justify-content: flex-end;
}
.pf-same-grid > li > a:not(.ch-p) > span { margin: 0 12px 12px; }

/* Имя. Одна величина везде: имя — главное, что читают в сетке. */
.pc .nm, .pvb-card .nm, .sc-card .nm, .cl-card .nm, .ch .nm,
.grid > li.pc > a:not(.ch-p) > .pn, .pf-same-grid > li > a:not(.ch-p) > span {
  display: block;
  /* showcase.css держит на имени min-height:36px под двухстрочную подпись
     снизу. Здесь имя лежит на фотографии, и лишняя строка воздуха под ним
     читается как ошибка вёрстки. */
  min-height: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  text-wrap: balance;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
/* Метка над именем — фракция во вселенной. Мелкая моноширинная строка
   разбивает однообразие: в сетке нужен второй типографический голос. */
.ch .fac {
  display: block;
  font: 600 8.5px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--yzc-hi);
  margin-bottom: 7px;
}
/* Подпись раскрывается по наведению. На телефоне её нет — и это правильно:
   там она отняла бы место сразу у восьми карточек. */
.pc .tg, .pvb-card .tg, .sc-card .tg, .cl-card .tg, .ch .say,
.grid > li.pc > a:not(.ch-p) > .pt {
  display: block;
  /* min-height обязателен к обнулению, и это не перестраховка. Итоговая высота
     считается как max(min-height, min(max-height, height)) — то есть min-height
     СИЛЬНЕЕ, чем max-height:0. Старые листы держат на подписи 32–34 пикселя
     (showcase.css, browse.css, club.css, встроенный стиль посадочной), и без
     этой строки свёрнутая подпись продолжала бы занимать своё место: имя
     повисло бы много выше нижнего края, а под ним осталась бы пустота
     непонятного происхождения. */
  min-height: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .74);
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height .34s cubic-bezier(.22, 1, .36, 1), opacity .26s, margin-top .34s;
}
/* «Написать →». Раньше это была отдельная строка, всегда занимавшая место в
   каждой карточке; теперь появляется вместе с подписью — намерение читается
   в момент наведения, а не постоянно кричит с трёхсот карточек сразу. */
.pc .go, .pvb-card .go, .sc-card .go, .cl-card .go {
  display: block;
  min-height: 0;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--yzc-hi);
  transition: max-height .3s, opacity .24s, margin-top .3s;
}
/* Отметка «говорили» — единственное, что видно всегда: она отвечает на
   вопрос, который иначе требует открыть чат. */
.sc-card .sc-seen { z-index: 3; }

@media (hover: hover) {
  .grid > li.pc > a:not(.ch-p):hover, .grid > a.pc:hover, .pvb-card:hover, .sc-card:hover,
  .cl-card:hover, .ch:hover, .pf-same-grid > li > a:not(.ch-p):hover {
    transform: translateY(-5px);
    outline-color: color-mix(in srgb, var(--yzc-hi) 70%, transparent);
    box-shadow: 0 18px 50px -20px color-mix(in srgb, var(--yzc-hi) 55%, transparent);
  }
  .grid > li.pc > a:not(.ch-p):hover > img, .grid > a.pc:hover .ph > img, .pvb-card:hover .ph > img,
  .sc-card:hover .ph > img, .cl-card:hover .ph > img, .ch:hover > img,
  .pf-same-grid > li > a:not(.ch-p):hover > img {
    filter: none;
    transform: scale(1.04);
  }
  .pc:hover .tg, .pvb-card:hover .tg, .sc-card:hover .tg, .cl-card:hover .tg,
  .ch:hover .say, .grid > li.pc > a:not(.ch-p):hover > .pt {
    max-height: 5em; opacity: 1; margin-top: 7px;
  }
  .pc:hover .go, .pvb-card:hover .go, .sc-card:hover .go, .cl-card:hover .go {
    max-height: 2em; opacity: 1; margin-top: 6px;
  }
  /* Прожектор: соседи гаснут, выбранная карточка остаётся одна. Одна строка
     вместо скрипта — и это ровно то, ради чего в CSS появился :has().
     У витрины гасим ЯЧЕЙКУ, а не карточку: в ячейке лежит ещё ярлык «о герое»,
     и он должен гаснуть вместе со своей карточкой, а не светиться один. */
  .grid:has(> li.pc > a:not(.ch-p):hover) > li.pc:not(:hover),
  .grid:has(> a.pc:hover) > a.pc:not(:hover),
  .pvb-grid:has(.pvb-card:hover) .pvb-card:not(:hover),
  .sc3-grid:has(.sc-card:hover) .sc-card:not(:hover),
  .cl-grid:has(.cl-card:hover) .cl-card:not(:hover),
  .cast:has(> li:hover) > li:not(:hover),
  .pf-same-grid:has(> li:hover) > li:not(:hover) {
    /* Гасим ФИЛЬТРОМ, а не прозрачностью, и это не вкусовщина.
       Появление при прокрутке (hub.css, animation-timeline:view) держит
       fill:both, а анимация в каскаде сильнее обычного объявления — то есть
       её последний кадр opacity:1 навсегда перебил бы затемнение соседей.
       Фильтр анимация не трогает, поэтому он работает всегда. */
    filter: saturate(.45) brightness(.55);
  }
  .cast > li, .grid > li.pc, .pf-same-grid > li { transition: filter .28s; }
}

/* Клавиатура должна видеть то же, что мышь. */
.grid > li.pc > a:not(.ch-p):focus-visible, .grid > a.pc:focus-visible, .pvb-card:focus-visible,
.sc-card:focus-visible, .cl-card:focus-visible, .ch:focus-visible,
.pf-same-grid > li > a:not(.ch-p):focus-visible {
  outline: 2px solid var(--yzc-hi);
  outline-offset: 2px;
}
.grid > li.pc > a:not(.ch-p):focus-visible > .pt, .pc:focus-visible .tg, .pvb-card:focus-visible .tg,
.sc-card:focus-visible .tg, .cl-card:focus-visible .tg, .ch:focus-visible .say {
  max-height: 5em; opacity: 1; margin-top: 7px;
}

/* Уважение к системной настройке: движение выключено — карточка просто
   не двигается, но всё так же полностью работает. */
@media (prefers-reduced-motion: reduce) {
  .grid > li.pc > a:not(.ch-p), .grid > a.pc, .pvb-card, .sc-card, .cl-card, .ch,
  .pf-same-grid > li > a:not(.ch-p),
  .pc .ph > img, .pvb-card .ph > img, .sc-card .ph > img, .cl-card .ph > img,
  .ch > img, .grid > li.pc > a:not(.ch-p) > img {
    transition: none;
  }
  .grid > li.pc > a:not(.ch-p):hover, .grid > a.pc:hover, .pvb-card:hover, .sc-card:hover,
  .cl-card:hover, .ch:hover, .pf-same-grid > li > a:not(.ch-p):hover { transform: none; }
}

/* ── частные случаи ──────────────────────────────────────────────────────
   Десятка: слева крупная цифра, карточка заезжает на неё. Ряд — флексбокс, и
   карточке в нём нужна опора: все её дети лежат абсолютно, собственной ширины
   у неё нет, и без flex-basis она схлопывается в ноль. */
.sc-rank { display: flex; align-items: flex-start; }
.sc-rank > .sc-card { flex: 1 1 0; width: auto; min-width: 0; }
.sc3-grid .sc-rank .sc-card { flex: 1 1 0; width: auto; min-width: 0; }

/* Десятка сидит в .sc3-grid и попала бы под общее правило в 190 пикселей. Но
   слева от карточки стоит цифра кеглем до 104 пунктов, и showcase3.css не зря
   требовал для этого ряда 232: у́же — и цифра ложится на лицо. */
@media (min-width: 1000px) {
  .sc3-rankgrid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
}

/* Промо-блок в справочнике просил колонки по 128 пикселей — под квадрат это
   было нормально, под портрет становится тесно: имя в 16 пунктов не помещается
   в такую ширину. Поднимаем нижнюю границу, число колонок подберётся само. */
.promo .grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
@media (max-width: 560px) {
  .promo .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Скелетон каталога держал 158/234 под квадратную карточку с подписью снизу.
   Теперь карточка 3:4, и расхождение видно как рывок в момент подстановки —
   ровно тот сдвиг макета, ради борьбы с которым скелетон и рисуют. */
.cl-grid .pv-skel, .pvb-grid .pv-skel, .sc3-grid .pv-skel {
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ЯРЛЫК «О ГЕРОЕ»                                              yzcard:secondary
   ───────────────────────────────────────────────────────────────────────────
   Карточка ведёт в чат — это главное действие, и оно одинаково на всём сайте.
   Но витрины (вселенные, категории, темы) — точки входа с поиска, и их работа
   раздавать обход на страницы персонажей. Отдельная маленькая ссылка решает
   обе задачи сразу: робот видит её в разметке всегда, человек — в углу.

   Вложить ссылку в ссылку нельзя, поэтому позиционируется ячейка списка, а
   карточка занимает её целиком. Ярлык лежит поверх в правом верхнем углу —
   там, где нет ни лица, ни подписи.

   На устройствах с мышью ярлык проявляется при наведении: постоянная плашка
   на двухстах карточках — шум. На сенсорных наведения нет, поэтому там он
   виден всегда, но приглушён.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Ячейка — только опора для ярлыка: у неё не должно быть ни рамки, ни полей.
   Класс .pc в старых листах означал то карточку, то ячейку, и рамка от одного
   толкования доставалась другому — ячейка оказывалась на два пикселя выше
   карточки, и ряд ехал. */
.cast > li, .grid > li.pc, .pf-same-grid > li {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  list-style: none;
}
/* Селектор намеренно a.ch-p, а не .ch-p. hub.css держит правило «.pc a»
   (класс + тег), и оно сильнее одного класса: ярлык — тоже <a> внутри .pc,
   и он забирал себе height:100%, рамку, фон и скругление карточки. То есть
   на витринах, в справочнике и на 404 ярлык вытягивался во всю высоту
   карточки невидимой плашкой поверх портрета. Тег в селекторе уравнивает
   вес, а порядок подключения решает спор в пользу этого файла.
   Размеры сбрасываем явно по той же причине. */
a.ch-p {
  position: absolute;
  width: auto;
  height: auto;
  border: 0;
  aspect-ratio: auto;
  overflow: visible;
  display: inline-block;
  flex: none;
  top: 9px;
  right: 9px;
  z-index: 4;
  padding: 4px 9px;
  border-radius: 999px;
  font: 600 10.5px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .82);
  background: rgba(10, 9, 8, .52);
  /* Подложка размывает то, что под ней: на светлом кадре плашка иначе
     сливается с фоном ровно там, где она нужнее всего. */
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  outline: 1px solid rgba(255, 255, 255, .14);
  outline-offset: -1px;
  text-decoration: none;
  opacity: .55;
  transition: opacity .22s, color .22s, background-color .22s;
}
a.ch-p:hover, a.ch-p:focus-visible {
  opacity: 1;
  color: #fff;
  background: rgba(10, 9, 8, .78);
}
a.ch-p:focus-visible { outline: 2px solid var(--yzc-hi); outline-offset: 2px; }
@media (hover: hover) {
  /* Ярлык ПРИГЛУШЁН, но не спрятан, и это решение про поиск, а не про вкус.
     opacity:0 — классический признак ссылки, которую поисковик засчитывает
     вполсилы или не засчитывает вовсе, а это единственная ссылка витрины на
     страницу персонажа: именно ею живёт обход трёхсот профилей. Поэтому она
     видна всегда, просто негромко, и проявляется под курсором. */
  .ch-p { opacity: .34; }
  li:hover > .ch-p { opacity: .9; }
  li:hover > a.ch-p:hover, a.ch-p:focus-visible { opacity: 1; }
}

/* Имя персонажа внутри ярлыка: видно его только программе чтения с экрана и
   поисковому роботу. Текст ссылки «о герое» одинаков на всех сорока восьми
   карточках страницы — как якорь он не значит ничего. Имя внутри возвращает
   ссылке смысл, ничего не добавляя на экран. */
a.ch-p i {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}