.video-player-container{cursor:default;aspect-ratio:16/9;background:#0a0a0a;border-radius:12px;width:100%;position:relative;overflow:hidden}.video-player-container[data-player-mode=true]{border-radius:8px}.video-player-video{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.video-player-preview{z-index:2;cursor:pointer;align-items:flex-end;padding:2.5rem;display:flex;position:absolute;inset:0}.video-player-preview-overlay{background:linear-gradient(#0006 0%,#0000008c 60%,#000000d9 100%);transition:background .3s;position:absolute;inset:0}.video-player-preview:hover .video-player-preview-overlay{background:linear-gradient(#00000073 0%,#0009 60%,#000000e6 100%)}.video-player-preview-content{z-index:3;flex-direction:column;gap:1.25rem;display:flex;position:relative}.video-player-preview-title{color:#fff;letter-spacing:-.5px;max-width:480px;font-size:clamp(1.4rem,2.5vw,2rem);font-weight:400;line-height:1.2}.video-player-preview-play{-webkit-backdrop-filter:blur(12px);color:#fff;cursor:pointer;background:#fff3;border:1px solid #ffffff40;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;transition:all .25s;display:flex}.video-player-preview-play:hover{background:#ffffff59;transform:scale(1.08)}.video-player-preview-play svg{transition:transform .2s}.video-player-click-area{z-index:2;cursor:pointer;position:absolute;inset:0}.video-player-controls{z-index:5;align-items:center;gap:12px;padding:12px 16px;transition:opacity .3s,transform .3s;display:flex;position:absolute;bottom:0;left:0;right:0}.video-player-controls.visible{opacity:1;transform:translateY(0)}.video-player-controls.hidden{opacity:0;pointer-events:none;transform:translateY(8px)}.video-player-btn{color:#ffffffe6;cursor:pointer;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:all .15s;display:flex}.video-player-btn:hover{color:#fff;background:#ffffff1a}.video-player-time{color:#ffffffb3;font-variant-numeric:tabular-nums;white-space:nowrap;-webkit-user-select:none;user-select:none;flex-shrink:0;font-size:.75rem}.video-player-progress{cursor:pointer;flex:1;align-items:center;height:20px;display:flex;position:relative}.video-player-progress-track{background:#fff3;border-radius:2px;width:100%;height:3px;transition:height .15s;position:relative}.video-player-progress:hover .video-player-progress-track{height:5px}.video-player-progress-fill{background:#fff;border-radius:2px;height:100%;transition:none}.video-player-progress-thumb{background:#fff;border-radius:50%;width:12px;height:12px;transition:transform .15s;position:absolute;top:50%;transform:translate(-50%,-50%)scale(0);box-shadow:0 1px 4px #0000004d}.video-player-progress:hover .video-player-progress-thumb{transform:translate(-50%,-50%)scale(1)}.video-player-volume-group{flex-shrink:0;align-items:center;gap:4px;display:flex}.video-player-volume-slider{opacity:0;cursor:pointer;accent-color:#fff;appearance:none;background:#fff3;border-radius:2px;outline:none;width:0;height:3px;transition:width .2s,opacity .2s}.video-player-volume-group:hover .video-player-volume-slider{opacity:1;width:70px}.video-player-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:10px;height:10px;box-shadow:0 1px 3px #0000004d}.video-player-volume-slider::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:10px;height:10px;box-shadow:0 1px 3px #0000004d}.video-player-top-gradient{z-index:3;pointer-events:none;background:linear-gradient(#0006,#0000);height:80px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.video-player-bottom-gradient{z-index:3;pointer-events:none;background:linear-gradient(#0000,#000000b3);height:120px;transition:opacity .3s;position:absolute;bottom:0;left:0;right:0}.video-player-top-gradient.hidden,.video-player-bottom-gradient.hidden{opacity:0}.video-player-top-gradient.visible,.video-player-bottom-gradient.visible{opacity:1}.video-player-buffering{z-index:4;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.video-player-spinner{border:3px solid #fff3;border-top-color:#fff;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite video-player-spin}@keyframes video-player-spin{to{transform:rotate(360deg)}}@media (max-width:640px){.video-player-preview{padding:1.5rem}.video-player-preview-title{font-size:1.2rem}.video-player-preview-play{width:48px;height:48px}.video-player-controls{gap:8px;padding:8px 12px}.video-player-time,.video-player-volume-group{display:none}}
