/* Wepster Pay (/pay/): 10. Підключення. Токени, основа й телефон — style/pay.css.
   П'ять способів на темному полі: від «без коду» до «для розробників і AI». На широкому екрані — сітка 4 колонки
   (дві короткі картки стоять стовпчиком), на планшеті — 2 колонки, ≤992px — карусель.
   Віджет — темне вікно коду з «Скопіювати»; API — довідник із трьох методів; MCP — розмова з AI-асистентом (три перемикачі).
   Живе: поява карток сходинкою, розмова MCP — js/pay-form.js; копіювання віджета — initCopy у js/pay.js. */

/* =====================================================================
   10. ПІДКЛЮЧЕННЯ
   ===================================================================== */

.py-connect {
  --cx-inset: var(--c-phone-bg);
  --cx-bar: #262626;
  --cx-edge: rgba(255, 255, 255, .08);
  --cx-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* --c-accent і --c-loss у вигляді R, G, B: для прозорих підкладок і ліній */
  --cx-mint: 94, 242, 160;
  --cx-loss: 242, 113, 28;
  --cx-fail-ink: #ffb98a;

  /* підсвітка синтаксису; на #1c1c1c кожен колір має контраст не нижче 4.5:1 */
  --tk-p: #9d9d9a;
  --tk-t: var(--c-accent);
  --tk-a: #ecece6;
  --tk-s: #f3d9a4;
  --tk-x: #d3d3cd;
}

/* глобальна жовта «пляма» кнопок сайту (main.css) тут зайва */
.py-connect button:not(.x):hover::before,
.py-connect button:not(.x):active::before {
  content: none;
}

/* ---------- Шкала: від «без коду» до «для розробників і AI» ----------
   Статичний трек між підписами: чистий градієнт від приглушеного до м'ятного, стрілка без сяйва.
   Підписи не стискаються й не перекриваються (трек займає лише проміжок між ними). */

.py-scale {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  color: var(--c-soft);
  font-size: var(--py-fs-5);
  font-weight: 700;
}

.py-scale > span {
  flex: none;
}

.py-scale-track {
  position: relative;
  flex: 1 1 0;
  min-width: 24px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(var(--cx-mint), .5) 60%, rgb(var(--cx-mint)));
}

.py-scale-track::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -3px;
  border: 7px solid transparent;
  border-left: 11px solid rgb(var(--cx-mint));
  border-right: 0;
}

/* ---------- Сітка карток ---------- */

.py-ways {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr) auto;
  gap: 12px;
  margin-top: 24px;
}

/* ряд 1: дві короткі картки стовпчиком ліворуч, віджет праворуч на висоту обох */
.py-way--link {
  grid-area: 1 / 1 / 2 / 6;
}

.py-way--wep {
  grid-area: 2 / 1 / 3 / 6;
}

.py-way--code {
  grid-area: 1 / 6 / 3 / 13;
}

.py-way--api {
  grid-area: 3 / 1 / 4 / 7;
}

.py-way--mcp {
  grid-area: 3 / 7 / 4 / 13;
}

.py-way {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: clamp(20px, 1.9vw, 28px);
  border-radius: var(--py-r-card);
  background: var(--c-panel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  font-variant-numeric: tabular-nums;
}

.py-way > p {
  color: var(--c-soft);
  font-size: var(--py-fs-4);
  line-height: 1.45;
}

/* підсумок картки: знизу, на одній лінії з низом вставок сусідніх карток */
.py-way > .py-way-win {
  margin-top: auto;
  padding-top: 18px;
  color: var(--c-gain);
  font-weight: 700;
  line-height: 1.3;
}

/* вікна (код, API, сеанс) тягнуться до низу картки: верх і низ вікон сусідніх карток збігаються */
.py-way > .py-code {
  flex: 1 1 auto;
  margin-top: 4px;
}

/* API і MCP стоять в одному ряду: на вужчих екранах підпис резервує 2 рядки, щоб вікна стартували з однієї лінії */
@media (max-width: 1279px) {
  .py-way--api > p,
  .py-way--mcp > p {
    min-height: 2lh;
  }
}

/* короткі картки першого ряду: крупніший підпис і підсумок, щоб порожнечі було менше */
@media (min-width: 1280px) {
  .py-way--link > p:not(.py-way-win),
  .py-way--wep > p:not(.py-way-win) {
    font-size: 18px;
  }

  .py-way--link > .py-way-win,
  .py-way--wep > .py-way-win {
    font-size: 20px;
  }
}

/* ---------- Вікно коду ---------- */

.py-code {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 20px;
  background: var(--cx-inset);
  box-shadow: 0 0 0 1px var(--cx-edge), 0 28px 44px -28px rgba(0, 0, 0, .8);
}

.py-code-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 12px 0 24px;
  background: var(--cx-bar);
}

