/* ==========================================================================
   vq-player — видеоплеер в стиле «TouchDesigner / vol.00»
   стекло, треугольники, тёмные плашки-параллелограммы, Tektur
   --------------------------------------------------------------------------
   Подключение:  <link rel="stylesheet" href="vq-player/vq-player.css">
                 <script src="vq-player/vq-player.js"></script>
   Цвета и размеры — переменные ниже. Если на странице есть --ink, --display
   и --body (как в css/style.css сайта), плеер берёт их сам.
   ========================================================================== */

.vq {
  --vq-ink: var(--ink, #17191d);          /* иконки, прогресс */
  --vq-chip: #212226;                     /* тёмные плашки — как кнопки сайта */
  --vq-paper: #EDEDED;                    /* текст и иконки на тёмном */
  --vq-line: #EAEAEA;                     /* обводка стеклянного треугольника */
  --vq-bg: #17191d;                       /* поля вокруг видео и фон до загрузки */
  --vq-glass-hi: rgba(240, 240, 240, .8);
  --vq-glass-lo: rgba(205, 211, 219, .58);
  --vq-track: rgba(23, 25, 29, .14);
  --vq-buffer: rgba(23, 25, 29, .16);
  --vq-ghost: rgba(23, 25, 29, .3);
  --vq-muted: rgba(23, 25, 29, .55);
  --vq-display: var(--vq-font, var(--display, inherit));   /* время, индикаторы */
  --vq-text: var(--body, inherit);                         /* подсказки, ошибка */
  --vq-gap: 14px;                         /* отступ панели от краёв видео */
  --vq-bar-h: 56px;
  --vq-slant: 22px;                       /* скос торцов панели */
  --vq-big-w: clamp(96px, 20cqw, 300px);  /* ширина стеклянного треугольника */
  --vq-ease: cubic-bezier(.16, 1, .3, 1);
  --vq-spring: cubic-bezier(.34, 1.56, .64, 1);

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--vq-ar, 16 / 9);
  overflow: hidden;
  background: var(--vq-bg);
  color: var(--vq-ink);
  font-family: var(--vq-display);
  font-size: 14px;
  line-height: 1;
  container-type: inline-size;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
}
.vq *, .vq *::before, .vq *::after { box-sizing: border-box; }
.vq.is-ring { outline: 2px solid var(--vq-chip); outline-offset: -4px; }   /* фокус с клавиатуры (Tab) */
.vq[data-ui="off"][data-state="playing"],
.vq[data-ui="off"][data-state="playing"] * { cursor: none; }

.vq > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent;
}
/* data-fit="cover": видео заполняет блок целиком (как секция плеера на сайте) */
.vq[data-fit="cover"] { aspect-ratio: auto; height: 100%; }
.vq[data-fit="cover"] > video { object-fit: cover; }

/* во весь экран видео показывается целиком; цвет полей: --vq-fs-bg */
.vq:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; background: var(--vq-fs-bg, var(--vq-bg)); }
.vq:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; background: var(--vq-fs-bg, var(--vq-bg)); }
.vq:fullscreen > video { object-fit: contain; }
.vq:-webkit-full-screen > video { object-fit: contain; }

/* canvas для осколков — поверх всего, клики не ловит */
.vq-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

/* ---------------------------------------------------------------- кнопки */
:where(.vq) button {
  font: inherit;
  color: inherit;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.vq-btn {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--vq-ink);
  cursor: pointer;
  outline: none;
  transition: scale .45s var(--vq-spring), color .18s;
}
/* тёмная плашка-параллелограмм под иконкой — как кнопки сайта */
.vq-btn::before {
  content: "";
  position: absolute;
  inset: 4px -3px;
  background: var(--vq-chip);
  clip-path: polygon(0 0, 76% 0, 100% 100%, 24% 100%);
  opacity: 0;
  transform: scale(.45);
  transition: transform .45s var(--vq-spring), opacity .16s;
}
.vq-btn > svg { position: relative; width: 24px; height: 24px; overflow: visible; }
.vq-btn:focus-visible { color: var(--vq-paper); }
.vq-btn:focus-visible::before { opacity: 1; transform: none; }
.vq-btn:active { scale: .88; transition-duration: .08s; }
@media (hover: hover) {
  .vq-btn:hover { color: var(--vq-paper); }
  .vq-btn:hover::before { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- стеклянный треугольник «смотреть» */
.vq-big {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 240px;
  width: var(--vq-big-w);
  aspect-ratio: 332 / 264;
  translate: -50% -50%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vq-ink);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.vq-big.is-off { visibility: hidden; pointer-events: none; }
.vq-big__tilt, .vq-big__float, .vq-big__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.vq-big__tilt { will-change: transform; }
.vq-big__float {
  animation: vq-float 7s ease-in-out infinite;
  transition: scale .5s var(--vq-spring);
}
.vq[data-vis="0"] .vq-big__float { animation-play-state: paused; }
@media (hover: hover) {
  .vq-big:hover .vq-big__float { scale: 1.05; }
}
.vq-big:focus-visible .vq-big__float { scale: 1.05; }
.vq-big.is-press .vq-big__float { scale: .95; transition-duration: .12s; }
@keyframes vq-float {
  0%, 100% { transform: translate3d(0, -1.6%, 0) rotate(-1deg); }
  50%      { transform: translate3d(0, 1.6%, 0) rotate(1deg); }
}

.vq-big__layer { transition: opacity .22s linear; }
.vq-big.is-off .vq-big__layer { opacity: 0; transition: none; }

.vq-big__shade {
  overflow: visible;
  fill: #17191d;
  opacity: .2;
  filter: blur(10px);
  transform: translate(2%, 6%);
}
.vq-big.is-off .vq-big__shade { opacity: 0; }

/* стекло: blur + лёгкий холодный оттенок, как у треугольников сайта */
.vq-big__glass {
  inset: -12%;
  width: auto;
  height: auto;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .3) 18%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .18) 82%),
    rgba(200, 205, 212, .14);
  -webkit-backdrop-filter: blur(5px) saturate(1.15) brightness(1.04);
  backdrop-filter: blur(5px) saturate(1.15) brightness(1.04);
}
.vq-big__glint {
  position: absolute;
  inset: -20% -80%;
  background: linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, .85) 50%, transparent 56%);
  translate: -55% 0;
  opacity: 0;
}
@media (hover: hover) {
  .vq-big:hover .vq-big__glint {
    translate: 55% 0;
    opacity: 1;
    transition: translate 1.1s var(--vq-ease), opacity .15s;
  }
}
/* светлая обводка 3px, как у кнопки на сайте; лёгкая тень, чтобы её было видно на белом кадре */
.vq-big__line {
  overflow: visible;
  filter: drop-shadow(0 1px 1.5px rgba(23, 25, 29, .45));
}
.vq-big__line polygon {
  fill: none;
  stroke: var(--vq-line);
  stroke-width: 3;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
/* стрелка «смотреть снова» — только в конце ролика */
.vq-big__icon { overflow: visible; opacity: 0; }
.vq-big[data-variant="replay"] .vq-big__icon { opacity: 1; }
.vq-big.is-off .vq-big__icon { opacity: 0; }
.vq-big__icon path { fill: none; stroke: var(--vq-ink); stroke-width: 9; stroke-linecap: square; stroke-linejoin: miter; }
.vq-big__icon .vq-halo { stroke: rgba(234, 234, 234, .7); stroke-width: 16; }

/* ---------------------------------------------------------------- индикаторы: перемотка, громкость, загрузка */
.vq-seek, .vq-volhud, .vq-loader {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 46px;
  padding: 0 28px;
  background: var(--vq-chip);
  color: var(--vq-paper);
  font-family: var(--vq-display);
  font-size: 15px;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 14px 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s, transform .45s var(--vq-spring);
}
.vq-seek { top: 50%; margin-top: -23px; }
.vq-seek--l { left: 7%; transform: translateX(-16px); }
.vq-seek--r { right: 7%; transform: translateX(16px); }
.vq-seek.is-on { opacity: 1; transform: none; }
.vq-seek__arrows { display: flex; gap: 2px; }
.vq-seek__arrows i {
  display: block;
  width: 8px;
  height: 11px;
  background: currentColor;
  opacity: .25;
}
.vq-seek--r .vq-seek__arrows i { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.vq-seek--l .vq-seek__arrows i { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.vq-seek.is-pulse i { animation: vq-chev .75s var(--vq-ease) both; }
.vq-seek--r.is-pulse i:nth-child(2), .vq-seek--l.is-pulse i:nth-child(2) { animation-delay: .08s; }
.vq-seek--r.is-pulse i:nth-child(3), .vq-seek--l.is-pulse i:nth-child(1) { animation-delay: .16s; }
@keyframes vq-chev { 0% { opacity: .2; } 30% { opacity: 1; } 100% { opacity: .25; } }
.vq-seek__label, .vq-volhud__val { font-variant-numeric: tabular-nums; }

.vq-volhud {
  left: 50%;
  top: 9%;
  transform: translate(-50%, -12px);
}
.vq-volhud.is-on { opacity: 1; transform: translate(-50%, 0); }
.vq-volhud__ico { width: 18px; height: 18px; }
.vq-volhud__bars { display: flex; gap: 3px; }
.vq-volhud__bars i {
  display: block;
  width: 4px;
  height: 15px;
  background: rgba(237, 237, 237, .2);
  transform: skewX(14deg);
  transition: background .15s;
}
.vq-volhud__bars i.on { background: var(--vq-paper); }
.vq-volhud__val { min-width: 2.2em; text-align: right; }

.vq-loader {
  left: 50%;
  top: 50%;
  width: 78px;
  padding: 0;
  margin: -23px 0 0 -39px;
  transform: scale(.85);
}
.vq.is-wait .vq-loader { opacity: 1; transform: none; }
.vq-loader svg { width: 32px; height: 26px; overflow: visible; }
.vq-loader polygon { fill: none; stroke-width: 22; stroke-linejoin: miter; }   /* ≈2px при ширине 32px */
.vq-loader .bg { stroke: rgba(237, 237, 237, .22); }
.vq-loader .run {
  stroke: var(--vq-paper);
  stroke-dasharray: 26 74;
  animation: vq-run 1.05s linear infinite;
}
@keyframes vq-run { to { stroke-dashoffset: -100; } }

/* ---------------------------------------------------------------- ошибка */
.vq-error {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  font-family: var(--vq-text);
  font-size: 15px;
  line-height: 1.4;
  color: var(--vq-ink);
  background: var(--vq-paper);
}
.vq-error[hidden] { display: none; }
.vq-error svg { width: 64px; height: 51px; }
.vq-error p { margin: 0; max-width: 34ch; }

/* ---------------------------------------------------------------- панель */
.vq-bar {
  --vq-bar-clip: polygon(0 0, calc(100% - var(--vq-slant)) 0, 100% 100%, var(--vq-slant) 100%);
  position: absolute;
  z-index: 4;
  left: var(--vq-gap);
  right: var(--vq-gap);
  bottom: var(--vq-gap);
  height: var(--vq-bar-h);
  max-width: 1040px;
  margin: 0 auto;
  transition: transform .6s var(--vq-ease);
}
.vq-bar__shadow, .vq-bar__glass, .vq-bar__edge, .vq-bar__row { transition: opacity .35s var(--vq-ease); }
.vq[data-ui="off"] .vq-bar { transform: translate3d(0, 16px, 0); pointer-events: none; }
.vq[data-ui="off"] .vq-bar__shadow,
.vq[data-ui="off"] .vq-bar__glass,
.vq[data-ui="off"] .vq-bar__edge,
.vq[data-ui="off"] .vq-bar__row { opacity: 0; }

.vq-bar__shadow {
  position: absolute;
  inset: 0;
  opacity: .2;
  filter: blur(14px);
  transform: translateY(9px);
}
.vq-bar__shadow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #17191d;
  clip-path: var(--vq-bar-clip);
}
/* стекло: backdrop-filter на самом элементе с clip-path — у предков не должно быть opacity/filter */
.vq-bar__glass {
  position: absolute;
  inset: 0;
  clip-path: var(--vq-bar-clip);
  background: linear-gradient(180deg, var(--vq-glass-hi), var(--vq-glass-lo));
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
}
.vq-bar__edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.vq-bar__edge path, .vq-pop__edge path {
  fill: none;
  stroke: url(#vq-edge-v);
  stroke-width: 1;
}
.vq-bar__row {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 calc(var(--vq-slant) / 2 + 10px);
}

/* ---------------------------------------------------------------- иконки */
.vq-ico-rot { transform-box: view-box; transform-origin: 12px 12.8px; }
.vq-ico-num {
  font-size: 7.5px;
  fill: currentColor;
  stroke: none;
}
.vq-w1, .vq-w2 {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transition: opacity .25s, scale .4s var(--vq-spring);
}
.vq-mute[data-level="0"] .vq-w1,
.vq-mute[data-level="0"] .vq-w2,
.vq-mute[data-level="1"] .vq-w2 { opacity: 0; scale: .3; }
.vq-x {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .28s var(--vq-ease);
}
.vq-mute[data-level="0"] .vq-x { stroke-dashoffset: 0; }
.vq-mute[data-level="0"] .vq-x + .vq-x { transition-delay: .07s; }

.vq-c {
  transform-box: fill-box;
  transform-origin: center;
  transition: rotate .5s var(--vq-spring), translate .35s var(--vq-spring);
}
.vq[data-fs="1"] .vq-c { rotate: 180deg; }
@media (hover: hover) {
  .vq-fs:hover .vq-c1 { translate: -1.5px -1.5px; }
  .vq-fs:hover .vq-c2 { translate: 1.5px -1.5px; }
  .vq-fs:hover .vq-c3 { translate: 1.5px 1.5px; }
  .vq-fs:hover .vq-c4 { translate: -1.5px 1.5px; }
  .vq[data-fs="1"] .vq-fs:hover .vq-c1 { translate: 1.5px 1.5px; }
  .vq[data-fs="1"] .vq-fs:hover .vq-c2 { translate: -1.5px 1.5px; }
  .vq[data-fs="1"] .vq-fs:hover .vq-c3 { translate: -1.5px -1.5px; }
  .vq[data-fs="1"] .vq-fs:hover .vq-c4 { translate: 1.5px -1.5px; }
}

/* ---------------------------------------------------------------- время */
.vq-time {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 2px;
  border: 0;
  background: none;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--vq-display);
  font-size: 14px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--vq-ink);
}
.vq-time span { display: inline-block; text-align: center; }
.vq-time .d { width: var(--vq-dw, .62em); }
.vq-time .c { width: .34em; }
.vq-time .m { width: .6em; }
.vq-time--cur { margin-left: 8px; }
.vq-time--dur { color: var(--vq-muted); cursor: pointer; transition: color .2s; }
@media (hover: hover) { .vq-time--dur:hover { color: var(--vq-ink); } }
.vq-time--dur:focus-visible { outline: 2px solid var(--vq-ink); outline-offset: 2px; }

/* ---------------------------------------------------------------- таймлайн */
.vq-tl {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 60px;
  margin: 0 16px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.vq-tl__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  translate: 0 -50%;
  background: var(--vq-track);
  overflow: hidden;
  transition: height .35s var(--vq-ease);
}
.vq-tl:hover .vq-tl__track,
.vq-tl:focus-visible .vq-tl__track,
.vq.is-scrub .vq-tl__track { height: 6px; }
.vq-tl:focus-visible .vq-tl__track { outline: 2px solid var(--vq-ink); outline-offset: 5px; }
.vq-tl__bufs i {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--vq-buffer);
}
.vq-tl__ghost, .vq-tl__played {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.vq-tl__ghost { background: var(--vq-ghost); opacity: 0; transition: opacity .25s; }
.vq-tl:hover .vq-tl__ghost { opacity: 1; }
.vq.is-scrub .vq-tl__ghost { opacity: 0; }
.vq-tl__played { background: var(--vq-ink); }
/* бегунок — косой брусок, как штрихи сайта; наклон и растяжение задаёт скрипт */
.vq-tl__head {
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 20px;
  margin: -10px 0 0 -3px;
  background: var(--vq-ink);
  pointer-events: none;
  transform: scale(0);
  will-change: transform;
}
.vq-tl__ripple {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 20px;
  margin: -10px 0 0 -17px;
  border: 1.5px solid var(--vq-ink);
  pointer-events: none;
  animation: vq-ripple .55s var(--vq-ease) forwards;
}
@keyframes vq-ripple {
  from { transform: skewX(14deg) scale(.15); opacity: .9; }
  to   { transform: skewX(14deg) scale(1.3); opacity: 0; }
}

/* превью кадра над таймлайном */
.vq-prev {
  position: absolute;
  left: 0;
  bottom: calc(100% + 14px);
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}
.vq-prev__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px) scale(.92);
  transform-origin: 50% 100%;
  transition: opacity .16s, transform .4s var(--vq-spring);
}
.vq-prev.is-on .vq-prev__in { opacity: 1; transform: none; }
.vq-prev__frame {
  display: none;
  width: var(--vq-pw, 176px);
  aspect-ratio: var(--vq-ar, 16 / 9);
  background: var(--vq-bg);
  border: 2px solid var(--vq-line);
  box-shadow: 0 0 0 1px rgba(23, 25, 29, .35), 0 10px 24px rgba(23, 25, 29, .28);
  overflow: hidden;
}
.vq-prev.has-frame .vq-prev__frame { display: block; }
.vq.no-preview .vq-prev__frame { display: none; }
.vq-prev__frame canvas { display: block; width: 100%; height: 100%; }
.vq-prev__time {
  padding: 7px 16px;
  background: var(--vq-chip);
  color: var(--vq-paper);
  font-family: var(--vq-display);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 100%, 9px 100%);
}

/* ---------------------------------------------------------------- громкость */
.vq-vol { position: relative; display: flex; flex: none; }
/* невидимый мостик между кнопкой и попапом, чтобы hover не рвался */
.vq-vol::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 100%;
  height: 22px;
}
.vq-vol__pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 18px);
  width: 44px;
  height: 140px;
  margin-left: -22px;
  cursor: pointer;
  touch-action: none;
  outline: none;
  clip-path: polygon(0 10px, 100% 0, 100% calc(100% - 10px), 0 100%);
  background: linear-gradient(180deg, var(--vq-glass-hi), var(--vq-glass-lo));
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  opacity: 0;
  transform: translateY(10px) scaleY(.75);
  transform-origin: 50% 100%;
  pointer-events: none;
  transition: opacity .18s .12s, transform .45s .12s var(--vq-spring);
}
.vq.is-voldrag .vq-vol__pop {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}
/* отдельным правилом: браузер без :has() не должен выкинуть правило выше */
.vq-vol:has(:focus-visible) .vq-vol__pop {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}
@media (hover: hover) {
  .vq-vol:hover .vq-vol__pop {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
}
.vq-pop__edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vq-pop__val {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--vq-display);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.vq-pop__track {
  position: absolute;
  left: 50%;
  top: 38px;
  bottom: 18px;
  width: 4px;
  margin-left: -2px;
  background: var(--vq-track);
  overflow: hidden;
}
.vq-pop__fill {
  position: absolute;
  inset: 0;
  background: var(--vq-ink);
  transform-origin: 50% 100%;
  transform: scaleY(var(--v, 1));
}
.vq-pop__knob {
  position: absolute;
  left: 50%;
  top: calc(38px + (1 - var(--v, 1)) * 84px);
  width: 18px;
  height: 6px;
  margin: -3px 0 0 -9px;
  background: var(--vq-ink);
  transform: skewY(-12.8deg);
  transition: scale .35s var(--vq-spring);
}
.vq.is-voldrag .vq-pop__knob { scale: 1.25; }

/* ---------------------------------------------------------------- подсказка над кнопкой */
.vq-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: var(--vq-chip);
  color: var(--vq-paper);
  font-family: var(--vq-text);
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);
  opacity: 0;
  transform: translate3d(var(--x, 0), 6px, 0);
  transition: opacity .14s, transform .3s var(--vq-ease);
}
.vq-tip.is-on { opacity: 1; transform: translate3d(var(--x, 0), 0, 0); }
.vq-tip__k { font-family: var(--vq-display); color: rgba(237, 237, 237, .55); }
.vq-tip__k::before { content: "[ "; }
.vq-tip__k::after { content: " ]"; }

