:root { --gap:10px; --bg:#0b0b0c; --tile:#151517; --fg:#f3f3f4; --accent:#0a7; }
* { box-sizing: border-box; }
body { margin:0; color:var(--fg); background:var(--bg);
       font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }

header { position:sticky; top:0; z-index:10; padding:12px 16px;
         background:linear-gradient(#111,#0b0b0c); border-bottom:1px solid #222; }
h1 { margin:0; font-size:1.1rem; letter-spacing:.4px; }

/* Keep the outer padding the same (10px), shrink gaps between tiles */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
        gap:6px; padding:10px; }

.tile { background:var(--tile); border-radius:0; overflow:hidden; position:relative; }
.imgwrap { position:relative; width:100%; padding-top:100%; overflow:hidden; background:#0f0f12; }
.tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 120ms ease; }
.tile:hover img { transform:scale(1.02); }

/* remove the bottom line entirely */
.meta { display:none !important; }

/* little hint at the top-right */
.hint { position:absolute; right:8px; top:8px; background:rgba(0,0,0,.45); color:#eee;
        font-size:.75rem; padding:4px 6px; border-radius:0; }

.sentinel { height:1px; }

/* Overlay */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; }
.sheet { background:#0f0f12; border:1px solid #2a2a2e; border-radius:0; padding:16px;
         width:min(860px,94vw); color:#eaeaf0; }
.sheet h2 { margin:0 0 8px 0; font-size:1.05rem; display:flex; justify-content:space-between; align-items:center; }
.bigimg { width:100%; height:min(78vh,72vw); object-fit:contain; background:#0b0b0c; border-radius:0; }
.close { border:none; background:#222; color:#ccc; padding:6px 10px; border-radius:0; cursor:pointer; }

/* desktop glass arrows on tiles */
.tile .arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  padding:10px 12px; background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  cursor:pointer; user-select:none; opacity:0; transition:opacity 150ms ease;
}
.tile:hover .arrow { opacity:1; }
.tile .arrow.left { left:6px; }
.tile .arrow.right { right:6px; }
.tile .arrow svg { width:16px; height:16px; display:block; color:#fff; }
@media (pointer: coarse) { .tile .arrow { display:none; } }

/* desktop glass arrows inside overlay */
.viewer { position:relative; width:100%; display:flex; align-items:center; justify-content:center; }
.ov-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  padding:12px 14px; background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18); backdrop-filter: blur(8px);
  cursor:pointer; user-select:none;
}
.ov-arrow.left { left:10px; }
.ov-arrow.right { right:10px; }
.ov-arrow svg { width:18px; height:18px; }
@media (pointer: coarse) { .ov-arrow { display:none; } }

/* Overlay three-column layout */
.viewer { display:flex; gap:12px; align-items:start; }
.ov-thumbs {
  width:88px; max-height:72vh; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:6px;
}
.ov-thumbs img { width:100%; height:72px; object-fit:cover; display:block; cursor:pointer; border:2px solid transparent; }
.ov-thumbs img:focus, .ov-thumbs img:hover { border-color:rgba(255,255,255,0.16); }
.ov-main { flex:1 1 auto; display:flex; align-items:center; justify-content:center; position:relative; }
.ov-main .ov-arrow { position:absolute; z-index:5; }
.ov-main .bigimg { width:100%; height:min(78vh,72vw); object-fit:contain; }
.ov-meta { width:300px; max-width:36vw; padding:8px 12px; background:transparent; color:#ddd; border-left:1px solid rgba(255,255,255,0.04); }
.ov-meta h3 { margin-top:0; }
.meta-placeholder { color:#bdbdbd; font-size:0.95rem; }

/* static loader */
#loader {
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.75); z-index:9999; flex-direction:column; gap:12px;
}
#loader .label, #loader-text { font-size:1rem; color:#eaeaf0; letter-spacing:.3px; padding:8px 12px; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.06); border-radius:4px; }

/* About slide-out panel */
.about-toggle {
  position:fixed; right:8px; top:48%; z-index:10000; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.6);
  color:#fff; border:1px solid rgba(255,255,255,0.08); border-radius:20px; cursor:pointer;
  opacity:0; transform:translateX(8px); pointer-events:none; transition:opacity 220ms ease, transform 220ms ease;
}
.about-toggle .chev { display:inline-block; transform:none; font-size:22px; }

.about-panel {
  position:fixed; top:0; right:0; bottom:0; width:360px; max-width:90vw; transform:translateX(100%);
  background:#0f0f12; border-left:1px solid #222; box-shadow:-12px 0 24px rgba(0,0,0,0.6);
  transition:transform 280ms ease; z-index:9999; display:flex; flex-direction:column;
}
.about-panel[aria-hidden="false"] { transform:translateX(0); }
.about-sheet { padding:16px; overflow:auto; }
.about-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.about-close { background:#222; color:#ddd; border:none; padding:6px 8px; cursor:pointer; }
.about-content { margin-top:12px; color:#ddd; line-height:1.45; }

/* reveal toggle after initial load */
body.about-ready .about-toggle { opacity:1; transform:translateX(0); pointer-events:auto; }