.vbub{position:fixed;left:20px;bottom:20px;z-index:55;transform:translateX(calc(-100% - 40px));transition:transform .5s var(--ease-out)}
.vbub.is-in{transform:none}
.vbub.is-out{transition-timing-function:var(--ease-in-out);transition-duration:.4s}
.vbub[hidden]{display:none}
.vbub__open{position:relative;display:block;width:120px;height:188px;padding:0;border:3px solid #fff;border-radius:var(--radius-lg);background:var(--ink);overflow:hidden;cursor:pointer;box-shadow:var(--shadow),0 0 0 2px var(--green-700);transition:transform .2s var(--ease-out),box-shadow .2s ease}
.vbub__video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.vbub__hide{position:absolute;top:-8px;right:-8px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer}
.vbub__hide svg{width:12px;height:12px}
@media (hover:hover){.vbub__open:hover{transform:translateY(-2px) scale(1.03)}}
.vbub__open:focus-visible,.vbub__hide:focus-visible{outline:2px solid var(--green-700);outline-offset:3px}
.vbox{position:fixed;inset:0;width:fit-content;height:fit-content;max-width:none;max-height:none;padding:0;margin:auto;border:0;background:transparent;overflow:visible}
.vbox::backdrop{background:rgba(12,30,20,.82);opacity:0;transition:opacity .28s ease}
.vbox.is-in::backdrop{opacity:1}
.vbox__frame{position:relative;width:min(400px,calc(100vw - 32px),calc((100dvh - 48px) * .5625));aspect-ratio:9/16;border-radius:var(--radius-lg);background:var(--ink);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);opacity:0;transform:translateY(24px) scale(.92);transition:opacity .28s ease,transform .34s var(--ease-out)}
.vbox.is-in .vbox__frame{opacity:1;transform:none}
.vbox__nav{opacity:0;transition:opacity .28s ease}
.vbox.is-in .vbox__nav{opacity:1}
.vbox__video{display:block;width:100%;height:100%;object-fit:cover;background:var(--ink)}
.vbox__bar{position:absolute;left:0;right:0;top:0;padding:12px 56px 28px 12px;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}
.vbox__steps{display:flex;gap:4px}
.vbox__steps span{position:relative;flex:1;height:3px;border-radius:var(--radius-pill);background:rgba(255,255,255,.35);overflow:hidden}
.vbox__steps span::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(var(--p,0));transform-origin:left}
.vbox__cap{margin:10px 0 0;color:#fff;font-weight:600;font-size:var(--text-base);line-height:1.3}
.vbox__close{position:absolute;top:8px;right:8px;z-index:2;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;cursor:pointer}
.vbox__close svg{width:18px;height:18px}
.vbox__nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);cursor:pointer;box-shadow:var(--shadow)}
.vbox__nav svg{width:18px;height:18px}
.vbox__nav--prev{left:8px}
.vbox__nav--next{right:8px}
.vbox__close:focus-visible,.vbox__nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
html.vbox-open{overflow:hidden}
@media (max-width:600px){
  .vbub{left:12px;bottom:12px}
  .vbub__open{width:72px;height:112px;border-width:2px}
}
@media (prefers-reduced-motion:reduce){.vbub,.vbub__open,.vbox__frame,.vbox__nav,.vbox::backdrop{transition:none}}