.svg-gallery{position:relative;width:100%;font-family:inherit;color:inherit}
.svg-gallery{--svg-cols:var(--svg-columns);--svg-gap-eff:var(--svg-gap);--svg-peek:28px}
.svg-gallery *{box-sizing:border-box}
.svg-gallery .svg-track{display:grid;grid-template-columns:repeat(var(--svg-cols),minmax(0,1fr));gap:var(--svg-gap);align-items:start}
.svg-gallery .svg-item{display:flex;flex-direction:column;justify-content:flex-start;align-self:flex-start;min-width:0;padding:0;border:0;background:none;color:inherit;text-align:left;font:inherit;text-transform:none;letter-spacing:normal;cursor:pointer;appearance:none}
.svg-gallery .svg-thumb{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:var(--svg-ratio);overflow:hidden;background-color:#e9e6e0;background-size:cover;background-position:center}
.svg-gallery .svg-thumb:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .2s ease}
.svg-gallery .svg-item:hover .svg-thumb:after,.svg-gallery .svg-item:focus-visible .svg-thumb:after{background:rgba(0,0,0,.12)}
.svg-gallery .svg-play{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 1px 10px rgba(0,0,0,.1);transition:transform .2s ease,background .2s ease}
.svg-gallery .svg-play svg{width:19px;height:19px;fill:#242424;margin-left:2px}
.svg-gallery .svg-item:hover .svg-play{transform:scale(1.07);background:rgba(255,255,255,.75)}
.svg-gallery .svg-title{display:block;margin-top:8px;font-size:14px;line-height:1.4;font-weight:500}
.svg-gallery .svg-caption{display:block;margin-top:4px;font-size:13px;line-height:1.5;opacity:.72}
.svg-gallery .svg-vimeo-thumb{font-size:14px;letter-spacing:.08em;color:#555}
.svg-gallery .svg-carousel-wrap{position:relative}
.svg-gallery .svg-carousel-controls{position:absolute;inset:0;z-index:2;pointer-events:none}
.svg-gallery .svg-arrow,.svg-lightbox .svg-close{display:flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(100,100,100,.3);background:rgba(255,255,255,.92);color:#222;cursor:pointer;text-transform:none;letter-spacing:normal}
.svg-gallery .svg-arrow{position:absolute;top:calc(var(--svg-arrow-y,50px) - 16px);width:32px;height:32px;border-radius:50%;font-size:17px;line-height:1;pointer-events:auto;background:rgba(255,255,255,.72);box-shadow:0 1px 8px rgba(0,0,0,.18);transition:opacity .2s ease}
.svg-gallery .svg-prev{left:6px}
.svg-gallery .svg-next{right:6px}
.svg-gallery .svg-arrow:disabled{opacity:0;pointer-events:none}
.svg-gallery.svg-layout-carousel .svg-track{display:flex;align-items:flex-start;gap:var(--svg-gap-eff);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:calc(var(--svg-peek) + var(--svg-gap-eff));scroll-behavior:smooth;scrollbar-width:none;padding-bottom:3px}
.svg-gallery.svg-layout-carousel .svg-track::-webkit-scrollbar{display:none}
.svg-gallery.svg-layout-carousel .svg-item{flex:0 0 calc((100% - (var(--svg-cols) + 1) * var(--svg-gap-eff) - 2 * var(--svg-peek)) / var(--svg-cols));scroll-snap-align:start}
.svg-lightbox,.svg-lightbox *{box-sizing:border-box}
.svg-lightbox[hidden]{display:none}
.svg-lightbox{position:fixed;z-index:999999;inset:0;display:flex;align-items:center;justify-content:center;padding:5vw;background:rgba(14,14,14,.94)}
.svg-lightbox .svg-close{position:absolute;top:20px;right:22px;width:44px;height:44px;border-radius:50%;font-size:30px;font-weight:300;line-height:1}
.svg-lightbox .svg-player-wrap{position:relative;width:min(1100px,100%);aspect-ratio:16/9;background:#000;box-shadow:0 15px 70px rgba(0,0,0,.3)}
.svg-lightbox .svg-player-wrap iframe{display:block;width:100%;height:100%;border:0}
/* Balanced grid: same thumbnail size everywhere, rows evened out by JS, shorter rows centred */
.svg-gallery.svg-layout-grid.svg-balance .svg-track{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--svg-gap);margin-bottom:calc(var(--svg-gap) * -1)}
.svg-gallery.svg-layout-grid.svg-balance .svg-item{flex:0 0 calc((100% - (var(--svg-gap) * (var(--svg-cols) - 1))) / var(--svg-cols));margin-bottom:var(--svg-gap)}
.svg-gallery .svg-break{flex:0 0 100%;height:0;margin:0;padding:0;overflow:hidden}
/* Transparent guard over the top strip of the player, so the YouTube title/channel link can't be clicked by accident */
.svg-gallery .svg-shield,.svg-lightbox .svg-shield{position:absolute;top:0;left:0;right:0;height:56px;z-index:2}
.svg-gallery iframe[hidden]~.svg-shield{display:none}
/* Top player (default) */
.svg-gallery .svg-stage{margin-bottom:max(var(--svg-gap),16px);scroll-margin-top:90px}
.svg-gallery .svg-stage .svg-player-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
.svg-gallery .svg-stage iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.svg-gallery .svg-stage iframe[hidden]{display:none}
.svg-gallery .svg-poster{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#000;color:inherit;cursor:pointer;appearance:none}
.svg-gallery .svg-poster[hidden]{display:none}
.svg-gallery .svg-poster .svg-thumb{height:100%;aspect-ratio:auto}
.svg-gallery .svg-poster .svg-play{width:72px;height:72px}
.svg-gallery .svg-poster .svg-play svg{width:28px;height:28px}
.svg-gallery .svg-poster:hover .svg-play{transform:scale(1.07);background:rgba(255,255,255,.75)}
.svg-gallery .svg-stage-title{margin-top:12px;font-size:18px;line-height:1.4;font-weight:500}
.svg-gallery .svg-stage-caption{margin-top:4px;font-size:13px;line-height:1.5;opacity:.72}
.svg-gallery .svg-stage-caption:empty{display:none}
.svg-gallery.svg-mode-top .svg-item.svg-active .svg-thumb{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px rgba(0,0,0,.55)}
.svg-gallery.svg-mode-top .svg-item.svg-active .svg-title{font-weight:700}
@media(max-width:760px){
 .svg-gallery{--svg-cols:2;--svg-gap-eff:min(var(--svg-gap),12px);--svg-peek:18px}
 .svg-gallery.svg-layout-carousel{--svg-cols:min(3,var(--svg-columns))}
 .svg-gallery.svg-cols-1{--svg-cols:1}
 .svg-gallery .svg-play{width:42px;height:42px}
 .svg-gallery .svg-poster .svg-play{width:56px;height:56px}
 .svg-gallery .svg-stage-title{font-size:16px}
}
@media(max-width:420px){
 .svg-gallery{--svg-cols:1}
 .svg-gallery.svg-layout-carousel{--svg-cols:min(2,var(--svg-columns))}
}
@media(prefers-reduced-motion:reduce){.svg-gallery *,.svg-lightbox *{scroll-behavior:auto!important;transition:none!important}}