.py-code-file {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  white-space: nowrap;
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

.py-code-file .py-ic {
  color: var(--c-accent);
}

.py-ic {
  flex: none;
  width: 16px;
  height: 16px;
}

.py-code-lang {
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: var(--c-soft);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
}

/* вузьке вікно: спершу мітка мови, потім значок файла поступаються місцем кнопці й назві */
@container (max-width: 360px) {
  .py-code-lang {
    display: none;
  }
}

@container (max-width: 300px) {
  .py-code-bar {
    gap: 8px;
    padding-left: 14px;
  }

  .py-code-file .py-ic {
    display: none;
  }
}

/* зовсім вузьке вікно (екрани 320px): кнопка лишається значком, підпис доступний читачу екрана */
@container (max-width: 240px) {
  .py-copy-lbl {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .py-ch .py-copy {
    padding: 0 11px;
  }
}

/* «Скопіювати»: значок і підпис міняються на місці, ширина кнопки не стрибає (підписи лежать в одній клітинці) */
.py-ch .py-copy {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 8px;
  height: 34px;
  padding: 0 14px 0 12px;
  border-radius: var(--py-r-chip);
  background: rgba(255, 255, 255, .1);
  color: var(--c-ink);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
  transition: background-color .2s ease, color .2s ease, scale .16s var(--py-ease);
}

.py-ch .py-copy:hover {
  background: rgba(var(--cx-mint), .18);
  color: var(--c-accent);
}

.py-ch .py-copy:active {
  scale: .96;
}

.py-ch .py-copy:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.py-copy-i {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
}

.py-copy-i > * {
  grid-area: 1 / 1;
  transition: opacity .2s ease, transform .4s var(--py-ease);
}

.py-copy-ok {
  opacity: 0;
  transform: scale(.4) rotate(-20deg);
}

.py-copy-lbl {
  display: inline-grid;
}

.py-copy-lbl > span {
  grid-area: 1 / 1;
  transition: opacity .2s ease, transform .4s var(--py-ease);
}

.py-copy-lbl > span:not(:first-child) {
  opacity: 0;
  transform: translateY(9px);
}

.py-ch .py-copy[data-state="ok"],
.py-ch .py-copy[data-state="ok"]:hover {
  background: var(--c-btn-bg);
  color: var(--c-btn-ink);
}

.py-ch .py-copy[data-state="fail"],
.py-ch .py-copy[data-state="fail"]:hover {
  background: rgba(var(--cx-loss), .2);
  color: var(--cx-fail-ink);
}

.py-copy[data-state="ok"] .py-copy-ic {
  opacity: 0;
  transform: scale(.4) rotate(20deg);
}

.py-copy[data-state="ok"] .py-copy-ok {
  opacity: 1;
  transform: none;
}

.py-copy[data-state="ok"] .py-copy-lbl > :first-child,
.py-copy[data-state="fail"] .py-copy-lbl > :first-child {
  opacity: 0;
  transform: translateY(-9px);
}

.py-copy[data-state="ok"] .py-copy-lbl > :nth-child(2),
.py-copy[data-state="fail"] .py-copy-lbl > :nth-child(3) {
  opacity: 1;
  transform: none;
}

/* код віджета: кожен логічний рядок лишається одним візуальним; у вузькій картці вікно гортається вбік */
.py-code-body {
  flex: 1 1 auto;
  margin: 0;
  padding: 22px 24px 26px;
  overflow-x: auto;
  color: var(--tk-x);
  font-family: var(--cx-mono);
  font-size: 13.5px;
  font-variant-ligatures: none;
  line-height: 1.7;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
  scrollbar-width: thin;
  tab-size: 2;
  white-space: pre;
}

.py-code-body:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -4px;
  border-radius: 20px;
}

.py-code-body code {
  font: inherit;
}

.py-ln {
  display: block;
}

.py-ln--gap {
  height: 12px;
  overflow: hidden;
}

.tk-p {
  color: var(--tk-p);
}

.tk-t {
  color: var(--tk-t);
}

.tk-a {
  color: var(--tk-a);
}

.tk-s {
  color: var(--tk-s);
}

.tk-x {
  color: var(--tk-x);
}

.py-code-body ::selection {
  background: rgba(var(--cx-mint), .3);
  color: #fff;
}

/* ---------- Умовні позначки методів API ---------- */

.py-m {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 24px;
  padding: 0 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  color: var(--c-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .05em;
}

.py-m--post {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

.py-m--ev {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(var(--cx-mint), .6);
  color: var(--c-accent);
}

/* ---------- API: довідник ---------- */

.py-eps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.py-ep {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--cx-inset);
  transition: background-color .2s ease;
}

.py-ep:hover {
  background: var(--cx-bar);
}

.py-ep-t {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.py-ep-path {
  overflow: hidden;
  color: var(--c-ink);
  font-family: var(--cx-mono);
  font-size: 14.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.py-ep-d {
  color: var(--c-soft);
  font-size: var(--py-fs-5);
  line-height: 1.35;
}

.py-ch .py-doc {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: 4px;
  border-radius: 8px;
  color: var(--c-soft);
  font-size: var(--py-fs-5);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .25);
  text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.py-ch .py-doc .py-ic {
  transition: transform .3s var(--py-ease);
}

.py-ch .py-doc:hover {
  color: var(--c-ink);
  text-decoration-color: currentcolor;
}

.py-ch .py-doc:hover .py-ic {
  transform: translateX(3px);
}

.py-ch .py-doc:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* ---------- MCP: розмова з асистентом ---------- */

.py-cx {
  container-type: inline-size;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin-top: 4px;
}

.py-ai {
  flex: none;
  width: 20px;
  height: 20px;
}

/* логотипи сумісних асистентів: тихий підпис і три однакові світлі плитки, нічого не натискається */
.py-as {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.py-as-cap {
  margin: 0;
  color: var(--c-soft);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.py-as-list {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.py-as-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-soft);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.py-as-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #f4f4f1;
}

.py-as-tile .py-ai {
  width: 22px;
  height: 22px;
}

/* вузька картка: підписи під плитками, щоб три знаки вмістилися в ряд */
@container (max-width: 340px) {
  .py-as-item {
    flex-direction: column;
    gap: 6px;
  }
}

.py-cx-win {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--cx-inset);
  box-shadow: 0 0 0 1px var(--cx-edge);
}

.py-cx-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  background: var(--cx-bar);
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 700;
}

.py-cx-name {
  flex: 1 1 auto;
  white-space: nowrap;
}

@container (max-width: 340px) {
  .py-cx-on {
    display: none;
  }
}

.py-cx-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--c-soft);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.py-cx-link b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
}

.py-cx-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 20px 20px 22px;
  font-size: 14.5px;
  line-height: 1.4;
}

