:root { color-scheme: dark; background: #080a09; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
button { -webkit-tap-highlight-color: transparent; }
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}
.tile { border: 0; padding: 0; min-width: 0; min-height: 0; overflow: hidden; cursor: zoom-in; background: #17201b; }
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease, filter 350ms ease; }
button:focus-visible { outline: 2px solid #ffdc64; outline-offset: -4px; }
@media (hover: hover) {
  .tile:hover img { transform: scale(1.035); filter: brightness(1.08); }
  .control:hover { background: #ffffff30; }
}
.viewer { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: #050706; overflow: hidden; }
.viewer::backdrop { background: #050706; }
.viewer:fullscreen { width: 100vw; height: 100dvh; }
.stage { display: grid; place-items: center; width: 100%; height: 100%; touch-action: pan-y pinch-zoom; }
.viewer-image { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; }
.control { display: grid; place-items: center; position: absolute; width: 48px; height: 48px; border: 1px solid #ffffff24; border-radius: 50%; padding: 12px; color: #fff; background: #10161380; backdrop-filter: blur(12px); cursor: pointer; transition: background 180ms ease; }
.control svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.close { top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); }
.previous { top: 50%; left: max(18px, env(safe-area-inset-left)); transform: translateY(-50%); }
.next { top: 50%; right: max(18px, env(safe-area-inset-right)); transform: translateY(-50%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .gallery { gap: 2px; padding: 2px; }
  .control { width: 44px; height: 44px; padding: 11px; }
  .previous { left: max(10px, env(safe-area-inset-left)); }
  .next { right: max(10px, env(safe-area-inset-right)); }
  .close { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }