.tnW2Wrap { max-width:1200px; margin:24px auto; padding:0 16px; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.tnW2Title { font-size:22px; font-weight:650; margin:0 0 16px 0; }

.tnW2Grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
@media (min-width:600px){ .tnW2Grid{ grid-template-columns: repeat(3, 1fr); gap:14px; } }
@media (min-width:900px){ .tnW2Grid{ grid-template-columns: repeat(4, 1fr); gap:16px; } }
@media (min-width:1200px){ .tnW2Grid{ grid-template-columns: repeat(5, 1fr); } }

.tnW2Card{
  display:flex; flex-direction:column;
  background:#f4eded;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}

.tnW2Video{
  position:relative;
  aspect-ratio:9/16;
  background:#0b0b0c;
}

.tnW2Video mux-player{ width:100%; height:100%; display:block; background:#000; }

.tnW2Tap{
  position:absolute; inset:0; bottom:25%; z-index:5;
  cursor:pointer; background:transparent; border:none; padding:0; margin:0;
  -webkit-tap-highlight-color:transparent;
}

.tnW2Meta{
  padding:8px 10px;
  color:#1a1a1a; font-size:13px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}

.tnW2LoadMore{
  display:block; margin:24px auto 0; padding:14px 40px;
  font-size:16px; font-weight:600;
  color:#fff; background:#333; border:none; border-radius:10px;
  cursor:pointer; transition:background .2s ease;
}
.tnW2LoadMore:hover{ background:#555; }
.tnW2LoadMore:disabled{ opacity:.5; cursor:default; }

.tnW2Loading{ text-align:center; padding:20px 0; color:#888; font-size:14px; }

.tnW2Skeleton{
  background:#0b0b0c;
  border-radius:14px;
  aspect-ratio:9/16;
  animation: tnW2Pulse 1.2s ease-in-out infinite;
}
@keyframes tnW2Pulse{
  0%,100%{ opacity:.3; }
  50%{ opacity:.15; }
}