:root{color-scheme:dark;font-family:Newsreader,Georgia,serif;background:#000;color:#eee;scrollbar-gutter:stable}
*{box-sizing:border-box}body{margin:0;background:#000;font-size:20px;line-height:1.5}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:default}a:focus-visible,button:focus-visible{outline:2px solid #ccc;outline-offset:4px}.skip{position:absolute;left:20px;top:-100px;background:#111;padding:10px;z-index:10}.skip:focus{top:12px}
main{padding:12px 0 calc(140px + env(safe-area-inset-bottom))}.intro{padding:30px 4vw 34px}h1{font-size:48px;font-weight:500;line-height:1.15;margin:0 0 12px}.intro p{margin:0;color:#aaa;font-size:20px}.meta{font:12px/1.5 system-ui,sans-serif;color:#aaa}
.stream{--column-width:200px;--gap:2px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--column-width)),1fr));grid-auto-rows:1px;align-items:start;gap:0 var(--gap);padding:0 12px}
.stream>.photo{min-width:0;margin:0;aspect-ratio:var(--ratio,1.333333)}
.stream.list{--column-width:360px}
.album-unlock{display:grid;place-items:center;min-height:65svh;padding:40px 24px}.album-unlock form{display:grid;gap:16px;width:min(100%,360px)}.album-unlock h1{font-size:40px;margin-bottom:12px}.album-unlock label{font:14px system-ui,sans-serif;color:#aaa}.album-unlock input{min-width:0;min-height:48px;border:1px solid #444;border-radius:8px;padding:12px;background:#111;color:#eee;font:16px system-ui,sans-serif}.album-unlock input:focus-visible{outline:2px solid #ccc;outline-offset:3px}.album-unlock .control{justify-self:start}.album-unlock p{min-height:24px;margin:0;font:14px/1.5 system-ui,sans-serif;color:#ccc}
.photo{display:block;position:relative;border:0;padding:0;background:#171717 center/cover;width:100%;margin:0 0 2px;cursor:pointer;border-radius:2px;overflow:hidden}.photo img{display:block;width:100%;height:auto;opacity:0}.photo img.loaded{opacity:1}.photo:focus-visible{outline:none;filter:brightness(.75)}
.skeleton .photo{background:#171717;cursor:default}.skeleton .photo:nth-child(3n+1){--ratio:.75}.status.loading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.video-badge{position:absolute;bottom:12px;right:12px;display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #ffffff60;border-radius:20px;background:#000c;color:#fff;font:13px/1.2 system-ui,sans-serif;pointer-events:none}
video.zoom{object-fit:contain;cursor:auto;touch-action:auto;background-color:#111}
.swipe-preview{pointer-events:none}#viewer.swiping .zoom{will-change:transform}
.media-error{position:absolute;z-index:4;bottom:72px;left:24px;right:24px;margin:0;padding:12px 16px;background:#181818ed;border:1px solid #666;border-radius:12px;font:14px/1.5 system-ui,sans-serif}
.playing-video .photo-info{width:max-content}
.video-summary{display:block;height:44px;padding:0 16px;line-height:44px;white-space:nowrap;text-align:center}
video:focus-visible{outline:2px solid #ccc;outline-offset:4px}
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:36px 16px;padding:0 12px}.album{min-width:0}.album .photo{aspect-ratio:4/3}.album img{width:100%;height:100%;object-fit:cover}.album h2{font-weight:500;font-size:26px;margin:12px 8px 0}.album p{margin:5px 8px;color:#aaa;font:12px system-ui,sans-serif}.album-placeholder{display:grid;place-items:center;width:100%;height:100%;background:#111;color:#777;font-size:36px}.status{padding:40px 4vw 80px;color:#aaa}.retry{margin:0 4vw 30px}
.floating-nav{position:fixed;z-index:5;left:24px;bottom:max(24px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:8px;max-width:calc(100% - 48px);pointer-events:none}.floating-nav .control{display:flex;align-items:center;padding:10px 12px;pointer-events:auto}
dialog{max-width:none;max-height:none;width:100%;height:100dvh;inset:0;border:0;margin:0;padding:0;background:#000;color:#eee;overflow:hidden}dialog::backdrop{background:transparent}.toolbar{position:absolute;z-index:3;top:20px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none}.toolbar button{pointer-events:auto}.tools{display:flex;align-items:center;gap:8px}.control{border:1px solid #ffffff70;border-radius:24px;padding:10px 18px;background:#10101020;backdrop-filter:blur(7px) saturate(170%) brightness(.72);-webkit-backdrop-filter:blur(7px) saturate(170%) brightness(.72);box-shadow:inset 0 1px 0 #ffffff30,0 4px 16px #0003;text-shadow:0 1px 3px #000c;font:14px system-ui,sans-serif;min-height:44px}.control[aria-pressed=true],.control[aria-current=page]{background:#ffffff22;border-color:#ffffffc0}.zoom{position:absolute;z-index:0;object-fit:fill;border-radius:2px;cursor:pointer;transform-origin:center;background:#171717 center/cover}.caption{position:absolute;z-index:1;bottom:20px;left:24px;right:24px;margin:0;font:13px/1.5 system-ui,sans-serif;color:#eee;text-shadow:0 1px 4px #000;max-height:44px;overflow:auto}.playing-video .caption{bottom:64px}.info dl{margin:0}.info dt{color:#b5c0c5;font-size:11px}.info dd{margin:0;overflow-wrap:anywhere}.tags{display:flex;flex-wrap:wrap;gap:6px}.tag{border:1px solid #ffffff40;border-radius:15px;padding:3px 9px;font-size:11px}.privacy{font-size:12px;color:#aaa;margin-top:20px}[hidden]{display:none!important}
.photo-info{position:absolute;z-index:4;top:max(20px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);transform-origin:top center;width:320px;max-width:calc(100% - 24px);height:44px;overflow:hidden;border-radius:22px;background:#24343f80;backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);box-shadow:inset 0 0 0 1px #ffffff35,inset 0 1px 0 #ffffff25,0 6px 18px #0003;color:#f1f3f4;font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
.date-toggle{position:absolute;top:0;left:0;display:grid;grid-template-columns:20px 1fr 20px;align-items:center;width:100%;height:44px;padding:0 12px;border:0;border-radius:22px;background:transparent;transform-origin:center center;font:inherit;white-space:nowrap;text-shadow:0 1px 3px #0005;-webkit-tap-highlight-color:transparent}#photo-date{grid-column:2;justify-self:center;text-align:center;line-height:1}
.date-toggle:focus-visible{outline-offset:-4px}.date-chevron{grid-column:3;justify-self:center;display:block;width:12px;height:12px;opacity:.85}.date-chevron svg,.camera-info svg{display:block;width:100%;height:100%;fill:currentColor}
.info{position:absolute;top:44px;left:0;width:100%;padding:8px 18px 18px;transform-origin:top center;max-height:calc(100dvh - 120px);overflow:auto;overscroll-behavior:contain}.camera-info>div{display:flex;align-items:flex-start;gap:9px;margin:6px 0 10px}.camera-info dt{width:13px;height:16px;flex-shrink:0;padding-top:3px}.camera-info dd{font-size:12px}.info-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding-top:12px;border-top:1px solid #ffffff20}.info-fields>div{min-width:0}.info-fields dd{font-size:12px}.info .tags:not(:empty){margin-top:14px}
#viewer{width:100vw}#viewer.zoomed .zoom{cursor:grab;touch-action:none;user-select:none}#viewer.panning .zoom{cursor:grabbing}
.control.icon-control{display:grid;place-items:center;width:44px;height:44px;padding:0;flex-shrink:0}.icon-control span{display:block;width:16px;height:16px}.icon-control svg{display:block;width:100%;height:100%;fill:currentColor}
.toolbar .icon-control:not(:disabled){opacity:.55;transition:opacity .15s ease}.toolbar .icon-control:focus-visible,.toolbar .icon-control[aria-pressed=true]{opacity:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.control,.photo-info{background:#151515ed}}
@media(hover:hover) and (pointer:fine){
  .control:hover{background:#ffffff28;border-color:#fff}
  .toolbar .icon-control:not(:disabled):hover{opacity:1}
  .photo-info:has(.date-toggle:hover){background:#2a3b468a}
}
@media(max-width:780px){.photo-info{top:calc(max(12px,env(safe-area-inset-top)) + 60px)}.info{max-height:calc(100dvh - 188px)}}
@media(max-width:700px){
  .stream{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stream.list{grid-template-columns:1fr}
  .albums{grid-template-columns:repeat(2,minmax(0,1fr))}
  #viewer{touch-action:pan-y pinch-zoom}
  #previous,#next,#zoom-toggle,#count{display:none}
  .toolbar,.photo-info{top:max(12px,env(safe-area-inset-top))}
  .photo-info{max-width:calc(100% - 128px)}
}
@media(max-width:540px){.intro{padding:28px 20px}.intro h1{font-size:40px}.floating-nav{left:12px;bottom:max(16px,env(safe-area-inset-bottom));max-width:calc(100% - 24px)}.floating-nav .control{font-size:13px}.stream{padding:0 8px}.albums{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 8px}.album h2{font-size:22px}.toolbar{left:12px;right:12px;top:max(12px,env(safe-area-inset-top))}.control{padding:10px 14px}.caption{left:16px;bottom:16px}.privacy{margin:12px 0 0}}
