.vps{
  --w:clamp(210px,23vw,290px);
  --ease:cubic-bezier(.2,.8,.2,1);
  position:relative;width:100%;padding:6px 0 10px;
  -webkit-user-select:none;user-select:none;outline:none;
}
@media (max-width:600px){ .vps{--w:min(64vw,280px)} }

.vps-stage{position:relative;height:calc(var(--w) * 16 / 9);touch-action:pan-y}

.vps-slide{
  position:absolute;top:0;left:50%;width:var(--w);aspect-ratio:9/16;margin-left:calc(var(--w) / -2);
  border-radius:18px;overflow:hidden;background:#0c1f3d;display:block;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);
  transition:transform .6s var(--ease),opacity .6s var(--ease);will-change:transform;
  -webkit-tap-highlight-color:transparent;
}
.vps .vps-slide img,.vps .vps-slide video{width:100%;height:100%;max-width:none;object-fit:cover;display:block;pointer-events:none}
.vps-slide::before{
  content:"";position:absolute;inset:0 0 auto;height:26%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0));opacity:0;transition:opacity .6s var(--ease);
}
.vps-slide::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(4,10,22,.5);transition:opacity .6s var(--ease);
}
.vps-slide.is-active::before{opacity:1}
.vps-slide.is-active::after{opacity:0}
.vps-slide:focus-visible{outline:3px solid #ffd166;outline-offset:4px}

.vps-top{
  position:absolute;top:0;left:50%;width:var(--w);margin-left:calc(var(--w) / -2);
  padding:12px 12px 0;z-index:20;pointer-events:none;
}
.vps-bars{display:flex;gap:4px}
.vps-bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.vps-bar i{display:block;height:100%;width:0;background:#fff;border-radius:inherit}
.vps-bar.is-done i{width:100%}
.vps-bar.is-current i{animation:vpsFill var(--dur,5s) linear forwards}
.vps.is-paused .vps-bar.is-current i,
.vps.is-buffering .vps-bar.is-current i{animation-play-state:paused}
@keyframes vpsFill{from{width:0}to{width:100%}}

.vps-meta{display:flex;align-items:center;gap:8px;margin-top:10px;color:#fff;font-size:13px;line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.vps-avatar{flex:none;width:32px;height:32px;border-radius:50%;padding:2px;background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7)}
.vps-avatar img{width:100%;height:100%;border-radius:50%;object-fit:contain;background:#fff;padding:2px;box-sizing:border-box;display:block}
.vps-name{font-weight:700}
.vps-time{opacity:.8}
/* `.vps` prefix outranks the theme's global button reset */
.vps .vps-sound{
  pointer-events:auto;margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;padding:6px;cursor:pointer;
  background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;font:inherit;line-height:1;
}
.vps .vps-sound:hover,.vps .vps-sound:focus{background:rgba(0,0,0,.55);color:#fff}
.vps-sound[hidden]{display:none}
.vps-sound svg{width:18px;height:18px;fill:currentColor}
.vps-sound .vps-ico-on,.vps-sound[aria-pressed="true"] .vps-ico-off{display:none}
.vps-sound[aria-pressed="true"] .vps-ico-on{display:block}

.vps .vps-nav{
  position:absolute;top:calc(6px + var(--w) * 8 / 9);transform:translateY(-50%);z-index:30;
  width:46px;height:46px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(10,31,61,.55);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;place-items:center;transition:background .25s;font:inherit;line-height:1;
}
.vps .vps-nav:hover,.vps .vps-nav:focus{background:rgba(33,102,219,.85);color:#fff;border-color:rgba(255,255,255,.4)}
.vps-nav:focus-visible,.vps-sound:focus-visible{outline:3px solid #ffd166;outline-offset:2px}
.vps-nav svg{width:24px;height:24px;fill:currentColor}
.vps-prev{left:calc(50% - var(--w) / 2 - 23px)}
.vps-next{right:calc(50% - var(--w) / 2 - 23px)}
@media (max-width:600px){ .vps .vps-nav{width:40px;height:40px} .vps-prev{left:calc(50% - var(--w) / 2 - 20px)} .vps-next{right:calc(50% - var(--w) / 2 - 20px)} }

.vps-badge{
  display:table;margin:18px auto 0;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;
  background:#ffd166;color:#050e1f;text-decoration:none;
}
.vps-empty{padding:18px;border:1px dashed rgba(255,255,255,.35);border-radius:12px;color:#cddcf3;text-align:center}

@media (prefers-reduced-motion:reduce){
  .vps-slide,.vps-slide::before,.vps-slide::after{transition:none}
}