:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #111; color: #eee; }
* { box-sizing: border-box; }
body { margin: 0; }
.toolbar { display: flex; justify-content: flex-end; padding: 8px max(12px, calc((100vw - 1600px) / 2)); }
.icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; color: inherit; background: #242424; border: 1px solid #555; border-radius: 8px; text-decoration: none; cursor: pointer; flex: 0 0 auto; }
.icon:hover { background: #3a3a3a; }
.icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid #b6d8ff; outline-offset: 3px; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; max-width: 1600px; margin: 0 auto; padding: 0 12px 28px; }
.poster { display: flex; flex-direction: column; gap: 7px; align-items: center; color: inherit; text-decoration: none; min-width: 0; }
.poster img { display: block; width: 100%; height: auto; object-fit: contain; }
.poster span { font-size: 14px; font-variant-numeric: tabular-nums; }
dialog { width: calc(100% - 16px); max-width: 1500px; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); padding: 10px; border: 1px solid #555; border-radius: 8px; color: inherit; background: #171717; overflow: hidden; }
dialog::backdrop { background: rgb(0 0 0 / 90%); }
dialog[open] { display: flex; flex-direction: column; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; flex: 0 0 auto; }
.viewer-actions { display: flex; gap: 8px; }
#viewer-number { font-size: 18px; padding-left: 4px; font-variant-numeric: tabular-nums; }
.viewer-image-wrap { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; }
#viewer-image { display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
body:has(dialog[open]) { overflow: hidden; }
@media (min-width: 850px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; padding-inline: 18px; } }
@media (min-width: 1350px) { .gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); } }