*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

background:#111;

font-family:Arial;

padding:25px;

}

.wrapper{

max-width:1100px;

margin:auto;

background:#fff;

border-radius:15px;

overflow:hidden;

box-shadow:0 20px 40px rgba(0,0,0,.3);

}

.header{

background:#0d1117;

color:white;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

}

.left{

display:flex;

align-items:center;

gap:15px;

}

.dot{

width:16px;

height:16px;

background:red;

border-radius:50%;

animation:blink 1s infinite;

}

@keyframes blink{

50%{

opacity:.2;

}

}

.badge{

background:red;

padding:8px 18px;

border-radius:30px;

font-weight:bold;

}

.player{

background:black;

aspect-ratio:16/9;

}

.player video{

width:100%;

height:100%;

object-fit:contain;

display:block;

}

.footer{

padding:15px;

text-align:center;

font-size:20px;

font-weight:bold;

color:red;

background:#fafafa;

}

@media(max-width:768px){

.header{

flex-direction:column;

gap:15px;

}

}