/* Shared image viewer only: neutral grey surround and top-right close. */
html body dialog:is(.sgh-media-dialog,.ela-media-dialog,.av-media-dialog){position:fixed!important;inset:0!important;margin:auto!important;transform:none!important;box-sizing:border-box!important;width:96vw!important;height:94dvh!important;max-width:96vw!important;max-height:94dvh!important;padding:24px!important;border:1px solid #dfd2ed!important;border-radius:8px!important;background:#e4e4e4!important;overflow:hidden!important;color:#402354!important}
html body dialog:is(.sgh-media-dialog,.ela-media-dialog,.av-media-dialog)[open]{display:flex!important;flex-direction:column!important}
html body dialog:is(.sgh-media-dialog,.ela-media-dialog,.av-media-dialog)::backdrop{background:rgba(20,20,20,.78)!important}
html body :is(.sgh-dialog-toolbar,.ela-dialog-toolbar,.av-dialog-toolbar){position:static!important;inset:auto!important;flex:0 0 64px!important;display:flex!important;align-items:flex-start!important;justify-content:flex-end!important;height:64px!important;min-height:64px!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important}
html body :is(.sgh-dialog-toolbar,.ela-dialog-toolbar,.av-dialog-toolbar) h2{display:none!important}
html body :is(.sgh-dialog-scroll,.ela-dialog-image,.av-dialog-image){box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:1 1 0!important;min-height:0!important;width:100%!important;height:calc(100% - 64px)!important;max-height:none!important;padding:0 16px 16px!important;margin:0!important;background:transparent!important;overflow:hidden!important}
html body :is(.sgh-dialog-scroll,.ela-dialog-image,.av-dialog-image) img{display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;margin:auto!important;border-radius:0!important;box-shadow:none!important}
html body :is(.sgh-dialog-close,.ela-close,.av-close),html body #lightbox .lightbox-close{box-sizing:border-box!important;position:absolute!important;top:24px!important;right:24px!important;left:auto!important;bottom:auto!important;z-index:5!important;display:flex!important;align-items:center!important;justify-content:center!important;width:48px!important;height:48px!important;min-height:48px!important;margin:0!important;padding:0!important;border:1px solid #d7c4e9!important;border-radius:8px!important;background:#fff!important;color:#402354!important;font:32px/1 system-ui,sans-serif!important;cursor:pointer!important}
html body :is(.sgh-dialog-close,.ela-close,.av-close):hover,html body #lightbox .lightbox-close:hover{background:#ebe1f5!important;border-color:#9c7bb8!important}
html body :is(.sgh-dialog-close,.ela-close,.av-close):focus-visible,html body #lightbox button:focus-visible{outline:3px solid #7953a5!important;outline-offset:3px!important}
html body #lightbox{box-sizing:border-box!important;padding:88px 80px 40px!important;background:#e4e4e4!important;overflow:hidden!important}
html body #lightbox img{display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;border-radius:0!important;box-shadow:none!important}
html body #lightbox .lightbox-arrow{background:#fff!important;color:#402354!important;border-color:#d7c4e9!important}
html body #lightbox .lightbox-counter{color:#402354!important;background:#fff!important;border-color:#d7c4e9!important}
@media(max-width:700px){html body dialog:is(.sgh-media-dialog,.ela-media-dialog,.av-media-dialog){padding:16px!important}html body :is(.sgh-dialog-close,.ela-close,.av-close),html body #lightbox .lightbox-close{top:16px!important;right:16px!important}html body :is(.sgh-dialog-scroll,.ela-dialog-image,.av-dialog-image){padding:0 0 16px!important}html body #lightbox{padding:80px 56px 32px!important}html body #lightbox .lightbox-arrow{width:40px!important;height:40px!important}}

/* Media review polish: retain keyboard focus, omit pointer/autofocus rings. */
html:not([data-input-mode="keyboard"]) body :is(button,a,summary,[role="button"]):focus,
html:not([data-input-mode="keyboard"]) body :is(button,a,summary,[role="button"]):focus-visible{outline:none!important;box-shadow:none!important}
html[data-input-mode="keyboard"] body :is(button,a,summary,[role="button"]):focus-visible{outline:3px solid #7953a5!important;outline-offset:4px!important}
.sgh-page .sgh-combined-gallery{display:block;max-width:1200px}
.sgh-page .sgh-combined-gallery .sgh-shot-button{max-width:100%}
@media(max-width:700px){
 html body.sgh-page .sgh-prototype-gallery .sgh-capture-mobile,
 html body .mobile-ui-visual{width:80%;max-width:312px;margin-left:auto;margin-right:auto;justify-self:center}
 .sgh-page .sgh-combined-gallery{max-width:100%;width:100%}
}
html body video{max-width:100%}
.media-playback-note{font:14px/1.6 var(--body,Arial,sans-serif);padding:16px 20px;background:#f5f5f5;color:#4b4b4b;margin:0}
.sgh-recording video{display:block;width:100%;height:auto;object-fit:contain}

html body .sgh-recording video[hidden]{display:none!important}

/* Neutral media surfaces across the portfolio. */
html body :is(.sgh-shot-button,.ela-image-button,.av-image-button,.project-visual.original-cover,.sgh-recording,.video-hero){background:#e4e4e4!important;border-color:#cecece!important}
html body dialog:is(.sgh-media-dialog,.ela-media-dialog,.av-media-dialog){border-color:#c9c9c9!important;color:#292929!important}
html body :is(.sgh-dialog-close,.ela-close,.av-close),html body #lightbox .lightbox-close{border-color:#c5c5c5!important;color:#292929!important}
html body :is(.sgh-dialog-close,.ela-close,.av-close):hover,html body #lightbox .lightbox-close:hover{background:#e4e4e4!important;border-color:#999!important}
html body #lightbox :is(.lightbox-arrow,.lightbox-counter){border-color:#c5c5c5!important;color:#292929!important}
html body .sgh-mobile-composite .sgh-shot-button{background:transparent!important;border:0!important;border-radius:0}

/* Portfolio thumbnail backgrounds only. */
html body .project-card .project-visual.original-cover{background:#FBF9FF!important}