:root { color-scheme: light; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #171717; background: #fff; --gutter: 24px; --gap: 24px; --columns: 3; --title-size: 1rem; --title-leading: 1.45; }
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 1px solid #171717; outline-offset: 5px; }
header { height: 88px; display: flex; align-items: center; padding: 0 var(--gutter); }
.wordmark { font-size: 25px; font-weight: 600; letter-spacing: -1.3px; }
main { margin: 0 var(--gutter); }
#gallery { position: relative; }
.tile { position: absolute; top: 0; left: 0; }
.tile-button { display: block; width: 100%; text-align: left; }
.tile-image { width: 100%; height: auto; aspect-ratio: 1; display: block; object-fit: contain; background: #fff; }
.tile-name { display: block; margin-top: 16px; font-size: var(--title-size); font-weight: 500; line-height: var(--title-leading); letter-spacing: -.015em; overflow-wrap: anywhere; }
.tile-button:hover .tile-name { text-decoration: underline; text-underline-offset: 3px; }
#status { font-size: 14px; padding: 32px 0; }
[hidden] { display: none !important; }
dialog { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; max-width: 100%; max-height: 100dvh; margin: 0; padding: env(safe-area-inset-top, 0px) max(var(--gutter), env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(var(--gutter), env(safe-area-inset-left, 0px)); border: 0; overflow: hidden; background: #fff; color: inherit; }
dialog[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
dialog::backdrop { background: #fff; }
.viewer-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 76px; gap: 16px; flex-wrap: wrap; }
#share { min-height: 44px; font-size: .875rem; }
.share-feedback { flex-basis: 100%; padding-bottom: 12px; }
#share-status { margin: 0; font-size: .875rem; }
#share-link { width: 100%; min-width: 0; margin-top: 8px; padding: 8px 0; border: 0; border-bottom: 1px solid #171717; border-radius: 0; font: inherit; font-size: .875rem; background: #fff; color: inherit; }
#close { min-height: 44px; font-size: 14px; display: flex; gap: 16px; align-items: center; }
#close span { font-size: 26px; font-weight: 300; }
.viewer-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; touch-action: pan-y pinch-zoom; }
#viewer-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; user-select: none; }
#image-error { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: .875rem; }
.viewer-footer { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 20px; min-height: 92px; padding: 16px 0; }
#viewer-name { margin: 0; text-align: center; font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.3; overflow-wrap: anywhere; max-height: 25dvh; overflow-y: auto; }
.arrow { width: 48px; height: 48px; font-size: 26px; }
.arrow:hover, #close:hover, #share:hover { opacity: .5; }
@media (min-width: 1800px) { :root { --columns: 4; } }
@media (max-width: 1000px) { :root { --columns: 2; --gutter: 20px; --gap: 20px; } }
@media (max-width: 580px) { :root { --columns: 1; --gutter: 16px; --gap: 24px; } header { height: 76px; } .viewer-toolbar { min-height: 64px; } .viewer-footer { min-height: 84px; gap: 12px; } }
@media (max-height: 480px) { .viewer-toolbar { min-height: 48px; } .viewer-footer { min-height: 60px; padding: 6px 0; } }