.example-gallery{clear:both;padding:55px 0;border-bottom:1px solid #32434b}.example-gallery>h2{margin:14px 0 20px}.example-intro{color:#c2cbd0;max-width:750px}.example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:32px 0}.example-card{padding:0;display:flex;flex-direction:column;align-items:stretch;border-radius:8px;overflow:hidden;min-width:0}.example-preview{display:block;aspect-ratio:1.45;background:#d8d6cf;padding:12px}.example-preview img{width:100%;height:100%;object-fit:contain;filter:none;transform:none}.example-copy{padding:22px}.example-copy h3{font-size:1.55rem;margin:10px 0 15px}.example-copy p{font-size:.85rem;line-height:1.7}.example-actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px;color:#f5cd80;font-size:.9rem}.showcase-dialog{padding:0;width:min(1100px,95vw);max-width:95vw;max-height:94vh;border:1px solid #b6965f;border-radius:10px;background:#0b1d29;color:#f2eee5}.showcase-dialog::backdrop{background:#020b12dd}.example-sheet{padding:25px;overflow:auto;max-height:92vh}.example-dialog-head{display:flex;justify-content:space-between;align-items:start;gap:20px}.example-dialog-head h2{font-size:2rem;margin:8px 0 20px}.example-dialog-head button{margin:0;flex:none}.example-sheet figure{margin:0}.example-sheet figure img{width:100%;height:auto;max-height:60vh;object-fit:contain;background:#d8d6cf}.example-sheet figcaption{font-size:.9rem;color:#d2d9dc;margin-top:14px}.example-dialog-foot{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-top:20px}.example-dialog-foot .button{margin:0 0 0 auto}.example-dialog-foot .secondary-button{margin:0}@media(max-width:1000px){.example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.example-grid{grid-template-columns:1fr}.example-sheet{padding:16px}.example-dialog-head{flex-direction:column;gap:6px}.example-dialog-head h2{font-size:1.7rem}.example-dialog-head button{align-self:flex-end}.example-dialog-foot{gap:10px}.example-dialog-foot .button{margin:0;width:100%}.example-actions>a{min-height:60px;display:inline-flex;align-items:center;font-size:1rem}.example-dialog-foot button{padding:16px}.example-dialog-foot p{font-size:.8rem}}
/* Keep portrait and landscape thumbnails within identical preview frames. */
.example-preview{position:relative;min-height:0;flex:none}.example-preview img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain}