/* One 60% overlay: native dialogs use their backdrop, other viewers their surface. */
html body .g5-lightbox-enhanced { background: rgba(0,0,0,.6) !important; padding: 52px 18px 24px; box-sizing: border-box; }
html body dialog.g5-lightbox-enhanced { position: fixed; inset: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; background: transparent !important; box-shadow: none; }
html body dialog.g5-lightbox-enhanced::backdrop { background: rgba(0,0,0,.6) !important; }
html body dialog.g5-lightbox-enhanced:not([open]) { display: none; }
html body dialog.g5-lightbox-enhanced[open] { display: flex; flex-direction: column; }
html body .g5-lightbox-enhanced :is(.project-lightbox-stage,.wf-gallery-stage) { flex: 1; min-height: 0; height: 100%; display: grid; grid-template-columns: 96px minmax(0,1fr) 96px; align-items: center; gap: 0; }
html body .g5-lightbox-enhanced .g5-lightbox-media { grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; }
html body .g5-lightbox-enhanced .g5-lightbox-viewport { flex: none; width: 100%; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; scrollbar-width: none; }
html body .g5-lightbox-enhanced .g5-lightbox-viewport::-webkit-scrollbar { display: none; }
html body .g5-lightbox-enhanced .g5-lightbox-canvas { display: grid; place-items: center; min-width: 100%; min-height: 100%; }
html body .g5-lightbox-enhanced .g5-lightbox-canvas img { display: block; flex: none; max-width: none; max-height: none; object-fit: contain; background: transparent; user-select: none; -webkit-user-drag: none; }
html body .g5-lightbox-enhanced .g5-lightbox-canvas img.is-drawing { background: white; }
html body .g5-lightbox-enhanced :is(figcaption,.wf-gallery-caption) { display: flex; align-self: center; width: var(--g5-caption-width,100%); max-width: 100%; box-sizing: border-box; padding: 0; margin: 8px 0 0; justify-content: space-between; gap: 16px; text-align: left; color: rgba(255,255,255,.75); }
html body .g5-lightbox-enhanced .wf-gallery-stage button { color: white; background: transparent; }
html body .g5-lightbox-enhanced .g5-lightbox-toolbar { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 24px; background: var(--heading); color: white; }
html body .g5-lightbox-enhanced .g5-lightbox-toolbar button { display: grid; place-items: center; width: 44px !important; height: 44px; min-height: 44px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: white !important; font: inherit; font-size: 20px; cursor: pointer; }
html body .g5-lightbox-enhanced .g5-lightbox-toolbar button:disabled { opacity: .4; cursor: default; }
html body .g5-lightbox-enhanced .g5-lightbox-toolbar button:is(:hover,:focus-visible) { color: var(--hover-solid) !important; }
html body .g5-lightbox-enhanced .g5-lightbox-toolbar button:focus-visible { outline: 2px solid var(--hover-solid); outline-offset: 0; }
html body .g5-lightbox-enhanced .g5-lightbox-toolbar output { min-width: 48px; text-align: center; font: inherit; font-size: 12px; }
html body .g5-lightbox-enhanced.is-zoomed .g5-lightbox-viewport { cursor: grab; touch-action: none; }
html body .g5-lightbox-enhanced.is-panning .g5-lightbox-viewport { cursor: grabbing; }
@media(max-width:600px) {
  html body .g5-lightbox-enhanced { padding: 52px 4px 20px; }
  html body .g5-lightbox-enhanced :is(.project-lightbox-stage,.wf-gallery-stage) { grid-template-columns: 54px minmax(0,1fr) 54px; }
  html body .g5-lightbox-enhanced :is(figcaption,.wf-gallery-caption) { gap: 8px; }
  html body .g5-lightbox-enhanced .g5-lightbox-toolbar output { font-size: var(--g5-phone-body-size,10px); }
}