:root { color-scheme: light; --background:#f2f2f2; --tileBackground:#fff; --textColor:#222; --overlayBackground:#141414; --gapPx:16px; --pagePaddingPx:20px; --tilePaddingPx:12px; --tileMinWidthPx:320px; --maxContentWidthPx:1440px; --tileRadiusPx:0px; --imageFit:contain; }
* { box-sizing:border-box } body { margin:0; background:var(--background); color:var(--textColor); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased } button,a { -webkit-tap-highlight-color:transparent } button { font:inherit; cursor:pointer } a { color:inherit; text-underline-offset:5px } :focus-visible { outline:2px solid #737373; outline-offset:5px } .skip { position:fixed; left:16px; top:-100px; z-index:5; background:white; padding:16px } .skip:focus { top:16px }
.page { max-width:var(--maxContentWidthPx); padding:0 var(--pagePaddingPx); margin:auto } header { padding:46px 0 28px } .heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px } h1 { font-size:24px; line-height:1.3; font-weight:400; letter-spacing:-.7px; margin:0 } #count { font-size:12px; font-variant-numeric:tabular-nums; opacity:.6; white-space:nowrap } #breadcrumbs { display:flex; flex-wrap:wrap; gap:10px; font-size:12px; margin-bottom:22px } #breadcrumbs:empty { display:none } #albums { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:22px; font-size:13px } #albums:empty { display:none } #albums a { display:inline-flex; align-items:center; gap:8px; min-height:44px; text-decoration:none } #albums a::after { content:'↗'; opacity:.45 } #albums a:hover { text-decoration:underline } #status { font-size:14px; padding:20px 0; line-height:1.7 } #status:empty { display:none }
#grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,max(var(--tileMinWidthPx),calc((100% - 2 * var(--gapPx)) / 3))),1fr)); gap:var(--gapPx) } .tile { -webkit-appearance:none; appearance:none; position:relative; aspect-ratio:1; min-width:0; padding:var(--tilePaddingPx); border:0; border-radius:var(--tileRadiusPx); background:var(--tileBackground); overflow:hidden; display:flex; align-items:center; justify-content:center } .tile img { position:absolute; top:var(--tilePaddingPx); left:var(--tilePaddingPx); width:calc(100% - 2 * var(--tilePaddingPx)); height:calc(100% - 2 * var(--tilePaddingPx)); min-width:0; min-height:0; display:block; object-fit:var(--imageFit); opacity:0; transition:opacity .22s ease } .tile.loaded img { opacity:1 } .tile.failed img { display:none } .tile .error { font-size:12px; line-height:1.7; padding:10px; color:var(--textColor) } .tile:not(.loaded):not(.failed)::after { content:''; position:absolute; width:4px; height:4px; border-radius:50%; background:#bbb } #sentinel { height:1px } footer { padding:36px 0 28px; opacity:.4; font-size:11px; letter-spacing:.05em }
dialog { border:0; padding:0; margin:0; width:100%; max-width:none; height:100vh; height:100dvh; max-height:none; background:var(--overlayBackground); color:white; overflow:hidden } dialog::backdrop { background:var(--overlayBackground) } dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto } .lightbox-top,.lightbox-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left)); min-height:64px; font-size:12px; color:#ccc } .lightbox-top { padding-top:max(12px,env(safe-area-inset-top)) } .lightbox-bottom { padding-bottom:max(18px,env(safe-area-inset-bottom)) } #caption { white-space:nowrap; overflow:hidden; text-overflow:ellipsis } #close,.arrow { border:0; color:#fff; background:rgba(20,20,20,.5); width:48px; height:48px; display:grid; place-items:center; font-size:28px; border-radius:50%; flex-shrink:0 } #close { font-size:34px } #stage { position:relative; min-height:0; margin:0 76px; display:flex; align-items:center; justify-content:center; touch-action:pan-y } #preview { width:100%; height:100%; object-fit:contain } #preview-status { position:absolute; bottom:8px; background:rgba(20,20,20,.8); padding:8px 12px; font-size:12px; max-width:90%; text-align:center } #preview-status:empty { display:none } #retry-preview { position:absolute; background:white; color:#222; border:0; padding:14px; min-height:44px } .arrow { position:absolute; top:50%; transform:translateY(-50%) } .previous { left:16px } .next { right:16px } button:disabled { opacity:.25; cursor:default } [hidden] { display:none!important } body.modal-open { overflow:hidden } .keyboard-hint { opacity:.45; white-space:nowrap }
@media(max-width:600px) { header { padding-top:28px; padding-bottom:22px } h1 { font-size:22px } #stage { margin:0 12px } .arrow { top:auto; bottom:max(66px,calc(env(safe-area-inset-bottom) + 50px)); width:44px; height:44px; font-size:24px; transform:none } .previous { left:12px } .next { right:12px } .keyboard-hint { display:none } .lightbox-bottom { min-height:56px } }
@media(max-height:450px) { .lightbox-top,.lightbox-bottom { min-height:44px; padding-top:0; padding-bottom:0 } #close { height:44px } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important } }
.page { padding-top:var(--pagePaddingPx); padding-bottom:var(--pagePaddingPx) }
#breadcrumbs { margin:0 0 12px } #breadcrumbs:empty { display:none } #breadcrumbs a { display:grid; place-items:center; width:44px; height:44px; text-decoration:none; font-size:24px }
.lightbox-bottom { justify-content:center; min-height:68px }
#sharing { font-size:12px; max-width:100%; text-align:center }
.share-icons { display:flex; justify-content:center; flex-wrap:wrap; gap:6px }
.share-icons button,.share-icons a { display:grid; place-items:center; width:44px; height:44px; padding:11px; border:0; border-radius:50%; background:transparent; color:#c8c8c8; cursor:pointer; text-decoration:none }
.share-icons svg { display:block; width:22px; height:22px; fill:currentColor }
.share-icons button:hover,.share-icons a:hover { background:#303030; color:white }
#share-facebook:hover { color:#5b9bff } #share-whatsapp:hover { color:#25d366 } #share-telegram:hover { color:#46b5ed }
#share-status { margin:0; padding:0 12px; line-height:1.5 } #share-status:empty { display:none }
#share-url { width:100%; margin-top:8px; padding:10px; color:white; background:#333; border:1px solid #777 }


.site-footer { max-width:var(--maxContentWidthPx); margin:0 auto; padding:32px var(--pagePaddingPx) 28px; text-align:center; color:#707070; opacity:1; font-size:12px; line-height:1.8; letter-spacing:.02em }
.site-footer span,.site-footer a { display:inline-block; margin:0 8px }
.site-footer a { text-decoration:none }
.site-footer a:hover,.site-footer a:focus-visible { text-decoration:underline; color:var(--textColor) }

.contact-page { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column }
.contact-content { width:100%; max-width:600px; margin:0 auto; padding:40px 24px 24px; flex:1 }
.contact-back { display:inline-flex; align-items:center; min-height:44px; margin-bottom:28px; font-size:13px; color:#666; text-decoration:none }
.contact-back:hover { text-decoration:underline }
.contact-content h1 { font-size:28px; line-height:1.3; letter-spacing:-.5px }
.contact-intro { margin:12px 0 28px; color:#666; line-height:1.6 }
.contact-form { display:flex; flex-direction:column; gap:10px }
.contact-form label { margin-top:12px; font-size:13px }
.contact-form input:not([type=hidden]),.contact-form textarea { width:100%; min-width:0; padding:13px 14px; border:1px solid #ccc; border-radius:3px; background:#fff; color:var(--textColor); font:inherit; font-size:16px; line-height:1.5 }
.contact-form textarea { min-height:170px; resize:vertical }
.contact-note { margin:6px 0; color:#666; font-size:12px; line-height:1.7 }
.contact-submit { align-self:flex-start; min-height:46px; margin:6px 0; padding:12px 24px; border:1px solid #222; border-radius:3px; background:#222; color:#fff; font-size:14px }
.contact-submit:hover { background:#444 }
@media(max-width:600px) { .contact-content { padding-top:20px } .contact-back { margin-bottom:20px } }