.dp-h { margin: 0; font-size: 1rem; }
.dp-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.dp-thumb { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); }
.dp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dp-num { position: absolute; top: 6px; left: 6px; min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--primary); color: #fff; font-size: .78rem; font-weight: 700; }
.dp-tools { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; padding: 6px; background: linear-gradient(transparent, rgb(0 0 0 / .45)); }
.dp-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgb(255 255 255 / .92); color: #111; cursor: pointer; }
.dp-btn:disabled { opacity: .35; cursor: default; }
.dp-btn .icon { width: 16px; height: 16px; }
.dp-frame { position: fixed; left: -12000px; top: 0; width: 1200px; height: 900px; border: 0; }