/* ---------------------------------------------------------------- узкий плеер (телефон, маленькие вставки) */
@container (max-width: 560px) {
  .vq-bar { --vq-bar-h: 46px; --vq-gap: 8px; --vq-slant: 14px; }
  .vq-bar__row { gap: 0; }
  .vq-btn { width: 36px; height: 36px; }
  .vq-back, .vq-fwd { display: none; }   /* на тачах перемотка — двойным тапом по краю */
  .vq-time { font-size: 12px; }
  .vq-time--cur { margin-left: 2px; }
  .vq-tl { margin: 0 10px; min-width: 40px; }
  .vq-prev { bottom: calc(100% + 8px); }
  .vq-seek, .vq-volhud, .vq-loader { height: 38px; font-size: 13px; }
  .vq-seek { margin-top: -19px; padding: 0 22px; }
  .vq-loader { margin-top: -19px; }
  .vq-volhud { top: 8%; }
}
@container (max-width: 340px) {
  .vq-time--dur { display: none; }
}

/* ---------------------------------------------------------------- тач: без попапа громкости и подсказок */
@media (hover: none) {
  .vq-vol__pop, .vq-vol::before, .vq-tip { display: none; }
}

/* ---------------------------------------------------------------- меньше движения */
@media (prefers-reduced-motion: reduce) {
  .vq-big__float { animation: none; }
  .vq-big__glint { display: none; }
  .vq-loader .run { animation-duration: 3s; }
}

/* ==========================================================================
   Сайт «TouchDesigner / vol.00»: плеер внутри секции .player-section
   ========================================================================== */
.player-section > .vq {
  position: absolute;
  inset: 0;
  z-index: 1;
  --vq-gap: 26px;
  --vq-big-w: clamp(110px, 21cqw, 320px);
}
/* бумажная рамка секции — над видео, но под кнопками плеера */
.player-section .vq .player-decor { z-index: 1; }
.vq:fullscreen .player-decor,
.vq:-webkit-full-screen .player-decor { display: none; }
/* прежние кнопки секции больше не нужны: их работу делает плеер */
.player-section .player-btn { display: none !important; }