.cf-normal-player { display: block; width: 100%; }
.cf-normal-skin { display: block; width: 100%; aspect-ratio: 16 / 9; background: #131313; border-radius: 12px; overflow: hidden; --media-border-radius: 0px;}
.cf-video-error { padding: 1rem; color: #b42318; background: #fff1ef; border-radius: 8px; font: 14px/1.5 system-ui, sans-serif; }

.cf-background { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 28rem; overflow: hidden; color: white; background: #131313; }
.cf-background__visual { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cf-background__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(3 14 28 / 80%), rgb(3 14 28 / 20%)); }
.cf-background__poster, .cf-background__media { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cf-background__media { --media-object-fit: cover; --media-object-position: center; opacity: 0; transition: opacity 300ms; }
.cf-background[data-background-playing] .cf-background__media { opacity: 1; }
/*.cf-background__toggle { position: absolute; z-index: 1; bottom: 1rem; right: 1rem; border: 1px solid rgb(255 255 255 / 60%); border-radius: 999px; padding: .7rem 1rem; color: white; background: rgb(0 0 0 / 55%); font: 14px/1.2 system-ui, sans-serif; cursor: pointer; }
.cf-background__toggle:focus-visible { outline: 3px solid white; outline-offset: 4px; }*/
.cf-background__toggle { display: none; }
.cf-background__status { position: absolute; bottom: 1rem; left: 1rem; max-width: 55%; font: 14px/1.5 system-ui, sans-serif; }
.cf-video-error { padding: 1rem; color: #b42318; background: #fff1ef; border-radius: 8px; font: 14px/1.5 system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) { .cf-background__media { transition: none; } }