.py-cx-body > p,
.py-cx-turn > p {
  margin: 0;
}

.py-cx-m {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 18px;
}

.py-cx-m--user {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: 600;
}

.py-cx-m--bot {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  background: rgba(255, 255, 255, .08);
  color: var(--c-ink);
}

/* виклик інструмента і «друкує…» ділять одне місце: висота розмови не стрибає */
.py-cx-turn {
  display: grid;
  align-items: start;
  justify-items: start;
}

.py-cx-turn > * {
  grid-area: 1 / 1;
}

.py-cx-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  background: rgba(255, 255, 255, .08);
  opacity: 0;
  visibility: hidden;
}

.py-cx-typing b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-soft);
}

.py-cx-typing.is-on {
  opacity: 1;
  visibility: visible;
}

.py-cx-typing.is-on b {
  animation: py-cx-dot 1s ease-in-out infinite;
}

.py-cx-typing.is-on b:nth-child(2) {
  animation-delay: .15s;
}

.py-cx-typing.is-on b:nth-child(3) {
  animation-delay: .3s;
}

@keyframes py-cx-dot {
  0%,
  60%,
  100% {
    opacity: .4;
    transform: none;
  }

  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.py-cx-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 36px;
  padding: 5px 8px 5px 12px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  line-height: 1.25;
  color: var(--c-soft);
  font-size: 13px;
  font-weight: 700;
}

.py-cx-chip > span:first-of-type {
  min-width: 0;
}

.py-cx-chip > .py-ic {
  color: var(--c-accent);
}

.py-cx-st {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.py-cx-st > * {
  grid-area: 1 / 1;
}

.py-cx-st .py-cx-ok {
  width: 16px;
  height: 16px;
  color: var(--c-accent);
}

.py-cx-spin {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .2);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  opacity: 0;
}

