.self-hosted-video{width:100%;aspect-ratio:16/9;border-radius:.5rem;overflow:hidden;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;display:block;position:relative;line-height:0;font-size:0;background-color:#000}.self-hosted-video.loaded video{opacity:1}.self-hosted-video.playing .video-placeholder{opacity:0;pointer-events:none}.self-hosted-video video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s ease;border:none;outline:none}.self-hosted-video video:focus{outline:2px solid #3b82f6;outline-offset:2px}.self-hosted-video .video-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background-color:#1f2937;background-size:cover;background-position:center;transition:all .3s ease;border:none;padding:0}.self-hosted-video .video-placeholder:hover{transform:scale(1.01)}.self-hosted-video .video-placeholder:hover .play-button{transform:scale(1.1);background-color:#3b82f6}.self-hosted-video .video-placeholder:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#0000004d,#0000001a,#0000004d);z-index:1}.self-hosted-video .video-placeholder .play-button{width:80px;height:80px;background-color:#3b82f6e6;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;transition:all .3s ease;box-shadow:0 4px 12px #0000004d}.self-hosted-video .video-placeholder .play-button svg{width:36px;height:36px;color:#fff;margin-left:4px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.self-hosted-video .video-placeholder .placeholder-text{margin-top:20px;color:#fff;font-weight:600;font-size:1.1rem;position:relative;z-index:2;text-shadow:0 2px 4px rgba(0,0,0,.7);letter-spacing:.5px}@media (max-width: 768px){.self-hosted-video,.self-hosted-video .video-placeholder{min-height:200px}.self-hosted-video .video-placeholder:before{background:linear-gradient(135deg,#0000004d,#0000001a,#0000004d)}.self-hosted-video .video-placeholder .play-button{width:64px;height:64px;background-color:#3b82f6;box-shadow:0 6px 16px #0006}.self-hosted-video .video-placeholder .play-button svg{width:28px;height:28px}.self-hosted-video .video-placeholder .placeholder-text{font-size:1rem;margin-top:16px;text-shadow:0 2px 8px rgba(0,0,0,.8)}.self-hosted-video video{min-height:200px}}@media (max-width: 480px){.self-hosted-video{border-radius:.375rem;min-height:180px}.self-hosted-video .video-placeholder{min-height:180px}.self-hosted-video .video-placeholder .play-button{width:56px;height:56px;background-color:#3b82f6;box-shadow:0 8px 20px #00000080}.self-hosted-video .video-placeholder .play-button svg{width:24px;height:24px}.self-hosted-video .video-placeholder .placeholder-text{font-size:.9rem;margin-top:12px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.9)}.self-hosted-video video{min-height:180px}}@media (prefers-contrast: high){.self-hosted-video .video-placeholder:before{background:#000c}.self-hosted-video .video-placeholder .play-button{background-color:#000;border:2px solid #fff}}@media (prefers-reduced-motion: reduce){.self-hosted-video .video-placeholder,.self-hosted-video .play-button,.self-hosted-video video{transition:none}.self-hosted-video .video-placeholder:hover,.self-hosted-video .video-placeholder:hover .play-button{transform:none}}