/* Supplied Reel UI. The existing seven-position motion geometry is retained. */
.spv-card { container-type: inline-size; }
.spv-card.has-player > .spv-card-poster { visibility: visible; }
.spv-card.is-playing > .spv-card-poster { visibility: hidden; }
.spv-card:not(.is-center) .spv-card-caption,
.spv-card:not(.is-center) .spv-card-metrics { display: none; }
.spv-card-metrics,
.spv-card.is-playing .spv-card-metrics {
  top: auto;
  right: 3.5%;
  bottom: 13.5%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 13%;
  text-align: center;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.spv-card-metrics .spv-card-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  backdrop-filter: none;
}
.spv-card-metric svg { display: block; width: 26px; height: 26px; }
.spv-card-metrics .spv-card-metric-value { display: block; padding: 0; background: none; border-radius: 0; font: inherit; backdrop-filter: none; }
.spv-card-caption,
.spv-card.is-playing .spv-card-caption {
  inset: auto 0 0;
  z-index: 4;
  display: flex;
  gap: 4px;
  padding: 25% 20% 6% 5.5%;
  background: linear-gradient(transparent, rgba(0,0,0,.5) 35%, rgba(0,0,0,.94) 100%);
  font-size: 12px;
  line-height: 1.25;
  pointer-events: none;
}
.spv-card-identity { display: flex; align-items: center; gap: 8px; margin-bottom: 1px; }
.spv-card-avatar { display: block; flex: none; width: 36px; height: 36px; border: 1px solid #fff; border-radius: 50%; object-fit: cover; }
.spv-card-caption .spv-card-author { color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0; line-height: 1.15; }
.spv-card-caption-title { color: #fff; font-size: 12px; font-weight: 600; }
.spv-card-caption .spv-card-instagram-link {
  position: static;
  z-index: 6;
  display: block;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: normal;
  transform: none;
  backdrop-filter: none;
  pointer-events: auto;
}
.spv-card-caption .spv-card-instagram-link:hover { background: transparent; color: #00ff00; }
.spv-card-caption .spv-card-views,
.spv-card.is-playing .spv-card-caption .spv-card-views {
  position: static;
  display: block;
  padding: 0;
  margin-top: 7px;
  border-radius: 0;
  background: none;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
.spv-card-action,
.spv-card.is-playing.is-paused .spv-card-action {
  top: 45%;
  right: auto;
  left: 50%;
  z-index: 5;
  display: grid;
  width: 25%;
  min-width: 44px;
  height: auto;
  min-height: 44px;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(0,0,0,.12);
  box-shadow: none;
  color: #fff;
  transform: translate(-50%,-50%);
  backdrop-filter: none;
}
.spv-card-action svg { width: 43%; height: 43%; margin-left: 3px; }
.spv-card.is-playing:not(.is-paused) .spv-card-action { display: none; }
.spv-card.is-playing .spv-card-action:hover { background: rgba(0,0,0,.25); border-color: #fff; }
.spv-card.is-center.is-playing .spv-video-swipe-surface {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.spv-video-swipe-surface:focus-visible { outline: 3px solid #00ed00; outline-offset: -4px; }
@supports (font-size: 1cqw) {
  .spv-card-metrics .spv-card-metric { font-size: 5.1cqw; }
  .spv-card-metric svg { width: 10cqw; height: 10cqw; }
  .spv-card-metrics { gap: 4cqw; }
  .spv-card-avatar { width: 15cqw; height: 15cqw; }
  .spv-card-identity { gap: 3cqw; }
  .spv-card-caption .spv-card-author { font-size: 5.8cqw; }
  .spv-card-caption-title { font-size: 5.1cqw; }
  .spv-card-caption .spv-card-instagram-link { font-size: 4.9cqw; }
  .spv-card-caption .spv-card-views,
  .spv-card.is-playing .spv-card-caption .spv-card-views { margin-top: 3.5cqw; font-size: 5.6cqw; }
}
@media (min-width: 1180px) {
  .spv-intro { flex-direction: row; align-items: flex-start; gap: 30px; }
  .spv-copy { flex: 1 1 auto; }
  .spv-copy h2 { font-size: clamp(40px, 3.6vw, 68px); }
  .spv-profiles { width: auto; padding-top: 8px; }
  .spv-profile-list { flex-wrap: nowrap; }
  .spv-profile { width: clamp(145px, 12.3vw, 220px); }
  .spv-controls { width: 330px; min-height: 60px; padding: 6px 9px; justify-content: space-between; gap: 14px; }
  .spv-arrow { width: 46px; height: 46px; }
  .spv-count { font-size: 16px; }
  .spv-dot { width: 19px; height: 46px; }
  .spv-dot::before { width: 10px; height: 10px; }
}
@media (min-width: 1180px) and (min-height: 761px) {
  .spv-stage { --spv-stage-height: min(58vh, 32.5vw, 570px); }
  .spv-cards { --spv-card-width: min(clamp(265px, 18.3vw, 335px), calc(var(--spv-stage-height) * .586)); }
  .spv-card { aspect-ratio: 9 / 15.35; }
}
@media (max-width: 700px) {
  .spv-card-caption,
  .spv-card.is-playing .spv-card-caption {
    display: grid;
    grid-template-columns: 15cqw 1fr;
    column-gap: 8px;
    row-gap: 3px;
    padding-right: 18%;
    padding-bottom: 7%;
  }
  .spv-card-identity { display: contents; }
  .spv-card-avatar { grid-column: 1; grid-row: 1 / span 3; width: 100%; height: auto; aspect-ratio: 1; align-self: center; }
  .spv-card-caption .spv-card-author { grid-column: 2; grid-row: 1; align-self: end; }
  .spv-card-caption-title { grid-column: 2; grid-row: 2; }
  .spv-card-caption .spv-card-instagram-link { grid-column: 2; grid-row: 3; min-height: 22px; display: flex; align-items: center; font-size: 4.5cqw; }
  .spv-card-caption .spv-card-views,
  .spv-card.is-playing .spv-card-caption .spv-card-views { grid-column: 1 / -1; grid-row: 4; margin-top: 8px; }
  .spv-card-metrics,
  .spv-card.is-playing .spv-card-metrics { bottom: 7%; gap: 3cqw; }
  .spv-card-metrics .spv-card-metric { font-size: 4.6cqw; }
  .spv-card-metric svg { width: 9cqw; height: 9cqw; }
  .spv-card-action,
  .spv-card.is-playing.is-paused .spv-card-action { top: 47%; }
}