body{
margin:0;
font-family:Arial;
background:#0f172a;
color:#e2e8f0;
}

header{
text-align:center;
padding:20px;
}

h1{
margin:0;
font-size:32px;
}

.sub{
font-size:12px;
letter-spacing:3px;
opacity:0.7;
}

nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
padding:10px;
}

button{
background:#1e293b;
color:white;
border:none;
padding:10px 15px;
cursor:pointer;
}

button.active{
color:#94a3b8;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:15px;
padding:15px;
}

.card{
background:#1e293b;
padding:10px;
}

iframe{
width:100%;
height:180px;
border:0;
}

.desc{
margin-top:6px;
font-size:14px;

display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.desc.open{
-webkit-line-clamp:unset;
}

.more{
display:block;
margin-top:4px;
font-size:13px;
color:#94a3b8;
cursor:pointer;
}
.video{
width:100%;
height:180px;
background:#0f172a;
}

.video iframe{
width:100%;
height:100%;
border:0;
}