.sm-media-viewer {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: grid;
	place-items: center;
	padding: clamp(14px, 4vw, 44px);
	background: rgba(5, 7, 10, .9);
	backdrop-filter: blur(12px);
	cursor: zoom-out;
}
.sm-media-viewer__track { position: absolute; inset: 0; display: flex; overflow: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sm-media-viewer__track::-webkit-scrollbar { display: none; }
.sm-media-viewer__slide { display: grid; flex: 0 0 100%; min-width: 0; height: 100%; box-sizing: border-box; padding: clamp(14px, 4vw, 44px); place-items: center; scroll-snap-align: start; }
.sm-media-viewer__image { display: block; grid-area: 1 / 1; max-width: 100%; max-height: calc(100vh - 40px); width: auto; height: auto; border-radius: 14px; box-shadow: 0 24px 80px rgba(0, 0, 0, .55); cursor: zoom-out; object-fit: contain; }
.sm-media-viewer__close {
	position: fixed;
	top: max(14px, env(safe-area-inset-top));
	right: max(14px, env(safe-area-inset-right));
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	background: rgba(25, 29, 36, .82);
	color: #fff;
	cursor: pointer;
}
.sm-media-viewer__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sm-media-viewer__close:hover { background: var(--sm-accent); }
.sm-media-viewer__previous,
.sm-media-viewer__next {
	position: absolute;
	z-index: 1;
	top: 50%;
	display: grid;
	width: 48px;
	height: 48px;
	padding: 0;
	transform: translateY(-50%);
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	background: rgba(25, 29, 36, .82);
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}
.sm-media-viewer__previous { left: max(16px, env(safe-area-inset-left)); }
.sm-media-viewer__next { right: max(16px, env(safe-area-inset-right)); }
.sm-media-viewer__previous:hover,
.sm-media-viewer__next:hover { background: var(--sm-accent); }
.sm-media-viewer :is(.sm-media-viewer__previous, .sm-media-viewer__next) svg,
.sm-prose .sm-publish-carousel > button svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sm-media-viewer :is(.sm-media-viewer__previous, .sm-media-viewer__next):disabled { opacity: .35; cursor: default; }
.sm-media-viewer__counter { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; padding: 5px 12px; transform: translateX(-50%); border-radius: 999px; background: rgba(25, 29, 36, .82); color: #fff; font-size: .85rem; pointer-events: none; }