.screenshots-page-main{background:var(--bg-base);color:var(--text-main);overflow-x:hidden} .ss-header{position:relative;padding:10rem 0 5rem;display:flex;flex-direction:column;align-items:center;justify-content:center} .ss-header-content{max-width:850px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center} .ss-header-content .showcase-title{font-size:clamp(3rem,5vw,4.5rem);line-height:1.1;margin-bottom:1.5rem;font-weight:700;letter-spacing:-1px} .ss-header-content .ss-lead{font-size:1.15rem;color:var(--text-muted);line-height:1.7;margin:0} .editor-gallery-section{border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);padding:6rem 0} .bento-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;gap:1.5rem;max-width:1100px;margin:0 auto} .bento-item{position:relative;border-radius:12px;overflow:hidden;display:block;background:var(--bg-card);border:1px solid var(--border-color);box-shadow:0 15px 35px rgba(0,0,0,0.5);transition:all 0.4s cubic-bezier(0.16,1,0.3,1)} .bento-large{grid-column:span 2;grid-row:span 2} .bento-item img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);filter:brightness(0.85)} .bento-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,123,255,0.8) 0%,rgba(13,17,22,0.2) 100%);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease} .overlay-content{text-align:center;transform:translateY(20px);transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275)} .overlay-content iconify-icon{font-size:3rem;color:#fff;display:block;margin-bottom:0.5rem;filter:drop-shadow(0 0 15px rgba(255,255,255,0.5));pointer-events:none} .overlay-content span{color:#fff;font-weight:600;font-size:1.1rem;letter-spacing:0.5px;text-transform:uppercase} .bento-item:hover{transform:translateY(-8px);border-color:var(--primary);box-shadow:0 25px 45px rgba(0,0,0,0.7),0 0 30px var(--primary-glow);z-index:2} .bento-item:hover img{transform:scale(1.08)} .bento-item:hover .bento-overlay{opacity:1} .bento-item:hover .overlay-content{transform:translateY(0)} .community-gallery-section{padding:6rem 0 10rem;overflow:hidden} .community-swiper{width:100%;padding-top:50px;padding-bottom:80px} .community-swiper .swiper-slide{width:600px;aspect-ratio:16 / 9} .slide-inner{width:100%;height:100%;border-radius:16px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,0.1);box-shadow:0 20px 50px rgba(0,0,0,0.8)} .slide-inner img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease} .slide-overlay{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(0,123,255,0.5) 0%,rgba(5,6,8,0.5) 100%);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease} .slide-overlay iconify-icon{font-size:4rem;color:#fff;filter:drop-shadow(0 0 20px rgba(255,255,255,0.8));transform:scale(0.8);transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);pointer-events:none} .swiper-slide-active .slide-inner{cursor:pointer;transition:border-color 0.3s ease} .swiper-slide-active:hover .slide-inner{border-color:var(--primary)} .swiper-slide-active:hover img{transform:scale(1.05)} .swiper-slide-active:hover .slide-overlay{opacity:1} .swiper-slide-active:hover .slide-overlay iconify-icon{transform:scale(1)} .swiper-button-next,.swiper-button-prev{color:var(--primary) !important;background:rgba(13,17,22,0.8);backdrop-filter:blur(5px);width:50px !important;height:50px !important;border-radius:50%;border:1px solid rgba(0,123,255,0.3);transition:all 0.3s ease} .swiper-button-next:after,.swiper-button-prev:after{font-size:1.2rem !important;font-weight:bold} .swiper-button-next:hover,.swiper-button-prev:hover{background:var(--primary);color:#fff !important;box-shadow:0 0 20px var(--primary-glow)} .swiper-pagination-bullet{background:#8b949e !important;opacity:0.5 !important;width:10px !important;height:10px !important;transition:all 0.3s ease} .swiper-pagination-bullet-active{background:var(--primary) !important;opacity:1 !important;width:25px !important;border-radius:5px !important;box-shadow:0 0 10px var(--primary-glow)} .fancybox__container{--fancybox-bg:rgba(3,4,5,0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:9999999} .fancybox__toolbar{background:transparent !important;text-shadow:none !important} .fancybox__nav .carousel__button{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:var(--primary);border-radius:50%;transition:all 0.3s ease} .fancybox__nav .carousel__button:hover{background:var(--primary);color:#fff;box-shadow:0 0 15px var(--primary-glow)} @media(max-width:1024px){.community-swiper .swiper-slide{width:450px}} @media(max-width:992px){.bento-gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px} .bento-large{grid-column:span 2;grid-row:span 1}} @media(max-width:768px){.bento-gallery-grid{grid-template-columns:1fr;grid-auto-rows:220px} .bento-large{grid-column:span 1;grid-row:span 1} .ss-header-content .showcase-title{font-size:2.5rem} .community-swiper .swiper-slide{width:85vw} .swiper-button-next,.swiper-button-prev{display:none !important}}