.rayou-demo-videos{padding:60px 24px 70px;background:#f6ab03;color:#fff;text-align:center;scroll-margin-top:110px}
.rayou-demo-videos h2{margin:0 0 48px;font-size:60px;font-weight:700;line-height:1.2;color:#fff}
.rayou-video-grid{max-width:1320px;margin:auto;display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.rayou-video-card{display:block;flex:0 1 calc((100% - 84px)/4);min-width:0;max-width:300px;padding:0;border:0;border-radius:10px;background:#fff;color:#161616;text-align:left;overflow:hidden;box-shadow:0 8px 24px #0002;cursor:pointer;text-decoration:none}
.rayou-video-card:hover{color:#161616;box-shadow:0 12px 30px #0003;text-decoration:none}
.rayou-video-card:focus-visible{outline:3px solid #161616;outline-offset:5px}
.rayou-video-cover{position:relative;display:block;aspect-ratio:9/16;width:100%;background:linear-gradient(145deg,#232b34,#11161b);overflow:hidden}
.rayou-video-cover img,.rayou-video-cover video{display:block;width:100%;height:100%;object-fit:contain}
.rayou-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border:2px solid #fff;border-radius:50%;background:#0007;color:white;font-size:27px;padding-left:4px}
.rayou-video-action{position:absolute;bottom:0;left:0;right:0;padding:32px 16px 15px;background:linear-gradient(transparent,#000b);color:#fff;text-align:center;font-size:15px}
.rayou-video-title{display:block;padding:17px 18px;font-size:18px;line-height:1.5;font-weight:600;overflow-wrap:anywhere}
.rayou-video-empty{padding:35px 0 20px;margin:0;color:#fff;font-size:20px}
.rayou-video-dialog{width:min(520px,calc(100vw - 24px));max-height:94dvh;margin:auto;padding:16px;border:0;border-radius:12px;background:#15191e;color:#fff;overflow:auto;box-shadow:0 20px 100px #0007}
.rayou-video-dialog:not([open]){display:none}.rayou-video-dialog::backdrop{background:#000b}
.rayou-video-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.rayou-video-dialog-header h3{margin:0;font-size:18px;line-height:1.5;color:#fff}
.rayou-video-close{flex:none;border:0;background:transparent;color:#fff;font-size:34px;width:44px;height:44px;cursor:pointer}
.rayou-video-player{height:min(70dvh,750px);background:#000;display:grid;place-items:center}
.rayou-video-player video,.rayou-video-player iframe{display:block;width:100%;height:100%;border:0;object-fit:contain}
.rayou-video-original{display:inline-block;margin-top:12px;color:#f6ab03;font-size:14px}.rayou-video-original:hover{color:#fff}
.rayou-video-error{margin:12px 0;color:#fff;font-size:14px}
@media(max-width:991px){.rayou-video-card{flex-basis:calc((100% - 48px)/3)}.rayou-video-grid{gap:24px}.rayou-demo-videos h2{font-size:44px}}
@media(max-width:600px){.rayou-demo-videos{padding:36px 16px 44px}.rayou-demo-videos h2{font-size:32px;margin-bottom:28px}.rayou-video-grid{gap:16px}.rayou-video-card{flex-basis:calc((100% - 16px)/2)}.rayou-video-title{font-size:15px;padding:12px}.rayou-video-play{width:48px;height:48px;font-size:20px}.rayou-video-action{font-size:13px}.rayou-video-card:only-child{flex-basis:80%}.rayou-video-dialog{padding:12px}}