:root{
  --bg:#07060f;--bg2:#0d0b1f;--ink:#f2f0ff;--mute:#a39fc0;--dim:#6d6990;
  --magenta:#ff3d8b;--teal:#3ee6d8;--amber:#ffb347;--violet:#8b5cff;--emerald:#2ee59d;
  --chrome:linear-gradient(135deg,#f5f7ff 0%,#9aa3b8 28%,#e9ecf5 50%,#6f778c 72%,#dfe3ee 100%);
  --radius:18px;--display:"Unbounded",system-ui,sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);min-height:100vh;overflow-x:hidden}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* starfield + aurora backdrop */
.sky{position:fixed;inset:0;z-index:-2;
  background:
   radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 72% 12%,#fff9 50%,transparent 51%),
   radial-gradient(1.5px 1.5px at 38% 62%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 88% 48%,#fff8 50%,transparent 51%),
   radial-gradient(1px 1px at 55% 30%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 22% 85%,#fff6 50%,transparent 51%),
   radial-gradient(1px 1px at 92% 82%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 5% 50%,#fff5 50%,transparent 51%),
   radial-gradient(60vw 40vh at 15% 0%,#ff3d8b2e,transparent 70%),
   radial-gradient(55vw 45vh at 90% 10%,#3ee6d826,transparent 70%),
   radial-gradient(70vw 50vh at 50% 110%,#8b5cff2a,transparent 70%),
   linear-gradient(180deg,#07060f,#0b0920 55%,#07060f);
  background-size:220px 220px,260px 260px,300px 300px,240px 240px,200px 200px,280px 280px,320px 320px,180px 180px,auto,auto,auto,auto}
.grain{position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}

/* hero */
.hero{padding:clamp(48px,9vw,110px) 20px clamp(28px,5vw,48px);text-align:center}
.eyebrow{margin:0 0 14px;font:600 12px/1 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--teal)}
.hero h1{margin:0;font:800 clamp(44px,10vw,112px)/.95 var(--display);letter-spacing:-.02em;
  background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 28px #ff3d8b55) drop-shadow(0 0 60px #3ee6d833)}
.tagline{max-width:560px;margin:18px auto 0;color:var(--mute);font-size:clamp(15px,2vw,18px)}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font:600 14px/1 var(--body);text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.btn svg{width:18px;height:18px;fill:currentColor}
.btn-sub{background:linear-gradient(135deg,var(--magenta),#ff6a3d);color:#fff;box-shadow:0 8px 30px #ff3d8b55}
.btn-sub:hover{transform:translateY(-2px);box-shadow:0 12px 40px #ff3d8b88}
.btn-ghost{border:1px solid #ffffff2a;background:#ffffff0a;backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--teal);box-shadow:0 0 24px #3ee6d844}
.btn.small{padding:9px 16px;font-size:13px}

/* controls */
main{max-width:1320px;margin:0 auto;padding:0 clamp(14px,3vw,32px) 60px}
.controls{position:sticky;top:0;z-index:5;padding:14px 0 10px;margin-bottom:10px;
  background:linear-gradient(180deg,#07060fee 70%,#07060f00);backdrop-filter:blur(6px)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;-webkit-mask:linear-gradient(90deg,#000 92%,transparent)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 14px;border-radius:999px;border:1px solid #ffffff22;background:#ffffff08;color:var(--mute);font:500 13px/1 var(--body);cursor:pointer;white-space:nowrap;transition:.2s}
.chip:hover{color:var(--ink);border-color:#ffffff55}
.chip[aria-selected=true]{color:#07060f;background:var(--chrome);border-color:transparent;box-shadow:0 0 20px #3ee6d844}
.chip small{opacity:.6;margin-left:4px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.field{flex:1 1 160px;min-width:0}
.field.search{flex:2 1 240px}
input,select{width:100%;padding:10px 14px;border-radius:12px;border:1px solid #ffffff1f;background:#110f24cc;color:var(--ink);font:14px var(--body);outline:none}
input:focus,select:focus{border-color:var(--teal);box-shadow:0 0 0 3px #3ee6d822}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.count{margin:10px 2px 0;color:var(--dim);font-size:13px}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:clamp(12px,1.6vw,20px)}
@media (max-width:480px){.grid{grid-template-columns:repeat(2,1fr);gap:10px}}
.card{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:var(--bg2);
  aspect-ratio:9/16;isolation:isolate;outline:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(160deg,#ffffff55,#ffffff08 40%,#ffffff22);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:2;pointer-events:none}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#07060f66 0%,transparent 22%,transparent 45%,#07060fe6 85%);z-index:1}
.card:hover,.card:focus-visible{transform:translateY(-4px);box-shadow:0 18px 50px -10px #ff3d8b66,0 0 0 1px #3ee6d866}
.card:hover img,.card:focus-visible img{transform:scale(1.06);filter:saturate(1.15)}
.cat{position:absolute;top:10px;left:10px;z-index:3;padding:5px 9px;border-radius:999px;font:600 10px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;
  background:#07060fb3;border:1px solid var(--c,#3ee6d8);color:var(--c,#3ee6d8);backdrop-filter:blur(6px)}
.play{position:absolute;top:50%;left:50%;z-index:3;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;display:grid;place-items:center;
  background:#ffffff1c;border:1px solid #ffffff55;backdrop-filter:blur(8px);opacity:0;transform:scale(.8);transition:.3s}
.play::after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.card:hover .play,.card:focus-visible .play{opacity:1;transform:scale(1)}
.info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:12px}
.info h3{margin:0 0 6px;font:700 14px/1.25 var(--display);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 12px #000}
.tags{display:flex;flex-direction:column;gap:3px;font-size:11.5px;line-height:1.3;color:#d9d6ef}
.tags span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tags b{font-weight:600}
.t-feat b{color:var(--magenta)}.t-loc b{color:var(--teal)}.t-mus b{color:var(--amber)}
@media (max-width:480px){.info{padding:9px}.info h3{font-size:12.5px}.tags{font-size:10.5px}.cat{font-size:9px;top:8px;left:8px}}
.empty{text-align:center;color:var(--mute);padding:60px 0}
.linkbtn{background:none;border:0;color:var(--teal);font:inherit;cursor:pointer;text-decoration:underline}

/* modal */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:#04030acc;backdrop-filter:blur(14px)}
.modal-box{position:relative;display:flex;gap:22px;align-items:flex-end;max-height:100%;animation:pop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}}
.player{height:min(86vh,760px);aspect-ratio:9/16;max-width:calc(100vw - 32px);border-radius:var(--radius);overflow:hidden;background:#000;
  box-shadow:0 0 0 1px #ffffff26,0 30px 90px -10px #ff3d8b55,0 0 120px -20px #3ee6d855}
.player iframe{width:100%;height:100%;border:0;display:block}
.modal-info{width:300px;padding-bottom:6px}
.modal-info h2{margin:0 0 12px;font:700 20px/1.25 var(--display)}
.meta{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#d9d6ef;margin-bottom:16px}
.meta b{font-weight:600}
.close{position:absolute;top:-6px;right:-50px;width:40px;height:40px;border-radius:50%;border:1px solid #ffffff33;background:#ffffff12;color:#fff;font-size:16px;cursor:pointer}
.close:hover{border-color:var(--magenta)}
@media (max-width:860px){
  .modal{padding:0}
  .modal-box{flex-direction:column;align-items:center;gap:10px;width:100%}
  .player{height:auto;width:min(100vw,calc(78vh*9/16));max-width:100vw}
  .modal-info{width:min(100vw,calc(78vh*9/16));padding:0 14px}
  .modal-info h2{font-size:16px;margin-bottom:6px}.meta{font-size:12.5px;margin-bottom:8px}
  .close{top:8px;right:8px;z-index:2;background:#000a}
}
.foot{text-align:center;color:var(--dim);font-size:13px;padding:30px 20px 50px;border-top:1px solid #ffffff10}