.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14px;color:var(--muted);transition:all .2s}
.chip:hover{color:var(--fg);border-color:rgba(255,255,255,.3)}
.chip.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}

.grid{columns:3 320px;column-gap:16px}
.tile{break-inside:avoid;margin-bottom:16px;position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:var(--bg-2);display:block;width:100%;text-align:left;transition:opacity .4s,transform .4s}
.tile.hide{display:none}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tile video{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.tile.playing video{opacity:1}
.tile:hover img,.tile:hover video{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,8,10,.9));pointer-events:none}
.tile-meta{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:20px;display:grid;gap:6px}
.tile-meta h3{font-size:clamp(26px,2.4vw,34px)}
.tile-meta p{color:rgba(242,239,232,.7)}
.tile-play{position:absolute;top:16px;right:16px;z-index:1;width:46px;height:46px;border-radius:50%;background:rgba(7,8,10,.5);backdrop-filter:blur(6px);display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);transition:background .2s,transform .2s}
.tile:hover .tile-play{background:var(--accent);transform:scale(1.08)}
.tile-play svg{width:14px;height:14px;fill:currentColor;margin-left:2px}
.tile-badge{position:absolute;top:16px;left:16px;z-index:1;background:rgba(7,8,10,.55);backdrop-filter:blur(6px);padding:6px 10px;border-radius:999px;color:var(--fg)}

.lightbox{position:fixed;inset:0;z-index:100;background:rgba(4,5,6,.96);display:grid;grid-template-rows:1fr auto;padding:clamp(16px,4vw,48px);gap:16px}
.lightbox[hidden]{display:none}
.lb-stage{display:grid;place-items:center;min-height:0}
.lb-stage video{max-height:100%;max-width:100%;border-radius:10px;background:#000}
.lb-meta{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;justify-content:center;text-align:center}
.lb-meta p{color:var(--muted)}
.lb-close{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);font-size:18px;background:rgba(7,8,10,.6)}
.lb-close:hover{background:var(--accent);color:#000}