:root{--bg:#0e0e10;--panel:#161618;--line:#26262a;--fg:#ececee;--muted:#8a8a92;--accent:#fff}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.4 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;padding:12px 20px;background:rgba(14,14,16,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-weight:600;letter-spacing:.02em;white-space:nowrap}
.tabs{display:flex;gap:4px;flex:1;justify-content:center;overflow-x:auto}
.tabs button,.filters button{background:none;border:1px solid transparent;color:var(--muted);padding:7px 12px;border-radius:999px;cursor:pointer;font:inherit;white-space:nowrap}
.tabs button:hover,.filters button:hover{color:var(--fg)}
.tabs button.on{color:#000;background:#fff;border-color:#fff;font-weight:500}
.tabs button.on span{color:#555}
.tabs button span{color:var(--muted);margin-left:6px;font-size:12px}
.filters{display:flex;gap:2px}
.filters button.on{color:var(--fg);text-decoration:underline;text-underline-offset:5px}
main{padding:16px 20px 60px}
.meta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin:4px 2px 14px}
.meta a{color:var(--muted)}
.grid{column-count:4;column-gap:12px}
@media(max-width:1400px){.grid{column-count:3}}
@media(max-width:900px){.grid{column-count:2}}
@media(max-width:560px){.grid{column-count:1}}
.card{break-inside:avoid;margin:0 0 12px;position:relative;border-radius:6px;overflow:hidden;background:var(--panel);cursor:zoom-in}
.card img,.card video{display:block;width:100%;height:auto}
.card .tag{position:absolute;top:8px;left:8px;font-size:11px;padding:2px 7px;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;letter-spacing:.04em;text-transform:uppercase;opacity:0;transition:opacity .15s}
.card .idx{position:absolute;bottom:8px;right:8px;font-size:11px;padding:2px 7px;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;opacity:0;transition:opacity .15s}
.card:hover .tag,.card:hover .idx{opacity:1}
.card.video{cursor:default}
.card.gif{cursor:zoom-in}
.card iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lb-stage{max-width:94vw;max-height:88vh;display:flex;align-items:center;justify-content:center}
.lb-stage img,.lb-stage video{max-width:94vw;max-height:88vh;object-fit:contain}
.lb-close,.lb-nav{position:absolute;background:none;border:0;color:#fff;font-size:28px;cursor:pointer;padding:16px;opacity:.7}
.lb-close:hover,.lb-nav:hover{opacity:1}
.lb-close{top:8px;right:12px}
.lb-nav{top:50%;transform:translateY(-50%);font-size:44px}
.lb-nav.prev{left:8px}.lb-nav.next{right:8px}
.lb-caption{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:var(--muted);font-size:12px}
.lb-caption a{color:var(--muted)}