:root{color:#171716;background:#f7f7f5;font-family:system-ui,-apple-system,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:280px;min-height:100dvh;background:#f7f7f5}button{color:inherit;font:inherit}button:focus-visible{outline:3px solid #3178ff;outline-offset:2px}.topbar{position:sticky;z-index:2;top:0;display:flex;align-items:center;justify-content:space-between;min-height:calc(60px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0;border-bottom:1px solid #deded9;background:#f7f7f5eb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.topbar h1{margin:0;font-size:1.25rem;letter-spacing:-.02em}.topbar__actions{display:flex;align-items:center;gap:10px}.count{color:#676762;font-size:.875rem}.icon-button,.viewer__button{display:grid;width:44px;height:44px;padding:0;place-items:center;border:0;border-radius:50%;background:transparent;cursor:pointer}.icon-button{font-size:1.5rem}.welcome{display:grid;min-height:calc(100dvh - 61px);padding:24px;place-content:center;justify-items:center;text-align:center}.welcome__panel{text-align:center}.welcome__panel[hidden],.setup[hidden]{display:none}.welcome p{max-width:28rem;margin:0 0 22px;color:#595954;line-height:1.6}.primary-button{min-height:48px;padding:0 22px;border:0;border-radius:999px;color:#fff;background:#171716;font-weight:700;cursor:pointer}.primary-button:disabled{cursor:wait;opacity:.55}.text-button{min-height:44px;padding:0 4px;border:0;color:#595954;background:transparent;font-size:.875rem;cursor:pointer}.setup{display:grid;width:min(100%,30rem);text-align:left}.setup h2{margin:0 0 12px;font-size:1.5rem;text-align:center}.setup>p{text-align:center}.setup label{margin:0 0 7px;font-size:.875rem;font-weight:700}.setup input{width:100%;min-height:48px;margin:0 0 18px;padding:10px 12px;border:1px solid #c7c7c1;border-radius:10px;background:#fff;font:inherit}.setup .form-error{margin:-4px 0 18px;color:#a12222;text-align:left}.setup .primary-button{justify-self:center}.secondary-button{min-height:44px;margin-top:8px;border:0;color:#595954;background:transparent;cursor:pointer}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px 3px calc(3px + env(safe-area-inset-bottom))}.photo-tile{position:relative;padding:0;overflow:hidden;border:0;aspect-ratio:1;background:#e7e7e2;cursor:pointer}.photo-tile:after{position:absolute;inset:42%;border:2px solid #aaa;border-top-color:transparent;border-radius:50%;content:"";animation:spin .8s linear infinite}.photo-tile.is-loaded:after{display:none}.photo-tile img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease}.photo-tile.is-loaded img{opacity:1}.empty{grid-column:1 / -1;margin:0;padding:25vh 20px;color:#676762;text-align:center}.viewer{position:fixed;z-index:10;inset:0;overflow:hidden;color:#fff;background:#050505;touch-action:none}.viewer[hidden]{display:none}.viewer>img{width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.viewer__ui{position:absolute;inset:0;opacity:1;transition:opacity .18s ease;pointer-events:none}.viewer__ui.is-hidden{opacity:0}.viewer__button{position:absolute;color:#fff;background:#0c0c0c94;font-size:2rem;pointer-events:auto}.viewer__close{top:calc(10px + env(safe-area-inset-top));left:10px;font-size:1.75rem}.viewer__previous{top:50%;left:8px;transform:translateY(-50%)}.viewer__next{top:50%;right:8px;transform:translateY(-50%)}.viewer__position{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));padding:7px 10px;border-radius:999px;background:#0c0c0c94;font-variant-numeric:tabular-nums}.viewer-open{overflow:hidden}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:700px){.gallery{grid-template-columns:repeat(5,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}