*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f7f5f2;--header-bg-from:#f7f5f2f7;--header-bg-to:#f7f5f200;--text-primary:#1a1a1a;--text-secondary:#999;--tab-active-bg:#1a1a1a;--tab-active-text:#f7f5f2;--tab-inactive-text:#888;--tab-border:#d0cdc9;--tab-hover-border:#999;--placeholder-bg:#e8e5e1;--gap:4px}:root.dark{--bg:#0c0c0c;--header-bg-from:#0c0c0cf7;--header-bg-to:#0c0c0c00;--text-primary:#f0ede8;--text-secondary:#888;--tab-active-bg:#f0ede8;--tab-active-text:#0c0c0c;--tab-inactive-text:#666;--tab-border:#333;--tab-hover-border:#666;--placeholder-bg:#1e1e1e}html{scroll-behavior:smooth}body{background-color:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,sans-serif;font-weight:300;transition:background-color .3s,color .3s}img{object-fit:cover;width:100%;height:100%;display:block}.site{min-height:100vh}.header{z-index:100;background:linear-gradient(to bottom, var(--header-bg-from) 60%, var(--header-bg-to) 100%);flex-direction:column;align-items:center;padding:40px 40px 24px;display:flex;position:fixed;top:0;left:0;right:0}.site-title{letter-spacing:.32em;text-transform:uppercase;color:var(--text-primary);margin-bottom:20px;font-family:Inter,sans-serif;font-size:.8rem;font-weight:400}.tabs{align-items:center;gap:8px;display:flex}.tab{border:1px solid var(--tab-border);cursor:pointer;letter-spacing:.04em;color:var(--tab-inactive-text);background:0 0;border-radius:999px;outline:none;padding:7px 20px;font-family:Inter,sans-serif;font-size:.72rem;font-weight:400;transition:background .2s,color .2s,border-color .2s}.tab:hover,.tab--active{background:var(--tab-active-bg);border-color:var(--tab-active-bg);color:var(--tab-active-text)}.theme-toggle{z-index:101;cursor:pointer;color:var(--tab-inactive-text);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;transition:color .25s;display:flex;position:fixed;top:22px;right:28px}.theme-toggle:hover{color:var(--text-primary)}.theme-toggle svg{fill:currentColor;width:15px;height:15px}.gallery-loading,.gallery-empty{text-align:center;color:var(--text-secondary);letter-spacing:.1em;grid-column:1/-1;padding:80px 40px;font-size:.8rem}.gallery{columns:3;column-gap:var(--gap);padding-top:130px;padding-left:var(--gap);padding-right:var(--gap)}.gallery-item{break-inside:avoid;margin-bottom:var(--gap);cursor:pointer;background:var(--placeholder-bg);position:relative;overflow:hidden}.gallery-item img{object-fit:cover;width:100%;height:100%;transition:transform .5s,filter .5s;display:block}.gallery-item-overlay{background:0 0;transition:background .35s;position:absolute;inset:0}.gallery-item:hover img{filter:brightness(.85);transform:scale(1.03)}.gallery-item:hover .gallery-item-overlay{background:#00000014}.lightbox{z-index:200;background:#000000f5;grid-template-rows:48px 1fr;grid-template-columns:64px 1fr 64px;animation:.2s fadeIn;display:grid;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.lightbox-topbar{grid-area:1/1/auto/-1;justify-content:flex-end;align-items:center;padding:0 20px;display:flex}.lightbox-close{color:#fff;cursor:pointer;opacity:.7;letter-spacing:0;background:0 0;border:none;padding:6px;font-size:1.25rem;font-weight:400;line-height:1;transition:opacity .2s}.lightbox-close:hover{opacity:1}.lightbox-col{grid-row:2;justify-content:center;align-items:center;display:flex}.lightbox-col--prev{grid-column:1}.lightbox-col--next{grid-column:3}.lightbox-nav{color:#fff;cursor:pointer;opacity:.55;-webkit-user-select:none;user-select:none;background:0 0;border:none;padding:12px;font-size:1.5rem;font-weight:300;transition:opacity .2s}.lightbox-nav:hover{opacity:1}.lightbox-inner{grid-area:2/2;justify-content:center;align-items:center;min-width:0;min-height:0;padding-bottom:24px;display:flex;position:relative;overflow:hidden}.lightbox-inner img{object-fit:contain;transform-origin:50%;pointer-events:auto;width:auto;max-width:100%;height:auto;max-height:100%}.lightbox-spinner{border:2px solid #ffffff26;border-top-color:#ffffffb3;border-radius:50%;width:32px;height:32px;animation:.7s linear infinite spin;position:absolute}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=900px){.gallery{columns:2}.header{padding:32px 24px 20px}}@media (width<=560px){.gallery{columns:1;padding-top:140px}.header{padding:28px 20px 18px}.tabs{flex-wrap:wrap;justify-content:center;gap:6px}}
