```css
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,Arial;
  background:#0e0e0e;
  color:#fff;
}

.top{
  padding:16px;
  text-align:center;
  background:#111;
  border-bottom:1px solid #222;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:14px;
  padding:16px;
}

.card{
  cursor:pointer;
  border-radius:12px;
  overflow:hidden;
  background:#111;
  transition:transform .25s ease;
}
.card:hover{transform:scale(1.05)}

.card img{width:100%;display:block}

.card .info{
  padding:8px;
  font-size:14px;
  text-align:center;
}

/* VIEWER */
.viewer-mask{
  position:fixed;
  inset:0;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}

.viewer-frame{
  width:95vw;
  height:95vh;
  background:#000;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.viewer-bar{
  height:48px;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  padding:0 12px;
}

.viewer-bar button{
  background:none;
  border:none;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

.viewer-content{
  flex:1;
}