.py-cx-ev {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 10px;
  margin-top: auto;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(var(--cx-mint), .13);
  color: var(--c-accent);
  font-weight: 700;
}

/* розмова грається один раз, коли картка в кадрі (js/pay-form.js): репліки виїжджають знизу.
   Без скрипта і при reduced motion клас is-armed не ставиться, і видно кінцевий стан */
.py-cx-win.is-armed [data-s] {
  opacity: 0;
  transform: translateY(14px);
}

.py-cx-win.is-armed [data-s].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease, transform .3s var(--py-ease);
}

.py-cx-win.is-armed .py-cx-chip:not(.is-done) .py-cx-ok {
  opacity: 0;
}

.py-cx-win.is-armed .py-cx-chip:not(.is-done) .py-cx-spin {
  opacity: 1;
  animation: py-cx-spin .8s linear infinite;
}

@keyframes py-cx-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Поява ----------
   Ховає вміст лише js/pay-form.js, коли збирається грати (блок нижче екрана, рух дозволений). */

.py-ways.is-armed .py-way {
  opacity: 0;
  transform: translateY(24px) scale(.985);
}

.py-ways.is-armed.is-run .py-way {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .85s var(--py-ease);
}

.py-ways.is-armed.is-run .py-way:nth-child(2) {
  transition-delay: .07s;
}

.py-ways.is-armed.is-run .py-way:nth-child(3) {
  transition-delay: .14s;
}

.py-ways.is-armed.is-run .py-way:nth-child(4) {
  transition-delay: .21s;
}

.py-ways.is-armed.is-run .py-way:nth-child(5) {
  transition-delay: .28s;
}

/* ---------- Адаптив ---------- */

/* планшет і невеликий ноутбук: 2 колонки, віджет на всю ширину (підпис ліворуч, вікно коду праворуч) */
@media (max-width: 1279px) {
  .py-ways {
    grid-template-rows: none;
  }

  .py-way--link,
  .py-way--wep,
  .py-way--api,
  .py-way--mcp {
    grid-area: auto / span 6;
  }

  .py-way--code {
    grid-area: auto / 1 / auto / -1;
  }

  .py-way--code > .py-code {
    max-width: 640px;
  }

  .py-way--link > p:not(.py-way-win),
  .py-way--wep > p:not(.py-way-win) {
    max-width: 24em;
  }
}

/* карусель: та сама сітка, що на широкому екрані, але колонки сталої ширини, і вона гортається вбік.
   Перша колонка — дві короткі картки стовпчиком, далі по одній, тож усі «слайди» майже однієї висоти */
