:root{
	--nal-glb-bg:rgba(7,7,7,.965);
	--nal-glb-ui:rgba(255,255,255,.11);
	--nal-glb-line:rgba(255,255,255,.22);
	--nal-glb-text:#fff;
	--nal-glb-muted:rgba(255,255,255,.68);
	--nal-glb-duration:.34s;
	--nal-glb-ease:cubic-bezier(.22,.75,.2,1);
}

body.nal-glb-open{
	overflow:hidden!important;
	touch-action:none;
}

.nal-glb-clickable{cursor:zoom-in}

.nal-glb{
	position:fixed;
	z-index:2147483000;
	inset:0;
	display:grid;
	grid-template-rows:auto 1fr auto;
	background:var(--nal-glb-bg);
	color:var(--nal-glb-text);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .18s ease,visibility 0s linear .18s;
	-webkit-tap-highlight-color:transparent;
}

.nal-glb.is-open{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transition:opacity .18s ease,visibility 0s linear 0s;
}

.nal-glb__topbar{
	position:relative;
	z-index:5;
	display:flex;
	align-items:center;
	justify-content:space-between;
	min-height:62px;
	padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));
	background:linear-gradient(180deg,rgba(0,0,0,.48),transparent);
}

.nal-glb__counter{
	font:700 10px/1 Arial,sans-serif;
	letter-spacing:.14em;
	color:var(--nal-glb-muted);
}

.nal-glb__close,
.nal-glb__nav{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	padding:0;
	border:1px solid var(--nal-glb-line);
	border-radius:50%;
	background:var(--nal-glb-ui);
	color:#fff;
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	cursor:pointer;
}

.nal-glb__close{font:300 30px/1 Arial,sans-serif}

.nal-glb__nav{
	position:absolute;
	z-index:6;
	top:50%;
	transform:translateY(-50%);
	font:300 31px/1 Arial,sans-serif;
}

.nal-glb__nav--prev{left:max(14px,env(safe-area-inset-left))}
.nal-glb__nav--next{right:max(14px,env(safe-area-inset-right))}

.nal-glb__stage{
	position:relative;
	min-width:0;
	min-height:0;
	overflow:hidden;
	padding:8px 76px 14px;
	touch-action:none;
	user-select:none;
}

.nal-glb__track{
	position:absolute;
	inset:0;
	overflow:hidden;
}

.nal-glb__slide{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:8px 76px 14px;
	transform:translate3d(0,0,0);
	transition:transform var(--nal-glb-duration) var(--nal-glb-ease);
	will-change:transform;
}

.nal-glb__slide--next{
	transform:translate3d(100%,0,0);
}

.nal-glb__slide.is-dragging{
	transition:none!important;
}

.nal-glb__image{
	display:block;
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	object-fit:contain;
	object-position:center;
	box-shadow:0 18px 60px rgba(0,0,0,.28);
	-webkit-user-drag:none;
	user-select:none;
}

.nal-glb__bottom{
	position:relative;
	z-index:5;
	min-height:58px;
	padding:10px max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
	background:linear-gradient(0deg,rgba(0,0,0,.48),transparent);
	text-align:center;
}

.nal-glb__caption{
	max-width:780px;
	margin:0 auto;
	font:400 12px/1.5 Arial,sans-serif;
	letter-spacing:.025em;
	color:var(--nal-glb-muted);
}

.nal-glb__loading{
	position:absolute;
	z-index:4;
	inset:50% auto auto 50%;
	width:30px;
	height:30px;
	margin:-15px 0 0 -15px;
	border:2px solid rgba(255,255,255,.18);
	border-top-color:#fff;
	border-radius:50%;
	animation:nal-glb-spin .8s linear infinite;
	opacity:0;
	pointer-events:none;
	transition:opacity .16s ease;
}

.nal-glb.is-loading .nal-glb__loading{opacity:1}

@keyframes nal-glb-spin{to{transform:rotate(360deg)}}

@media(max-width:760px){
	.nal-glb__topbar{min-height:58px}
	.nal-glb__close{width:42px;height:42px}

	.nal-glb__stage{
		padding:0 10px 8px;
	}

	.nal-glb__slide{
		padding:0 10px 8px;
	}

	.nal-glb__image{
		max-width:100%;
		max-height:100%;
		box-shadow:none;
	}

	.nal-glb__nav{
		top:auto;
		bottom:74px;
		width:42px;
		height:42px;
		background:rgba(0,0,0,.42);
	}

	.nal-glb__nav--prev{left:max(12px,env(safe-area-inset-left))}
	.nal-glb__nav--next{right:max(12px,env(safe-area-inset-right))}

	.nal-glb__bottom{
		min-height:54px;
		padding-top:8px;
	}

	.nal-glb__caption{
		max-width:70vw;
		font-size:11px;
		line-height:1.42;
	}
}

@media(prefers-reduced-motion:reduce){
	.nal-glb,
	.nal-glb__slide{
		transition:none!important;
		animation:none!important;
	}
}