:root{font-family:Arial,Helvetica,sans-serif;color:#20242a;background:#fff;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:flex;flex-direction:column}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible{outline:3px solid #2865d8;outline-offset:4px}header{border-bottom:1px solid #e8e8e8;padding:20px max(5%,calc((100vw - 1300px)/2));display:flex;justify-content:space-between;align-items:center;gap:25px}.catalog-label{font-size:17px;font-weight:700}header nav{display:flex;gap:25px;font-size:13px;color:#555}main{width:90%;max-width:1300px;margin:0 auto;flex:1}h1,h2,p{margin:0}h1{font-size:28px;letter-spacing:-.5px}h2{font-size:17px;font-weight:600}.selector{display:grid;grid-template-columns:1fr 1fr;gap:24px;min-height:calc(100dvh - 140px);align-content:center;padding:30px 0}.category-choice{border:1px solid #ddd;border-radius:8px;min-height:250px;display:grid;grid-template-columns:1fr auto;align-content:end;gap:25px;padding:32px;font-size:clamp(26px,4vw,42px);font-weight:600}.category-choice:hover{border-color:#333;background:#fafafa}.choice-icon{grid-column:1/-1;font-size:50px;font-weight:400;color:#757575;margin-bottom:20px}.breadcrumb{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:#676767;padding-top:30px}.breadcrumb a:hover{text-decoration:underline}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:28px 0}.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d5d5d5;border-radius:5px;background:white;color:#333;padding:10px 15px;font-size:12px}.button:hover{border-color:#333}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px;margin-bottom:45px}.gallery-card{display:block;min-width:0}.card-cover{aspect-ratio:4/3;overflow:hidden;border-radius:5px;background:#f0f0f0;display:grid;place-items:center}.card-cover img{width:100%;height:100%;object-fit:cover}.gallery-card:hover .card-cover{outline:2px solid #222;outline-offset:3px}.placeholder{color:#aaa;font-size:56px}.card-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}.count{font-size:12px;color:#777;margin-top:7px}.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.photo{padding:0;border:0;background:#f4f4f4;border-radius:4px;overflow:hidden;aspect-ratio:4/5}.photo img{width:100%;height:100%;object-fit:cover;display:block}.photo:hover{outline:2px solid #333;outline-offset:3px}.empty{grid-column:1/-1;padding:55px 0;color:#777;font-size:14px}.empty a{text-decoration:underline}.loading{padding:40px 0;color:#777;font-size:14px}.link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:40px}.link-card{border:1px solid #ddd;border-radius:6px;padding:24px}.link-card img{display:block;width:230px;max-width:100%;height:auto;margin:15px auto}.link-card code{display:block;font-size:11px;line-height:1.8;overflow-wrap:anywhere;margin:20px 0}.open-link{font-size:12px;margin-left:15px;text-decoration:underline}footer{border-top:1px solid #eee;padding:20px 5%;display:flex;gap:25px;font-size:11px;color:#888}dialog{padding:0;border:0;background:#151515;color:white;width:min(1150px,96vw);max-width:none;border-radius:6px}dialog::backdrop{background:#000d}.viewer-top,.viewer-bottom{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;font-size:13px}.viewer-top button,.viewer-stage button{background:transparent;border:1px solid #ffffff50;color:white;border-radius:50%;width:40px;height:40px;flex-shrink:0}.viewer-stage{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px}.viewer-stage img{max-width:calc(100% - 105px);height:70dvh;object-fit:contain}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#222;color:white;border-radius:5px;padding:12px 20px;font-size:12px;z-index:5}body:has(dialog[open]){overflow:hidden}@media(max-width:650px){header{padding:17px 5%}header nav{gap:20px;font-size:12px}.selector{grid-template-columns:1fr;gap:16px;align-content:start;padding:25px 0;min-height:auto}.category-choice{min-height:230px;padding:26px;font-size:30px}.choice-icon{font-size:44px;margin-bottom:10px}.gallery,.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}.photo-grid{gap:12px}.page-heading{margin:25px 0}h1{font-size:24px}h2{font-size:15px}.card-caption{margin-top:12px}.breadcrumb{padding-top:22px;font-size:11px;gap:9px}.link-grid{grid-template-columns:1fr}.viewer-stage{padding:0 8px;gap:5px}.viewer-stage img{max-width:calc(100% - 80px);height:65dvh}.viewer-stage button{width:32px;height:32px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.category-choice{position:relative;overflow:hidden;isolation:isolate;background:#293037;color:white;min-height:320px;align-content:end;gap:0}
.category-choice:hover{background:#293037;border-color:#555}
.selector-background{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.selector-background img{position:absolute;inset:0 auto 0 0;width:112%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;transform:translateX(-8%)}
.selector-background img.visible{opacity:1}.selector-background img.panning{animation:selector-slide-right 11.2s linear both}
.category-choice:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#00000008 20%,#000000b8 100%);pointer-events:none}
.choice-label,.choice-arrow{position:relative;align-self:end;text-shadow:0 1px 8px #0006}
@keyframes selector-slide-right{from{transform:translateX(-8%)}to{transform:translateX(0)}}
@media(max-width:650px){.category-choice{min-height:250px}}
@media(prefers-reduced-motion:reduce){.selector-background img{animation:none!important;transition:none;transform:translateX(-4%)}}

.selector-icon{position:absolute;top:28px;left:28px;width:58px;height:58px;padding:11px;border:1px solid #ffffff60;border-radius:12px;background:#0005;backdrop-filter:blur(6px);color:white;display:grid;place-items:center}
.selector-icon svg{display:block;width:100%;height:100%}.placeholder svg{width:58px;height:62px;display:block}
@media(max-width:650px){.selector-icon{top:22px;left:22px;width:50px;height:50px;padding:9px}}