.vp{position:relative;margin:0 auto;max-width:1040px;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vp video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.vp-play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;border:0;background:#fff;color:#000;cursor:pointer;display:grid;place-items:center;transition:transform .25s ease,opacity .25s ease;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.vp-play:hover{transform:scale(1.06)}.vp-play:focus-visible{outline:3px solid #fff;outline-offset:4px}
.vp-play svg{width:30px;height:30px;margin-left:4px}
.vp.playing .vp-play{opacity:0;pointer-events:none}
.vp-sound{position:absolute;right:14px;top:14px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.6);color:#fff;font:500 13px/1 inherit;padding:9px 13px;border-radius:999px;cursor:pointer;opacity:1}
.vp-sound:focus-visible{outline:2px solid #fff;outline-offset:3px}
.vp-note{text-align:center;color:#8a8a8a;font-size:14px;margin-top:14px}
@media (max-width:700px){.vp{aspect-ratio:9/16;max-width:420px}}