@media (max-width: 992px) {
  .py-ways {
    grid-template-columns: min(82%, 340px) min(90%, 440px) min(82%, 400px) min(82%, 400px);
    grid-template-rows: 1fr 1fr;
    margin-right: calc(-1 * var(--py-x));
    padding-right: var(--py-x);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .py-ways::-webkit-scrollbar {
    display: none;
  }

  .py-way--link {
    grid-area: 1 / 1;
  }

  .py-way--wep {
    grid-area: 2 / 1;
  }

  .py-way--code {
    display: flex;
    grid-area: 1 / 2 / 3 / 3;
    align-items: stretch;
  }

  .py-way--api {
    grid-area: 1 / 3 / 3 / 4;
  }

  .py-way--mcp {
    grid-area: 1 / 4 / 3 / 5;
  }

  .py-way {
    scroll-snap-align: start;
  }

  .py-way--code > p {
    max-width: none;
  }

  .py-way--code > .py-code {
    margin-top: 4px;
  }
}

/* на вузьких телефонах вікно трохи виступає за поля картки (воно лежить над карткою): шапці вистачає місця */
@media (max-width: 480px) {
  .py-way--code > .py-code {
    margin-inline: -6px;
  }
}

@media (pointer: coarse) {
  .py-ch .py-copy {
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .py-ways.is-armed .py-way {
    opacity: 1;
    transform: none;
  }

  .py-ch .py-copy,
  .py-copy-i > *,
  .py-copy-lbl > span,
  .py-ep,
  .py-doc,
  .py-doc .py-ic {
    transition: none;
  }
}

/* =====================================================================
   ТЕЛЕФОН (до 767px)
   Один спосіб за раз: чипи (js/pay-form.js, initWaysPick) і під ними одна картка. Чому не стопка: п'ять карток
   стовпчиком це 2,5 екрана, а картки різної висоти (від двох рядків до розмови з асистентом); чому не карусель:
   вікно коду має власну горизонтальну прокрутку, а вона не може лежати всередині іншої. Без скрипта картки
   стоять стовпчиком, усе видно.
   ===================================================================== */

@media (min-width: 768px) {
  .py-pick {
    display: none;
  }
}

@media (max-width: 767px) {
  /* шкала дублює чипи: на телефоні лишається один порядок, від «без коду» до розробників */
  .py-scale {
    display: none;
  }

  /* чипи: один ряд, на всю ширину екрана, згасання лише з боку, де є ще */
  .py-pick {
    margin: 28px calc(-1 * var(--py-x)) 0;
  }

  .py-pick-row {
    position: relative;
    display: flex;
    gap: 8px;
    padding: 0 var(--py-x);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--py-x);
    scrollbar-width: none;
  }

  .py-pick-row::-webkit-scrollbar {
    display: none;
  }

  .py-pick[data-fade="end"] .py-pick-row {
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }

  .py-pick[data-fade="start"] .py-pick-row {
    mask-image: linear-gradient(90deg, transparent, #000 36px);
  }

  .py-pick[data-fade="both"] .py-pick-row {
    mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  }

  .py-connect .py-pick-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--py-tap);
    height: var(--py-tap);
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: var(--py-r-chip);
    background: rgba(255, 255, 255, .08);
    color: var(--c-ink);
    font: inherit;
    font-size: var(--py-fs-5);
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, color .2s ease, scale .16s var(--py-ease);
  }

  .py-connect .py-pick-chip:active {
    scale: .96;
  }

  /* main.css фарбує button:hover у жовте й малює жовту пляму; на дотику :hover залипає після тапу.
     Чип тримає колір свого стану в усіх станах, пляму прибрано */
  .py-connect .py-pick-chip::before,
  .py-connect .py-pick-chip::after {
    content: none !important;
  }

  .py-connect .py-pick-chip:is(:hover, :active, :focus) {
    color: var(--c-ink);
  }

  .py-connect .py-pick-chip[aria-pressed="true"]:is(:hover, :active, :focus) {
    background: var(--c-accent);
    color: var(--c-accent-ink);
  }

  .py-connect .py-pick-chip[aria-pressed="true"] {
    background: var(--c-accent);
    color: var(--c-accent-ink);
  }

  .py-connect .py-pick-chip:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
  }

  /* одна картка на екран; поява зсувом і прозорістю */
  .py-ways {
    display: block;
    margin: 16px 0 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    touch-action: pan-y;
  }

  .py-way + .py-way {
    margin-top: 12px;
  }

  .py-ways.is-pick .py-way + .py-way {
    margin-top: 0;
  }

  .py-ways.is-pick .py-way:not(.is-current) {
    display: none;
  }

  .py-ways.is-pick .py-way.is-current {
    animation: py-way-in .34s var(--py-ease) both;
  }

  .py-way {
    gap: 16px;
    padding: 24px 20px 24px;
    border-radius: var(--py-r-m);
  }

  .py-way--api > p,
  .py-way--mcp > p {
    min-height: 0;
  }

  .py-way > .py-way-win {
    padding-top: 4px;
    font-size: var(--py-fs-4);
  }

  /* код: 13px, власна прокрутка вбік не передає жест сторінці, на коді свайп між картками не ловиться */
  .py-code-body {
    padding: 16px 16px 20px;
    overscroll-behavior-x: contain;
    font-size: 13px;
  }

  .py-code-bar,
  .py-cx-bar {
    height: 56px;
    padding-left: 18px;
  }

  .py-ch .py-copy {
    height: var(--py-tap);
    min-width: var(--py-tap);
    padding: 0 16px 0 14px;
    font-size: var(--py-fs-5);
  }

  .py-cx-body {
    padding: 16px 16px 18px;
  }

  .py-ep {
    gap: 12px;
    padding: 14px;
  }

  .py-ep-path {
    font-size: 14px;
  }

  .py-m {
    min-width: 56px;
    height: 26px;
    font-size: 13px;
  }

  .py-code-lang {
    font-size: 13px;
  }

  .py-ch .py-doc {
    min-height: var(--py-tap);
    padding-right: 8px;
  }

  .py-as-cap,
  .py-as-item {
    font-size: var(--py-fs-5);
  }
}

@keyframes py-way-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .py-ways.is-pick .py-way.is-current {
    animation: none;
  }

  .py-connect .py-pick-chip {
    transition: none;
  }
}