.diagram-gallery{margin:0 auto;max-width:1200px;padding:1rem;width:100%}.diagram-grid{display:grid;gap:1rem;grid-template-columns:1fr;max-width:100%}@media (max-width:767px){.diagram-grid{display:flex;flex-direction:column;gap:1rem}}@media (min-width:768px) and (max-width:1023px){.diagram-grid{gap:2rem;grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.diagram-grid{gap:2.5rem;grid-template-columns:repeat(3,1fr)}}.diagram-grid:after{content:"";grid-column:span 2}.diagram-item{box-sizing:border-box;display:flex;justify-content:center;margin:0 auto;max-width:100%}.diagram-item.animate-in{opacity:1;transform:translateY(0)}.diagram-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);cursor:pointer;display:block;max-width:100%;overflow:hidden;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;width:100%}.diagram-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.15);transform:translateY(-4px)}.diagram-image-container{aspect-ratio:4/3;background:#fff;overflow:hidden;position:relative;width:100%}.diagram-thumbnail{height:100%;object-fit:cover;transition:transform .3s ease;width:100%}.diagram-card:hover .diagram-thumbnail{transform:scale(1.05)}.diagram-overlay{align-items:center;background:rgba(0,0,0,.5);bottom:0;display:flex;justify-content:center;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.diagram-card:hover .diagram-overlay{opacity:1}.diagram-zoom-btn{align-items:center;background:hsla(0,0%,100%,.9);border:none;border-radius:50%;color:#333;cursor:pointer;display:flex;height:50px;justify-content:center;transition:background-color .3s ease,transform .3s ease;width:50px}.diagram-zoom-btn:hover{background:#fff;transform:scale(1.1)}.diagram-zoom-btn:focus{outline:2px solid #007acc;outline-offset:2px}.diagram-title{background:#f8f9fa;border-top:1px solid #e9ecef;padding:1rem}.diagram-title h4{color:#333;font-size:1rem;font-weight:600;line-height:1.4;margin:0;text-align:center}.diagram-lightbox{align-items:center;display:none;height:100%;justify-content:center;left:0;opacity:0;position:fixed;top:0;transition:opacity .3s ease;width:100%;z-index:9999}.diagram-lightbox.active{display:flex;opacity:1}.lightbox-backdrop{background:rgba(0,0,0,.8);cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%}.lightbox-container{background:#fff;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;overflow:hidden;position:relative}.lightbox-header{align-items:center;background:#f8f9fa;border-bottom:1px solid #dee2e6;display:flex;justify-content:space-between;padding:1rem 1.5rem}.lightbox-title{color:#333;flex:1;font-size:1.25rem;font-weight:600;margin:0}.lightbox-close{background:none;border:none;border-radius:4px;color:#666;cursor:pointer;padding:.5rem;transition:background-color .3s ease,color .3s ease}.lightbox-close:hover{background:#e9ecef;color:#333}.lightbox-close:focus{outline:2px solid #007acc;outline-offset:2px}.lightbox-content{background:#f8f9fa;flex:1;min-height:400px;position:relative}.lightbox-content,.lightbox-image-container{align-items:center;display:flex;justify-content:center}.lightbox-image-container{max-height:100%;max-width:100%}.lightbox-image{border-radius:4px;max-height:70vh;max-width:100%;object-fit:contain}.lightbox-nav{align-items:center;background:rgba(0,0,0,.5);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:50px;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);transition:background-color .3s ease,transform .3s ease;width:50px;z-index:10}.lightbox-prev{left:1rem}.lightbox-next{right:1rem}.lightbox-nav:hover{background:rgba(0,0,0,.7);transform:translateY(-50%) scale(1.1)}.lightbox-nav:focus{outline:2px solid #007acc;outline-offset:2px}.lightbox-indicators{background:#f8f9fa;border-top:1px solid #dee2e6;display:flex;gap:.5rem;justify-content:center;padding:1rem}.indicator-dot{background:#dee2e6;border:none;border-radius:50%;cursor:pointer;height:12px;transition:background-color .3s ease,transform .3s ease;width:12px}.indicator-dot:hover{background:#adb5bd;transform:scale(1.2)}.indicator-dot.active{background:#007acc}.indicator-dot:focus{outline:2px solid #007acc;outline-offset:2px}@media (max-width:767px){.diagram-gallery{padding:.5rem}.lightbox-container{max-height:95vh;max-width:95vw}.lightbox-header{padding:.75rem 1rem}.lightbox-title{font-size:1.1rem}.lightbox-nav{height:40px;width:40px}.lightbox-prev{left:.5rem}.lightbox-next{right:.5rem}.lightbox-image{max-height:60vh}}.diagram-item{margin-bottom:1rem;opacity:0;transform:translateY(20px);transition:all .4s ease}.diagram-item.animate{opacity:1;transform:translateY(0)}.diagram-lightbox:focus-within{outline:none}@media (prefers-reduced-motion:reduce){.diagram-card,.diagram-overlay,.diagram-thumbnail,.diagram-zoom-btn,.indicator-dot,.lightbox-nav{transition:none}.diagram-item{animation:none;opacity:1;transform:none}}@media (prefers-contrast:high){.diagram-card{border:2px solid #000}.diagram-overlay{background:rgba(0,0,0,.8)}.lightbox-backdrop{background:rgba(0,0,0,.9)}}