.video-sys-public { width: 100%; margin: 0 0 1.25rem; }
.video-sys-public__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background:transparent; border-radius: 7px; }
.video-sys-public__poster, .video-sys-public video { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-sys-public__poster { z-index: 1; }
.video-sys-public__poster > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-sys-public video { display: block;}
.video-sys-public .poster-splash { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 1.25rem 1.25rem 7%; box-sizing: border-box; pointer-events: none; color: #fff; text-align: center; background: #3399fe; background: linear-gradient(0deg, rgb(51, 153, 254) 0%, rgba(51, 153, 254, .95) 10%, rgba(51, 153, 254, 0) 52%); container-type: inline-size; container-name: splash; }
.video-sys-public .poster-title { font-size: clamp(1.25rem, 5cqw, 2.8rem); font-weight: 700; line-height: 1.1; text-shadow: 0 1px 3px #123; }
.video-sys-public .poster-text { font-size: clamp(.9rem, 2.8cqw, 1.55rem); line-height: 1.25; margin: .35rem 0 0; text-shadow: 0 1px 3px #123; }
.video-sys-public button.video-sys-public__play,
.video-sys-public button.video-sys-public__play:hover,
.video-sys-public button.video-sys-public__play:focus,
.video-sys-public button.video-sys-public__play:active,
.video-sys-public button.video-sys-public__play:disabled { position: absolute; z-index: 2; top: 50%; left: 50%; width: 5.5rem; height: 5.5rem; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; border: 3px solid rgba(255, 255, 255, .6); border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .35); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.video-sys-public__play-icon { display: block; width: 0; height: 0; margin-left: .4rem; border-top: 1.15rem solid transparent; border-bottom: 1.15rem solid transparent; border-left: 1.85rem solid currentColor; }
.video-sys-public button.video-sys-public__play:hover:not(:disabled),
.video-sys-public button.video-sys-public__play:focus-visible:not(:disabled) { border-color: #fff; color: #fff;}
.video-sys-public button.video-sys-public__play:disabled { cursor: wait; }
.video-sys-public button.video-sys-public__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.video-sys-public[aria-busy="true"] .video-sys-public__play::after { content: ''; position: absolute; top: calc(100% + .8rem); left: calc(50% - .6rem); width: 1.2rem; height: 1.2rem; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: video-sys-spin .8s linear infinite; }
@keyframes video-sys-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .video-sys-public button.video-sys-public__play, .video-sys-public button.video-sys-public__play:hover, .video-sys-public button.video-sys-public__play:focus, .video-sys-public button.video-sys-public__play:active, .video-sys-public button.video-sys-public__play:disabled { transition: none; } .video-sys-public[aria-busy="true"] .video-sys-public__play::after { animation: none; } }
.video-sys-public__message { position: absolute; z-index: 2; right: .75rem; bottom: .75rem; left: .75rem; margin: 0; padding: .35rem .5rem; color: #fff; background: rgba(0, 30, 65, .88); font-size: .875rem; font-weight: 600; text-align: center; pointer-events: none; }