.gallery-overview{width:min(1120px,calc(100% - 40px));max-width:none;max-height:calc(100dvh - 48px);padding:0 28px 28px;border:1px solid rgba(var(--page-rgb),.2);border-radius:24px;background-color:#101114e8;background-image:radial-gradient(ellipse at top left,rgba(var(--page-rgb),.08),transparent 38%),radial-gradient(ellipse at bottom right,rgba(var(--page-rgb),.06),transparent 38%);color:#f1f1f3;overscroll-behavior:contain;backdrop-filter:blur(30px) saturate(130%);-webkit-backdrop-filter:blur(30px) saturate(130%);box-shadow:inset 0 1px 0 #ffffff26,0 28px 100px #0008}

.gallery-overview::backdrop{background:#050506a6;backdrop-filter:blur(8px)}
.gallery-overview-bar{position:relative;z-index:2;display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:16px;padding:24px 0;background:transparent;border-radius:24px;margin-bottom:12px}
.gallery-overview h2{margin:0;text-align:center;font:600 clamp(20px,3vw,28px)/1.25 'Space Grotesk',sans-serif;letter-spacing:-.035em;color:var(--page-accent)}
.gallery-element{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(var(--page-rgb),.65);border-radius:13px;background:linear-gradient(135deg,rgba(var(--page-rgb),.23),#ffffff05);color:var(--page-accent);font:600 23px/1 'Space Grotesk',sans-serif;box-shadow:inset 0 1px 0 #ffffff20}
.gallery-overview-bar button{justify-self:end;width:44px;height:44px;border:1px solid #ffffff30;border-radius:50%;background:#ffffff08;color:inherit;font-size:28px;cursor:pointer;transition:background .25s,border-color .25s}
.gallery-overview-bar button:hover{background:rgba(var(--page-rgb),.2);border-color:var(--page-accent)}
.gallery-overview .gallery-overview-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin:0;padding:0;border:0;background:none}
.gallery-overview-grid>a{display:flex;flex-direction:column;flex:0 0 calc((100% - 44px)/3);min-width:0;overflow:hidden;border:1px solid rgba(var(--page-rgb),.22);border-radius:26px;background:transparent;color:inherit;text-decoration:none;box-shadow:none;transition:border-color .3s,box-shadow .3s,transform .35s}
.gallery-tile-media{position:relative;overflow:hidden;background:#0b0c0e80}
.gallery-overview-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain}
.gallery-tile-media::after{content:'';position:absolute;inset:-25% -70%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#ffffff05 44%,#ffffff20 50%,#ffffff0a 56%,transparent 62%);transform:translateX(-70%);opacity:0;transition:transform 1.4s cubic-bezier(.22,.61,.36,1),opacity .6s}
.gallery-overview-grid .gallery-tile-caption{display:grid;place-items:center;flex:1;text-align:center;font:600 15px/1.55 'Space Grotesk',sans-serif;letter-spacing:.005em;padding:18px 18px;color:#f0f0f3}
.gallery-overview-grid>a:is(:hover,:focus-visible){border-color:rgba(var(--page-rgb),.48);box-shadow:0 8px 24px #0002;transform:none}
.gallery-overview-grid>a:is(:hover,:focus-visible) .gallery-tile-media::after{transform:translateX(70%);opacity:1}
.gallery-overview :focus-visible{outline:3px solid var(--page-accent);outline-offset:3px}
html:has(.gallery-overview[open]){overflow:hidden}
@media(max-width:720px){.gallery-overview{width:calc(100% - 20px);max-height:calc(100dvh - 24px);padding:0 14px 18px;border-radius:18px}.gallery-overview-bar{padding:16px 0;grid-template-columns:42px minmax(0,1fr) 42px;gap:8px}.gallery-element{width:40px;height:40px;font-size:20px}.gallery-overview h2{font-size:19px}.gallery-overview-bar button{width:40px;height:40px}.gallery-overview .gallery-overview-grid{gap:12px}.gallery-overview-grid>a{flex-basis:calc((100% - 12px)/2)}.gallery-overview-grid .gallery-tile-caption{font-size:14px;padding:16px 12px}}
@media(prefers-reduced-motion:reduce){.gallery-overview{animation:none}.gallery-overview-grid>a,.gallery-tile-media::after,.gallery-overview-bar button{transition:none}.gallery-overview-grid>a:is(:hover,:focus-visible){transform:none}.gallery-tile-media::after{display:none}}

/* Foreground remains complete; only the duplicate behind it is cropped and blurred. */
.gallery-tile-media{isolation:isolate}
.gallery-tile-media>img:not(.gallery-photo-backdrop){position:relative;z-index:1}
.gallery-tile-media>.gallery-photo-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(22px) brightness(.5) saturate(.7);transform:scale(1.18);z-index:0;pointer-events:none}
.gallery-tile-media::after{z-index:2}

.gallery-overview{scrollbar-width:thin;scrollbar-color:#ffffff36 transparent}
.gallery-overview::-webkit-scrollbar{width:7px}
.gallery-overview::-webkit-scrollbar-thumb{background:#ffffff36;border-radius:20px}
.gallery-overview::-webkit-scrollbar-track{background:transparent}
.gallery-tile-media{border-radius:25px 25px 20px 20px}
/* Mobile gallery: neutral sheet, fixed controls and independently scrolling photos. */
@media(max-width:720px){
 .gallery-overview{--page-accent:#e7e7eb;--page-rgb:210,210,216;width:calc(100% - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);margin:auto;padding:0;border:1px solid #ffffff20;border-radius:22px;background:#111214;background-image:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden;box-shadow:0 16px 60px #0006;color:#f1f1f3}
 .gallery-overview[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
 .gallery-overview::backdrop{background:#000b;backdrop-filter:blur(8px)}
 .gallery-overview .gallery-overview-bar{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;margin:0;padding:14px 16px;border-radius:21px 21px 0 0;border-bottom:1px solid #ffffff10;background:#111214}
 .gallery-overview .gallery-element{width:36px;height:36px;border:1px solid #ffffff25;border-radius:10px;background:#ffffff07;box-shadow:none;color:#dcdce1;font:500 17px/1 'Space Grotesk',sans-serif}
 .gallery-overview h2{font:500 16px/1.35 'Space Grotesk',Arial,sans-serif;color:#f1f1f3;letter-spacing:-.02em;margin:0;text-align:center;overflow-wrap:anywhere}
 .gallery-overview .gallery-overview-bar button{width:44px;height:44px;min-height:44px;border:1px solid #ffffff22;background:#ffffff06;border-radius:50%;color:#f1f1f3;font:400 26px/1 Arial,sans-serif}
 .gallery-overview .gallery-overview-bar button:hover{background:#ffffff10;border-color:#ffffff40}
 .gallery-overview .gallery-overview-grid{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:stretch;justify-content:center;gap:22px 12px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff30 transparent;padding:16px 16px max(24px,env(safe-area-inset-bottom))!important;margin:0;background:none;border:0}
 .gallery-overview .gallery-overview-grid>a{flex:0 0 calc((100% - 12px)/2);min-width:0;display:flex;flex-direction:column;border:0;border-radius:0;box-shadow:none;background:none;overflow:visible;transform:none;transition:none}
 .gallery-overview .gallery-tile-media{flex:none;aspect-ratio:1;overflow:hidden;border:0;border-radius:14px;background:#1b1c1e}
 .gallery-overview .gallery-tile-media>img:not(.gallery-photo-backdrop){width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:center}
 .gallery-overview .gallery-tile-media>.gallery-photo-backdrop{display:none}
 .gallery-overview .gallery-tile-media::after{display:none}
 .gallery-overview .gallery-overview-grid .gallery-tile-caption{display:block;flex:1;padding:10px 3px 0;margin:0;text-align:center;font:400 12px/1.5 Arial,Helvetica,sans-serif;letter-spacing:0;color:#c9c9ce;overflow-wrap:anywhere}
 .gallery-overview .gallery-overview-grid>a:is(:hover,:focus-visible){border:0;box-shadow:none;transform:none}
 .gallery-overview :focus-visible{outline:2px solid #eeeeF2;outline-offset:3px}
 .photo-dialog{--page-accent:#e7e7eb;--page-rgb:210,210,216}
 .photo-dialog .photo-dialog-title{color:#dedee3}
 .photo-dialog button:hover:not(:disabled){background:#ffffff12;border-color:#ffffff50}
}
@media(max-width:359px){
 .gallery-overview .gallery-overview-bar{padding:10px;gap:6px}
 .gallery-overview h2{font-size:15px}
 .gallery-overview .gallery-overview-grid{padding-inline:12px!important}
 .gallery-overview .gallery-overview-grid>a{flex-basis:100%}
 .gallery-overview .gallery-tile-media{aspect-ratio:4/3}
 .gallery-overview .gallery-tile-media>img:not(.gallery-photo-backdrop){aspect-ratio:4/3}
 .gallery-overview .gallery-overview-grid .gallery-tile-caption{font-size:13px}
}
/* The card owns the outer corners; photo and caption meet at one straight edge. */
.gallery-overview{--gallery-rgb:200,200,210;background-color:#111214;background-image:none}
.gallery-overview[data-element="Zn"]{--gallery-rgb:122,166,194}
.gallery-overview[data-element="Sn"]{--gallery-rgb:192,208,222}
.gallery-overview[data-element="Cu"]{--gallery-rgb:210,115,55}
.gallery-overview[data-element="Ni"]{--gallery-rgb:190,181,147}
.gallery-overview .gallery-overview-grid>a,.gallery-overview .gallery-overview-grid>a:is(:hover,:focus-visible){border:2px solid transparent;border-radius:18px;overflow:hidden;background:linear-gradient(#151618,#151618) padding-box,linear-gradient(135deg,rgba(var(--gallery-rgb),.8),rgba(var(--gallery-rgb),.3) 50%,rgba(var(--gallery-rgb),.65)) border-box}
.gallery-overview .gallery-tile-media{position:relative;border:0;border-radius:0;background:#151618}
.gallery-overview .gallery-tile-media::before{content:'';position:absolute;z-index:3;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,rgba(var(--gallery-rgb),.3),rgba(var(--gallery-rgb),.8),rgba(var(--gallery-rgb),.3));pointer-events:none}
.gallery-overview .gallery-overview-grid .gallery-tile-caption{padding:14px 12px;background:#151618}
.gallery-overview::backdrop{opacity:0;transition:opacity .35s ease;background:#030405c9;backdrop-filter:blur(12px)}
.gallery-overview.overview-visible::backdrop{opacity:1}
@media(max-width:720px){.gallery-overview .gallery-overview-grid>a,.gallery-overview .gallery-overview-grid>a:is(:hover,:focus-visible){border-radius:14px}.gallery-overview .gallery-tile-media{border-radius:0}.gallery-overview .gallery-overview-grid .gallery-tile-caption{padding:12px 9px}}
@media(prefers-reduced-motion:reduce){.gallery-overview::backdrop{transition:none;opacity:1}}
/* Moving light stays inside the outline; the photo/caption seam remains straight. */
.gallery-overview .gallery-overview-grid>a,.gallery-overview .gallery-overview-grid>a:is(:hover,:focus-visible){background-image:linear-gradient(#151618,#151618),linear-gradient(120deg,rgba(var(--gallery-rgb),.28) 5%,rgb(var(--gallery-rgb)) 25%,#ffffff 42%,#ffffff 48%,rgb(var(--gallery-rgb)) 65%,rgba(var(--gallery-rgb),.28) 90%);background-size:100% 100%,300% 300%;background-origin:padding-box,border-box;background-clip:padding-box,border-box}
@media(prefers-reduced-motion:no-preference){
 .gallery-overview[open] .gallery-overview-grid>a{animation:gallery-outline-light 2.6s ease-in-out infinite alternate,gallery-card-drift 5s ease-in-out infinite}
 .gallery-overview[open] .gallery-overview-grid>a:nth-child(3n+2){animation-delay:-1s,-1.6s}
 .gallery-overview[open] .gallery-overview-grid>a:nth-child(3n){animation-delay:-2s,-3.2s}
}
@keyframes gallery-outline-light{from{background-position:0 0,0% 0%}to{background-position:0 0,100% 100%}}
@keyframes gallery-card-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

.gallery-overview .gallery-overview-grid>a,.gallery-overview .gallery-overview-grid>a:is(:hover,:focus-visible){border-width:3px}
.gallery-overview .gallery-tile-media::before{height:3px;background:linear-gradient(100deg,rgba(var(--gallery-rgb),.3),rgb(var(--gallery-rgb)),#fff 48%,rgb(var(--gallery-rgb)),rgba(var(--gallery-rgb),.3));background-size:250% 100%}
@media(prefers-reduced-motion:no-preference){.gallery-overview[open] .gallery-tile-media::before{animation:gallery-divider-light 2.6s ease-in-out infinite alternate}}
@keyframes gallery-divider-light{from{background-position:0% 50%}to{background-position:100% 50%}}