:root{--item-width: 400px;--item-height: 400px;--item-gap: 40px;--active-scale: 1.05;--transition-duration: .3s;--ease-out: cubic-bezier(.25, .46, .45, .94);--scrollbar-height: 6px;--nav-button-size: 48px;--active-border: 4px solid #3b82f6}.gallery-page{width:100%;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}.gallery-wrapper{width:100%;padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.gallery-container{width:100%;max-width:70rem;display:flex;flex-direction:column;gap:2rem}.gallery-header{text-align:center}.gallery-title{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#818cf8,#6a7fe0,#3d60eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;text-shadow:0 4px 20px rgba(129,140,248,.3)}.gallery-controls{display:flex;align-items:center;gap:20px;position:relative;gap:1%;margin-left:-4rem;margin-right:-4rem}.gallery-scroller{width:100%;height:calc(var(--item-height) + 200px);overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;padding:2rem 0;-webkit-overflow-scrolling:touch;cursor:grab;flex-grow:1}.gallery-scroller:active{cursor:grabbing}.gallery-track{display:inline-flex;gap:var(--item-gap);padding:0 calc((100% - var(--item-width)) / 2);height:100%}.nav-button{width:var(--nav-button-size);height:var(--nav-button-size);margin-bottom:12%;border-radius:50%;background:#818cf833;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;flex-shrink:0;outline:none}.nav-button:hover{background:#818cf866;transform:scale(1.1)}.nav-button:focus-visible{box-shadow:0 0 0 3px #3b82f680}.nav-button svg{fill:#3b82f6;width:24px;height:24px}.nav-button:disabled{opacity:.3;cursor:not-allowed}.gallery-item-container{display:flex;flex-direction:column;align-items:center;gap:1.5rem;height:100%}.gallery-item{width:var(--item-width);height:var(--item-height);flex:0 0 auto;border-radius:.75rem;overflow:hidden;box-shadow:0 8px 24px #00000026;transform:scale(1);transition:all var(--transition-duration) var(--ease-out);cursor:pointer;position:relative;border:2px solid transparent}.gallery-item.active{transform:scale(var(--active-scale));box-shadow:0 12px 32px #0003;z-index:10;border:var(--active-border);outline:none}.gallery-item:focus-visible{outline:3px solid #3b82f6;outline-offset:3px}.item-image-container{width:100%;height:100%;overflow:hidden}.item-image{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}.gallery-item.active .item-image{transform:scale(1.05)}.item-details{width:100%;max-width:var(--item-width);opacity:0;transform:translateY(20px);transition:all var(--transition-duration) var(--ease-out);text-align:center;padding:0 1rem;pointer-events:none}.gallery-item.active+.item-details{opacity:1;transform:translateY(0)}.letter{font-size:2.5rem;font-weight:900;color:#1e40af;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.1)}.item-desc{font-size:1.5rem;color:#4b5563;margin:.5rem 0 0;font-weight:600}.gallery-scroller::-webkit-scrollbar{height:var(--scrollbar-height)}.gallery-scroller::-webkit-scrollbar-track{background:#0000000d;border-radius:calc(var(--scrollbar-height) / 2);margin:0 calc((100% - var(--item-width)) / 2)}.gallery-scroller::-webkit-scrollbar-thumb{background:#818cf899;border-radius:calc(var(--scrollbar-height) / 2)}.gallery-scroller::-webkit-scrollbar-thumb:hover{background:#818cf8cc}.gallery-scroller{scrollbar-width:thin;scrollbar-color:rgba(129,140,248,.6) rgba(0,0,0,.05)}@media (max-width: 1600px){:root{--item-width: 360px;--item-height: 360px}}@media (max-width: 1200px){:root{--item-width: 320px;--item-height: 320px;--item-gap: 30px;--nav-button-size: 40px}.gallery-page{margin-left:15%}}@media (max-width: 900px){:root{--item-width: 280px;--item-height: 280px;--item-gap: 25px}.gallery-title{font-size:2rem}.gallery-page{margin-left:15%}.letter{font-size:2rem}.item-desc{font-size:1.25rem}}@media (max-width: 600px){:root{--item-width: 240px;--item-height: 240px;--item-gap: 20px;--scrollbar-height: 4px;--nav-button-size: 36px}.gallery-page{margin-left:15%}.gallery-wrapper{padding:1.5rem}.gallery-title,.letter{font-size:1.75rem}.item-desc{font-size:1.1rem}.nav-button svg{width:20px;height:20px}}