html { scrollbar-gutter: stable; }
html body .case-phone, html body .case-phone *, html body .work-detail-cover, html body .work-detail-cover *, html body [data-pencil-name="work 1"] img, html body [data-pencil-name="work 1"] video, html body [data-work-detail] img, html body [data-work-detail] video { cursor: zoom-in !important; }
html body .media-lightbox, html body .media-lightbox *, html body .media-lightbox::backdrop { cursor: zoom-out !important; }
html body .media-lightbox .media-lightbox-close { cursor: pointer !important; }
html.media-preview-open .cat-cursor,
html:has(.work-detail-cover:hover, .case-phone:hover) .cat-cursor,
html:has([data-work-detail] img:hover, [data-work-detail] video:hover) .cat-cursor,
html:has([data-pencil-name="work 1"] img:hover, [data-pencil-name="work 1"] video:hover) .cat-cursor,
html:has(.media-lightbox[open]) .cat-cursor { visibility: hidden !important; opacity: 0 !important; }
.media-lightbox { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; padding: 0; border: 0; margin: 0; overflow: hidden; background: transparent; }
.media-lightbox::backdrop { background: transparent; }
.media-lightbox-shade { position: absolute; inset: 0; background: var(--media-scrim); opacity: 0; transition: opacity 300ms cubic-bezier(.22,1,.36,1); }
.media-lightbox.is-open .media-lightbox-shade { opacity: 1; }
.media-lightbox-media { position: absolute; display: block; object-fit: contain; margin: 0; cursor: zoom-out; transform-origin: top left; }
.media-lightbox-close { position: absolute; right: 24px; top: 24px; width: 44px; height: 44px; border: 1px solid var(--media-close-border); border-radius: 50%; background: var(--media-close-fill); color: var(--media-overlay-color); font-size: 26px; cursor: pointer; }
:root[data-theme="dark"] .media-lightbox-close:focus-visible,
:root[data-theme="dark"] .media-preview-shell:focus-visible,
:root[data-theme="dark"] [data-work-detail] img:focus-visible,
:root[data-theme="dark"] [data-work-detail] video:focus-visible { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .media-lightbox-shade { transition: none; } }