:root {
    --bg:#111;
    --fg:#fff;
    --accent:#ffcc00;
}
.viewport {
    position:relative;
    background:#000;
    /* PBN                height:560px; */
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.viewport img {
    max-width:100%;
    max-height:100%;
    cursor:zoom-in;
    display:block;
}
.meta {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
/* PBN    background:linear-gradient(transparent, rgba(0,0,0,0.6)); */
    color:var(--fg);
    padding:1rem;
    box-sizing:border-box;
    display:flex;
    justify-content:space-between;
    gap:1rem;
    align-items:flex-end;
}
.meta .left {
    max-width:70%;
}
.meta-top {
    position:absolute;
    left:0;
    right:0;
    top:0;
    color:var(--fg);
    padding:1rem;
    box-sizing:border-box;
    display:flex;
    justify-content:space-between;
    gap:1rem;
    align-items:flex-end;
}
.meta-top .left {
    max-width:70%;
}
.controls {
    display:flex;
    justify-content:space-between;
    margin-top:0.5rem;
}
button {
    background:#fff;
    border:1px solid #ccc;
    padding:0.5rem 1rem;
    cursor:pointer;
}
.nav-btn {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(255,255,255,0.8);
    border-radius:4px;
}
.nav-prev {
    left:8px;
}
.nav-next {
    right:8px;
}
/* overlay modal */
.overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}
.overlay.open {
    display:flex;
}
.overlay img {
    max-width:95%;
    max-height:90%;
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
}
.overlay .overlay-title {
    position:absolute;
    bottom:5rem;
    left:2rem;
    color:#fff;
    text-shadow:0 2px 6px rgba(0,0,0,0.6);
}
.overlay .overlay-caption {
    position:absolute;
    bottom:4rem;
    left:2rem;
    color:#fff;
    text-shadow:0 2px 6px rgba(0,0,0,0.6);
}
.overlay .overlay-caption1 {
    position:absolute;
    bottom:3rem;
    left:2rem;
    color:#fff;
    text-shadow:0 2px 6px rgba(0,0,0,0.6);
}
/* loading state */
.loading::after {
    content:'';
    position:absolute;
    width:40px;
    height:40px;
    border:4px solid rgba(255,255,255,0.2);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:spin 1s linear infinite;
}
@keyframes spin {
    to {
        transform:rotate(360deg);
    }
}
/* responsive */
@media (max-width:600px) {
    .viewport {
        height:320px;
    }
    .meta .left {
        max-width:60%;
        font-size:14px;
    }
    .meta-top .left {
        max-width:60%;
        font-size:14px;
    }
}