:root{--bg:#0b0f14;--panel:#0f1722;--text:#e7eef7;--muted:#9fb0c2;--stroke:rgba(255,255,255,.10);--radius:18px}
*{box-sizing:border-box}
body,html{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:#fff}
.wrap{margin:0 auto;padding:18px}
.masonryCols{display:flex;gap:14px;align-items:flex-start}
.masonryCols .col{flex:1;min-width:0}
.masonryCols .card{margin:0 0 14px}
@media (max-width:900px){
.masonryCols .col[data-col="2"]{display:none}
}
@media (max-width:540px){
.masonryCols .col[data-col="1"]{display:none}
}
.card{position:relative;overflow:hidden;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .6s ease;will-change:opacity,transform}
.card.is-inview{opacity:1;transform:translateY(0)}
.media{position:relative;width:100%;overflow:hidden;background:rgba(255,255,255,.03)}
.media::before{content:"";display:block;padding-top:var(--ratio,75%)}
.skeleton{position:absolute;inset:0;background:rgba(255,255,255,.05);overflow:hidden}
.skeleton::after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);animation:shimmer 1.2s infinite}
@keyframes shimmer{
0%{transform:translateX(-60%)}
100%{transform:translateX(60%)}
}
.thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease,transform .45s ease;transform:scale(1)}
.card.is-loaded .thumb{opacity:1}
.card.is-loaded .skeleton{opacity:0;transition:opacity .2s ease;pointer-events:none}
.media:hover .thumb{transform:scale(1.04)}
.caption{display:none;justify-content:space-between;gap:10px;padding:10px 12px;font-size:12px;color:var(--muted);border-top:1px solid var(--stroke)}
.caption .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{font-variant-numeric:tabular-nums;color:rgba(231,238,247,.78)}
.loader{display:none;margin:20px auto 30px;padding:14px 16px;border:1px solid var(--stroke);border-radius:14px;width:fit-content;background:rgba(255,255,255,.03);align-items:center;gap:10px}
.loader.show{display:flex}
.spinner{width:16px;height:16px;border-radius:999px;border:2px solid rgba(255,255,255,.25);border-top-color:rgba(255,255,255,.85);animation:spin 1s linear infinite}
@keyframes spin{
to{transform:rotate(360deg)}
}
.loaderText{color:var(--muted);font-size:13px}
.end{display:none;text-align:center;color:var(--muted);padding:26px 0 50px}
.end.show{display:block}
.lightbox{width:min(1100px,94vw);border:1px solid var(--stroke);border-radius:20px;padding:0;overflow:hidden;background:rgba(10,14,20,.98);color:var(--text)}
.lightbox::backdrop{background:rgba(0,0,0,.62)}
.lightbox img{width:100%;height:auto;display:block;background:#000}
.lightbox .meta{display:none;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--stroke)}
.lightbox .name{color:rgba(231,238,247,.9);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lightbox .open{color:#8cc8ff;text-decoration:none;border:1px solid var(--stroke);padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.03)}
.lightbox .close{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.06);color:var(--text);font-size:22px;cursor:pointer}
.card{opacity:0;transform:translateY(0);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 2s cubic-bezier(.22,.61,.36,1)}
.card{position:relative;overflow:hidden;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .6s ease;will-change:opacity,transform}
.card.is-inview{opacity:1;transform:translateY(0)}
.thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease,transform .45s ease;transform:scale(1)}
.card.is-loaded .thumb{opacity:1}
.media:hover .thumb{transform:scale(1.04)}
body.is-instagram-wall .wrap{max-width:100%;padding:0}
body.is-instagram-wall #grid.masonryCols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;align-items:start}
body.is-instagram-wall #grid.masonryCols .col{display:contents}
body.is-instagram-wall #grid.masonryCols .card{margin:0;border-radius:0;opacity:1!important;transform:none!important;transition:none!important;overflow:hidden;background:#000}
body.is-instagram-wall #grid.masonryCols .media{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#000}
body.is-instagram-wall #grid.masonryCols .media::before{display:none!important}
body.is-instagram-wall #grid.masonryCols .thumb{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 12%;;opacity:1!important;transform:none!important;filter:none!important;transition:transform .22s ease}
body.is-instagram-wall #grid.masonryCols .media:hover .thumb{transform:scale(1.03)}
body.is-instagram-wall #grid.masonryCols .skeleton{display:none!important}
body.is-instagram-wall #grid.masonryCols .caption{display:none!important}
body.is-instagram-wall .end,body.is-instagram-wall .loader{display:none!important}
@media (max-width:900px){
body.is-instagram-wall #grid.masonryCols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
body.is-instagram-wall #grid.masonryCols{gap:1px}
}