:root{--bg:#000;--fg:#f5f5f7;--fg-2:#a1a1a6;--fg-3:#86868b;--accent:#0a84ff;--ease:cubic-bezier(.2, .8, .2, 1);--gap:2px;--glass-fill:#ffffff1a;--glass-fill-hover:#ffffff2e;--glass-fill-active:#ffffff42;--glass-border:#ffffff2e;--glass-blur:blur(16px) saturate(160%);--glass-shadow:inset 0 1px 0 #ffffff38, 0 2px 8px #00000040;color-scheme:dark}html{background:var(--bg);scrollbar-gutter:stable;-webkit-text-size-adjust:100%}html.viewer-open{overflow:hidden}body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,SF Pro Display,Helvetica Neue,Inter,system-ui,sans-serif}a{color:inherit}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.header{z-index:20;height:64px;transition:transform .26s var(--ease);border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:12px;padding:0 24px;display:flex;position:sticky;top:0}.header:before{content:"";z-index:-1;backdrop-filter:blur(28px)saturate(180%);background:linear-gradient(#2c2c306b,#1414164d);position:absolute;inset:0;box-shadow:inset 0 1px #ffffff14}.header.is-hidden{transform:translateY(-100%)}.logo{color:var(--fg);letter-spacing:-.01em;font-size:19px;font-weight:500;text-decoration:none}.filters{align-items:center;gap:6px;display:flex}.filter{position:relative}.pill{box-sizing:border-box;border:1px solid var(--glass-border);background:var(--glass-fill);min-height:44px;backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);color:var(--fg);font:inherit;white-space:nowrap;cursor:pointer;border-radius:980px;align-items:center;gap:7px;padding:0 16px;font-size:14px;transition:background .15s;display:inline-flex}.pill:hover,.pill.is-narrowed{background:var(--glass-fill-hover)}.pill[aria-expanded=true]{background:var(--glass-fill-active)}.pill:focus-visible,.text-btn:focus-visible,.glass-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pill-count{box-sizing:border-box;background:var(--fg);color:#000;font-variant-numeric:tabular-nums;border-radius:10px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 6px;font-size:12px;font-weight:600;display:inline-flex}.pill-count[hidden]{display:none}.panel{z-index:30;backdrop-filter:blur(32px)saturate(180%);width:248px;animation:pop .16s var(--ease);background:#24242894;border:1px solid #ffffff29;border-radius:18px;padding:6px 0;position:absolute;top:52px;right:0;overflow:hidden;box-shadow:inset 0 1px #ffffff2e,0 24px 60px #0000008c}.panel[hidden]{display:none}@keyframes pop{0%{opacity:0;transform:translateY(-4px)scale(.98)}}.panel-actions{border-bottom:1px solid #ffffff1a;justify-content:space-between;margin-bottom:4px;padding:0 6px 6px;display:flex}.text-btn{min-height:44px;color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;padding:0 10px;font-size:14px}.text-btn:hover{background:#ffffff14}.option{cursor:pointer;align-items:center;gap:12px;min-height:44px;padding:0 16px;font-size:15px;transition:opacity .15s;display:flex}.option:hover{background:#ffffff0d}.option input{width:18px;height:18px;accent-color:var(--accent);margin:0}.option-label{flex:1}.option-count{color:#ebebf599;font-variant-numeric:tabular-nums;font-size:13px}.option.is-empty{opacity:.4}.grid{gap:var(--gap);grid-template-columns:repeat(5,minmax(0,1fr));display:grid;position:relative}.tile{aspect-ratio:1;cursor:zoom-in;-webkit-tap-highlight-color:transparent;background:#111;display:block;overflow:hidden}.tile[hidden]{display:none}.tile img{object-fit:cover;width:100%;height:100%;transition:filter .2s;display:block}@media (hover:hover){.tile:hover img{filter:brightness(1.12)}}.tile:focus-visible{outline:2px solid var(--fg);outline-offset:-2px}.ghost{pointer-events:none;margin:0;position:absolute}.empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:60vh;padding:0 24px;display:flex}.empty[hidden]{display:none}.empty p{color:var(--fg-2);margin:0;font-size:17px}.footer{color:var(--fg-3);justify-content:center;align-items:center;gap:16px;padding:28px 24px 36px;font-size:12px;display:flex}.footer a{color:var(--fg-3);text-decoration:none}.footer a:hover{color:var(--fg)}.viewer{--mx:48px;--my:40px;z-index:50;touch-action:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.viewer[hidden]{display:none}.viewer-bg{background:var(--bg);position:absolute;inset:0}.stage{width:min(calc(100vw - 2 * var(--mx)), calc((100dvh - 2 * var(--my)) * var(--ar,1.5)));aspect-ratio:var(--ar,1.5);transform-origin:0 0;background:#0b0b0b;position:relative}.stage img{width:100%;height:100%;display:block;position:absolute;inset:0}.stage-full{opacity:0;transition:opacity .25s}.stage.is-loaded .stage-full{opacity:1}.glass-btn{box-sizing:border-box;backdrop-filter:blur(20px)saturate(180%);width:44px;height:44px;color:var(--fg);cursor:pointer;opacity:0;pointer-events:none;background:#ffffff24;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;text-decoration:none;transition:opacity .3s,background .15s;display:flex;position:absolute;box-shadow:inset 0 1px #ffffff40,0 4px 16px #00000059}.glass-btn:hover{background:#ffffff3d}.viewer.controls-on .glass-btn,.glass-btn:focus-visible,html:not(.js) .glass-btn{opacity:1;pointer-events:auto}.viewer-close{top:max(20px, env(safe-area-inset-top));right:20px}.viewer-prev,.viewer-next{margin-top:-22px;top:50%}.viewer-prev{left:20px}.viewer-next{right:20px}.zoom{transform-origin:0 0;cursor:zoom-in;position:absolute;inset:0}.zoom.is-gesture{will-change:transform}.zoom.is-animating{transition:transform .2s}.viewer.is-zoomed .zoom{cursor:grab}.viewer.is-zoomed .zoom.is-dragging{cursor:grabbing}.zoom-controls{left:50%;bottom:max(28px, env(safe-area-inset-bottom));opacity:0;pointer-events:none;gap:20px;transition:opacity .3s;display:none;position:absolute;transform:translate(-50%)}.viewer.controls-on .zoom-controls,.zoom-controls:focus-within{opacity:1;pointer-events:auto}.zoom-btn{color:var(--fg);opacity:.7;cursor:pointer;filter:drop-shadow(0 1px 2px #0009);background:0 0;border:0;padding:4px;transition:opacity .15s;display:flex}.zoom-btn:hover:not(:disabled){opacity:1}.zoom-btn:disabled{opacity:.3;cursor:default}.zoom-btn:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:4px}@media (hover:hover) and (pointer:fine){.zoom-controls{display:flex}}.viewer-info{right:20px;bottom:max(20px, env(safe-area-inset-bottom))}.viewer-info[hidden]{display:none}.viewer-info[aria-expanded=true]{background:#ffffff47}.info-panel{right:20px;bottom:calc(max(20px, env(safe-area-inset-bottom)) + 56px);box-sizing:border-box;backdrop-filter:blur(20px)saturate(180%);max-width:min(320px,100vw - 32px);color:var(--fg);background:#1414148c;border:1px solid #fff3;border-radius:14px;padding:12px 16px;font-size:13px;line-height:1.4;animation:.16s ease-out info-in;position:absolute;box-shadow:inset 0 1px #ffffff26,0 4px 16px #00000059}.info-panel[hidden],.info-row[hidden]{display:none}.info-panel dl{gap:8px;margin:0;display:grid}.info-panel dt{letter-spacing:.04em;text-transform:uppercase;opacity:.6;font-size:11px}.info-panel dd{margin:0}@keyframes info-in{0%{opacity:0;transform:translateY(4px)}}@media (width<=640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.header{height:60px;padding:0 16px}.logo{font-size:18px}.pill{gap:6px;padding:0 11px}.panel{width:auto;position:fixed;top:60px;left:12px;right:12px}.viewer{--mx:0px;--my:0px}.viewer-close{right:16px}.viewer-prev,.viewer-next{top:auto;bottom:max(32px, env(safe-area-inset-bottom));margin-top:0}.viewer-prev{left:12px}.viewer-next{right:12px}.viewer-info{left:50%;right:auto;bottom:max(32px, env(safe-area-inset-bottom));margin-left:-22px}.info-panel{left:50%;right:auto;bottom:calc(max(32px, env(safe-area-inset-bottom)) + 56px);animation:none;transform:translate(-50%)}}@media (width>=641px) and (width<=1024px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width>=1800px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){.header,.tile img,.glass-btn,.info-panel,.zoom.is-animating,.zoom-controls,.zoom-btn,.stage-full,.option,.pill{transition:none}.panel,.info-panel{animation:none}}
