.gallery{--settings-bar-height: 3.5rem}.settings-bar{position:absolute;inset:0;height:var(--settings-bar-height);z-index:10;padding:var(--gap-s);background:linear-gradient(to bottom,rgba(0,0,0,.8),transparent)}.main-content{position:absolute;padding-top:var(--settings-bar-height);width:100%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid}.photogrid{--scale: 3;display:grid;grid-template-columns:repeat(var(--scale),1fr);gap:var(--gap-xs);list-style-type:none}.photo-card{position:relative;aspect-ratio:1 / 1;object-fit:cover;background-color:var(--color-white-5);border-radius:4px;overflow:hidden}.photo-card .photo-actions{position:absolute;bottom:var(--gap-xs);left:var(--gap-xs);font-size:.7rem;display:flex;gap:var(--gap-s);align-items:center;justify-content:center;z-index:20;background-color:#00000080;border-radius:4px;padding:var(--gap-xs)}.photo-card .photo-actions svg{width:.7rem;height:.7rem}.photo-card .photo-action{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.photo-card .photo-action span{margin-left:var(--gap-xs)}.photo-card .photo-action.like{cursor:pointer}.photo-card .cached-image-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.photo-card .cached-image{width:100%;height:100%;object-fit:cover}.settings{list-style-type:none;display:grid;grid-template-columns:repeat(1,auto) 1fr repeat(2,auto);gap:var(--gap-s)}.settings.search-open{grid-template-columns:1fr}.settings .setting-block{height:calc(var(--settings-bar-height) - 1.2rem);display:flex}.setting-block.search{display:flex;gap:var(--gap-s)}.searchbar{display:grid;grid-template-columns:1fr auto auto;width:100%;border-radius:4px;background-color:var(--color-black-4)}.searchbar input,.searchbar button{background:none;border:none;border-radius:0}.searchbar:has(input[type=search]:focus){outline:2px solid var(--color-blue-4)}.searchbar input[type=search]:focus{outline:none}.ListboxOptions{position:absolute;top:var(--gap-s);right:var(--gap-s);width:10rem;z-index:10;display:flex;flex-direction:column;gap:var(--gap-xs)}.ListboxButton,.ListboxOption{box-sizing:border-box;border:none;border-radius:4px;padding:var(--gap-s) var(--gap) var(--gap-s) var(--gap);background-color:var(--color-black-3);color:var(--color-white-3);font-family:inherit;font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:.1s}:is(.ListboxButton,.ListboxOption):hover{background-color:var(--color-black-4)}:is(.ListboxButton,.ListboxOption):active{background-color:var(--color-black-5)}:is(.ListboxButton,.ListboxOption):disabled{color:var(--color-gray-0)}.ListboxButton>div{display:flex;align-items:center;justify-content:center;gap:var(--gap-xs)}.ListboxOption>div{display:flex;align-items:center;justify-content:center;gap:var(--gap-xs)}.like-heart{position:absolute;top:50%;left:50%;color:#ff0050d9;font-size:4rem;pointer-events:none;animation:heart-pop .8s ease-out forwards}.UploadForm{display:flex;flex-direction:column;align-items:center;gap:var(--gap);padding:var(--gap);width:100%;height:calc(var(--vh) * 100);overflow-y:auto}.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-s)}.preview-item{display:flex;flex-direction:column;align-items:center;gap:var(--gap);position:relative}.preview-item img{width:100%;aspect-ratio:1 / 1;object-fit:cover;border-radius:4px}.preview-item span{font-size:.8rem}.info{display:flex;flex-direction:column;gap:var(--gap)}span.icon-text{display:flex;align-items:center;justify-content:center;gap:var(--gap-xs)}button.remove-button{position:absolute;top:var(--gap-xs);right:var(--gap-xs);opacity:.6}.buttons{display:flex;gap:var(--gap-s)}.messages{display:flex;flex-direction:column;gap:var(--gap-xs);align-items:center;justify-content:center}.error{display:grid;grid-template-columns:1fr auto;font-family:monospace;font-size:.8rem;width:100%;padding:var(--gap);border-radius:4px;background-color:var(--color-darkred-0);color:var(--color-lightred-4)}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--vh: 1vh;--gap-xs: calc(var(--gap) * .25);--gap-s: calc(var(--gap) * .5);--gap: 1rem;--gap-l: calc(var(--gap) * 1.5);--gap-xl: calc(var(--gap) * 2);--color-black-0: rgb(00, 00, 10);--color-black-1: rgb(10, 10, 20);--color-black-2: rgb(20, 20, 30);--color-black-3: rgb(30, 30, 40);--color-black-4: rgb(40, 40, 50);--color-black-5: rgb(50, 50, 60);--color-gray-0: rgb(80, 80, 90);--color-gray-1: rgb(90, 90, 100);--color-gray-2: rgb(100, 100, 110);--color-gray-3: rgb(110, 110, 120);--color-gray-4: rgb(120, 120, 130);--color-gray-5: rgb(130, 130, 140);--color-white-0: rgb(255, 255, 255);--color-white-1: rgb(255, 245, 245);--color-white-2: rgb(245, 235, 235);--color-white-3: rgb(235, 225, 225);--color-white-4: rgb(225, 215, 215);--color-white-5: rgb(215, 205, 205);--color-darkred-0: rgb(60, 30, 30);--color-darkred-1: rgb(80, 40, 40);--color-darkred-2: rgb(100, 40, 40);--color-darkred-3: rgb(120, 50, 50);--color-darkred-4: rgb(140, 50, 50);--color-darkred-5: rgb(160, 60, 60);--color-lightred-0: rgb(160, 170, 170);--color-lightred-1: rgb(180, 180, 180);--color-lightred-2: rgb(200, 180, 180);--color-lightred-3: rgb(220, 190, 190);--color-lightred-4: rgb(240, 190, 190);--color-lightred-5: rgb(255, 200, 200);--color-pink-0: rgb(90, 60, 60);--color-pink-1: rgb(100, 70, 70);--color-pink-2: rgb(110, 80, 80);--color-pink-3: rgb(120, 90, 90);--color-pink-4: rgb(130, 100, 100);--color-orange-0: rgb(80, 65, 45);--color-orange-1: rgb(90, 75, 55);--color-orange-2: rgb(110, 95, 75);--color-orange-3: rgb(120, 105, 85);--color-orange-4: rgb(130, 115, 95);--color-blue-0: rgb(55, 65, 90);--color-blue-1: rgb(65, 75, 100);--color-blue-2: rgb(75, 85, 110);--color-blue-3: rgb(85, 95, 120);--color-blue-4: rgb(95, 105, 130);--color-fg: var(--color-white-2);--color-bg: var(--color-black-2);color-scheme:light dark;color:var(--color-fg);background-color:var(--color-bg)}*{margin:0;padding:0;box-sizing:border-box}.page{position:relative;height:calc(var(--vh, 1vh) * 100);overflow:hidden;display:flex;flex-direction:column;gap:var(--gap)}html,body,#root{height:100%}body{width:100vw;height:100vh}input,button,submit,textarea,select,.button{box-sizing:border-box;border:none;border-radius:4px;padding:var(--gap-s) var(--gap) var(--gap-s) var(--gap);background-color:var(--color-black-3);color:var(--color-white-3);font-family:inherit;font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:.1s}:is(input,button,submit,textarea,select,.button):hover{background-color:var(--color-black-4)}:is(input,button,submit,textarea,select,.button):active{background-color:var(--color-black-5)}:is(input,button,submit,textarea,select,.button):disabled{color:var(--color-gray-0)}input[type=text],textarea{border:1px solid var(--color-gray-0)}button.red,submit.red,.button.red{background-color:var(--color-darkred-0);color:var(--color-lightred-5)}:is(button.red,submit.red,.button.red):hover{background-color:var(--color-darkred-1)}:is(button.red,submit.red,.button.red):active{background-color:var(--color-darkred-2)}button.blue,submit.blue,input.blue{background-color:var(--color-blue-1);color:var(--color-white-3)}:is(button.blue,submit.blue,input.blue):hover{background-color:var(--color-blue-2)}:is(button.blue,submit.blue,input.blue):active{background-color:var(--color-blue-3)}:is(button.blue,submit.blue,input.blue):disabled{background-color:var(--color-blue-0);color:var(--color-gray-5)}.button{text-decoration:none;color:inherit}.upload-overlay{z-index:20;position:absolute;bottom:var(--gap);right:var(--gap)}.upload-button{border:none;border-radius:4px;padding:var(--gap-s) var(--gap) var(--gap-s) var(--gap);background-color:var(--color-blue-0);color:var(--color-white-3);font-family:inherit;font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:.1s;text-decoration:none}.upload-button:hover{background-color:var(--color-blue-1)}.upload-button:active{background-color:var(--color-blue-2)}.upload-button:disabled{color:var(--color-gray-0)}.PhotoPage{padding:var(--gap);display:grid;gap:var(--gap-l);grid-template-rows:repeat(3,auto) 1fr;overflow-y:auto}.PhotoPage .photo{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;border-radius:4px}.PhotoPage .photo .cached-image{width:100%;border-radius:4px}.PhotoPage .info{display:grid;width:100%;grid-template-columns:repeat(2,auto) 1fr auto;font-size:.8rem}span.icon-text,span.icon-text span{display:flex;align-items:center;justify-content:center;gap:var(--gap-xs)}.chips{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--gap-s)}.chip{padding:var(--gap-s);background-color:var(--color-black-3);border-radius:4px;font-size:.8rem}.people,.tags:not(.chips){display:flex;flex-direction:column;gap:var(--gap);align-items:center;justify-content:center}.empty{font-size:.8rem;font-style:italic;color:var(--color-blue-4)}.new-person{display:flex;flex-direction:column;gap:var(--gap-s)}.EditPersons.page,.EditTags.page{padding:var(--gap);gap:var(--gap-s);display:flex;flex-direction:column;align-items:center;justify-content:start;overflow-y:auto}.field-label{font-size:.8rem}fieldset,fieldset:active{border:none;outline:none}.chip input[type=checkbox]{display:none}.persons .chip{background-color:var(--color-orange-2)}.persons .chip:has(input[type=checkbox]){cursor:pointer}.persons .chip:has(input[type=checkbox]:not(:checked)){background-color:var(--color-black-5);color:var(--color-white-5)}.persons .chip:has(input[type=checkbox]:checked){background-color:var(--color-orange-2)}.tags .chip{background-color:var(--color-pink-2)}.tags .chip:has(input[type=checkbox]){cursor:pointer}.tags .chip:has(input[type=checkbox]:not(:checked)){background-color:var(--color-black-5);color:var(--color-white-5)}.tags .chip:has(input[type=checkbox]:checked){background-color:var(--color-pink-2)}.report{display:flex;flex-direction:column;gap:var(--gap);align-items:center;justify-content:center}.full-size-link{font-style:italic;color:var(--color-blue-4);font-size:.8rem}.like-heart{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);color:#ff0050d9;font-size:4rem;pointer-events:none;animation:heart-pop .8s ease-out forwards}@keyframes heart-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}50%{transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}.close-button{position:absolute;top:var(--gap-l);right:var(--gap-l);width:2rem;height:2rem;padding:var(--gap-xs);opacity:.7}.arrow-next,.arrow-prev{position:absolute;top:20vh;height:20vh;background:none}.arrow-next{right:0;padding-left:4rem;padding-right:2rem}.arrow-next:hover{background:radial-gradient(circle at right center,#00000080,#0000004d 30%,#0000 75%)}.arrow-prev{left:0;padding-left:2rem;padding-right:4rem}.arrow-prev:hover{background:radial-gradient(circle at left center,#00000080,#0000004d 30%,#0000 75%)}