@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:#fff;font-family:'DM Sans',sans-serif;background:radial-gradient(ellipse at 10% 0%,#48216f 0,transparent 36rem),radial-gradient(ellipse at 100% 28%,#491432 0,transparent 32rem),linear-gradient(150deg,#10091d,#090711 60%,#18091f)}header{display:flex;align-items:center;gap:12px;padding:20px 15px;border-bottom:1px solid #ffffff17;background:#0c0716bb;backdrop-filter:blur(14px)}.logo{display:grid;place-items:center;flex:0 0 46px;height:46px;border-radius:14px;font-weight:800;background:linear-gradient(135deg,#ff4fa3,#8b5cff);box-shadow:0 8px 25px #ff4fa333}small{color:#68eee6;font-size:9px;font-weight:800;letter-spacing:1.7px}h1{margin:3px 0;font:700 clamp(16px,4vw,25px) 'Space Grotesk',sans-serif;letter-spacing:-.7px}h1 span{color:#ff7abb}header p{margin:4px 0 0;color:#b6a9c8;font-size:11px}.live{margin-left:auto;white-space:nowrap;padding:8px;border:1px solid #68eee633;border-radius:20px;color:#b6fffa;font-size:9px;letter-spacing:.7px}main{max-width:1150px;margin:auto;padding:22px 12px}.intro{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px;margin-bottom:18px;border:1px solid #ffffff18;border-radius:20px;background:linear-gradient(120deg,#8b45d52c,#ff4fa311,#ffffff06)}h2{font:700 clamp(19px,4vw,27px) 'Space Grotesk',sans-serif;letter-spacing:-.7px;margin:7px 0}.intro p{font-size:12px;color:#b6a9c8;margin:0}.count{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 62px;height:62px;border-radius:16px;border:1px solid #ffffff22;background:#09061166;font:700 25px 'Space Grotesk'}.count small{font-size:8px;margin-top:2px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.card{display:block;min-width:0;overflow:hidden;color:white;text-decoration:none;border:1px solid #ffffff17;border-radius:14px;background:#181027;box-shadow:0 9px 24px #0004}.thumb{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--a),var(--b));isolation:isolate}.thumb:before,.thumb:after{content:'';position:absolute;z-index:-1;border-radius:50%;background:#ffffff24;width:80%;aspect-ratio:1;right:-24%;top:-55%}.thumb:after{background:#08041244;left:-25%;right:auto;top:auto;bottom:-60%;width:70%}.num{font:700 clamp(30px,8vw,48px) 'Space Grotesk';letter-spacing:-3px;text-shadow:0 4px 20px #0003}.tag{position:absolute;left:8px;top:8px;padding:5px 6px;border-radius:5px;background:#09061155;border:1px solid #ffffff33;font-size:8px;font-weight:800;letter-spacing:1px}.duration{position:absolute;right:7px;bottom:7px;padding:4px 6px;border-radius:5px;background:#050309cc;font-size:10px;font-weight:700}.info{display:flex;align-items:center;gap:8px;padding:10px}.play{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:9px;background:linear-gradient(135deg,#ff4fa3,#9258ff);font-size:10px}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:12px;font-weight:700}.sub{margin:3px 0 0;color:#a99ab9;font-size:10px}footer{text-align:center;padding:24px 5px 10px;color:#9385a4;font-size:10px;line-height:1.8}.backdrop{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:20px;background:#040209cc;backdrop-filter:blur(9px)}.backdrop[hidden]{display:none}.modal{width:min(100%,360px);padding:25px 22px 22px;text-align:center;border:1px solid #ffffff22;border-radius:23px;background:linear-gradient(145deg,#281436,#120c1d);box-shadow:0 25px 80px #0009}.arrow{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 13px;border-radius:15px;background:#ff4fa31c;color:#ff86bd;font-size:24px}.modal h2{font-size:23px}.modal p{margin:0 0 18px;color:#b6a9c8;font-size:13px}button{width:100%;min-height:44px;margin-top:9px;border:0;border-radius:12px;color:white;font:700 13px 'DM Sans';background:linear-gradient(100deg,#ff4fa3,#9258ff);cursor:pointer}.secondary{color:#c6b9d4;border:1px solid #ffffff20;background:#ffffff09}@media(min-width:620px){main{padding:30px 24px}.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.thumb{aspect-ratio:16/9}.info{padding:12px}.title{font-size:13px}}@media(min-width:960px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Real thumbnail files from thumbnails/ */

.thumbnail-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.thumb .tag,
.thumb .duration,
.thumb .num {
  z-index: 1;
}