body{font-family:system-ui,Arial;margin:0;background:#fafafa;color:#222}
.container{max-width:1000px;margin:36px auto;padding:0 18px}
h1{font-size:1.25rem;margin:0 0 14px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.thumb{cursor:pointer;border-radius:8px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.08);background:#ddd}
.thumb img{width:100%;height:160px;object-fit:cover;display:block;transition:transform .18s ease}
.thumb:active img{transform:scale(.97)}
.hint{margin:10px 0;color:#666}

.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);z-index:9999}
.overlay.open{display:flex}

.slideshow{position:relative;max-width:90vw;max-height:90vh;display:flex;align-items:center;justify-content:center}
.slide-img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* Fade effect */
.fade{opacity:0;transition:opacity .5s ease}
.fade.show{opacity:1}

.caption{position:absolute;left:12px;right:12px;bottom:12px;color:white;text-align:center}
.btn{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:0;color:white;font-size:36px;cursor:pointer;padding:12px}
.prev{left:6px}
.next{right:6px}
.close{position:absolute;top:12px;right:12px;background:transparent;border:0;color:white;font-size:28px;cursor:pointer}