.screen.gallery-screen { inset: 90px 0 calc(100lvh - 100dvh); max-width: none; padding: 0; overflow: hidden; text-align: left; }
#gallery { position: absolute; inset: 0 0 72px; outline-offset: -5px; cursor: grab; touch-action: pinch-zoom; user-select: none; }
#gallery.dragging { cursor: grabbing; }
#gallery canvas { width: 100%; height: 100%; display: block; }
.gallery-footer { position: absolute; inset: auto 28px max(8px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; }
.gallery-footer .back, .gallery-footer p { margin: 0; }
.gallery-footer .hint { opacity: .65; }
.gallery-controls { display: flex; align-items: center; gap: 12px; }
.position-lines { display: flex; align-items: center; gap: 5px; height: 4px; }
.position-lines i { width: 1px; height: 1px; background: currentColor; opacity: .1; }
.position-lines i:nth-child(2), .position-lines i:nth-child(6) { height: 2px; opacity: .2; }
.position-lines i:nth-child(3), .position-lines i:nth-child(5) { height: 3px; opacity: .3; }
.position-lines i:nth-child(4) { height: 4px; opacity: 1; }
#gallery #status { position: absolute; inset: 45% 16px auto; max-width: none; text-align: center; }
#fallback { display: none; }
#gallery.fallback canvas { display: none; }
#gallery.fallback { touch-action: pan-x pinch-zoom; }
.fallback #fallback { height: 100%; display: flex; align-items: center; overflow-x: auto; }
#fallback figure { flex: 0 0 min(78vw, 600px); margin: 0 4vw; }
#fallback img { width: 100%; max-height: 65vh; object-fit: contain; object-position: left bottom; }
#fallback figcaption { margin-top: 12px; line-height: 1.4; }
.screen .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 700px) {
  .gallery-footer { left: 16px; right: 16px; bottom: max(8px, env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 4px; }
  .gallery-footer .hint { order: -1; flex-basis: 100%; text-align: center; }
  .gallery-controls { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .fallback #fallback { scroll-behavior: auto; } }