body {
	visibility: visible;
}

html,
body {
	height: 100%;
	overflow: hidden;
}

#stage {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--color-bg);
}

#frame {
	position: relative;
	overflow: hidden;
	width: min(100vw, calc(100vh * 16 / 9));
	height: min(100vh, calc(100vw * 9 / 16));
}

@supports (height: 100dvh) {
	#frame {
		width: min(100vw, calc(100dvh * 16 / 9));
		height: min(100dvh, calc(100vw * 9 / 16));
	}
}

#frame iframe {
	position: absolute;
	top: -50%;
	left: 0;
	display: block;
	width: 100%;
	height: 200%;
	border: 0;
}

#frame iframe#fallback-frame {
	top: 0;
	height: 100%;
}

#catcher {
	position: fixed;
	inset: 0;
	z-index: 2;
	cursor: pointer;
}

#ui {
	position: fixed;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 1;
	transition: opacity .4s ease;
}

#ui.hidden {
	opacity: 0;
}

#ui.hidden #progress,
#ui.hidden .btn,
#ui.hidden .volume-control {
	pointer-events: none;
}

.bottombar {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 74px 20px max(16px, env(safe-area-inset-bottom)) 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
}

#progress {
	position: relative;
	height: 3px;
	margin: 0 6px 12px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .24);
	cursor: pointer;
	pointer-events: auto;
	touch-action: none;
	transition: height .15s ease;
}

#progress:hover,
#progress.scrubbing {
	height: 5px;
}

#played {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	border-radius: 3px;
	background: #fff;
}

#knob {
	position: absolute;
	top: 50%;
	right: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	transform: translate(50%, -50%) scale(0);
	transition: transform .15s ease;
}

#progress:hover #knob,
#progress.scrubbing #knob {
	transform: translate(50%, -50%) scale(1);
}

.row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	opacity: .88;
	pointer-events: auto;
	transition: opacity .15s ease, background .15s ease;
}

.btn:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .12);
}

.btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.btn .icon {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.btn.is-hidden {
	visibility: hidden;
	pointer-events: none;
}

.volume-control {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	pointer-events: auto;
}

.volume-slider {
	--volume-pct: 100%;
	width: 76px;
	height: 20px;
	margin: 0 4px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.volume-slider::-webkit-slider-runnable-track {
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(to right, #fff 0 var(--volume-pct), rgba(255, 255, 255, .24) var(--volume-pct) 100%);
}

.volume-slider::-webkit-slider-thumb {
	width: 12px;
	height: 12px;
	margin-top: -4.5px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	appearance: none;
	-webkit-appearance: none;
}

.volume-slider::-moz-range-track {
	height: 3px;
	border: 0;
	border-radius: 3px;
	background: rgba(255, 255, 255, .24);
}

.volume-slider::-moz-range-progress {
	height: 3px;
	border-radius: 3px;
	background: #fff;
}

.volume-slider::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: #fff;
}

.volume-slider:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.time {
	margin-left: 6px;
	color: rgba(255, 255, 255, .8);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	user-select: none;
}

.spacer {
	flex: 1;
}

#start {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: grid;
	place-items: center;
	background: #000;
	transition: opacity .45s ease;
}

#start > * {
	grid-area: 1 / 1;
}

#start.fading {
	opacity: 0;
	pointer-events: none;
}

#start.gone {
	display: none;
}

#startbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	appearance: none;
	-webkit-appearance: none;
	transition: background .15s ease, opacity .4s ease, transform .2s ease;
}

#start.ready #startbtn {
	opacity: 1;
}

#startbtn:hover {
	background: rgba(255, 255, 255, .12);
}

#startbtn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

#start.pressed #startbtn {
	opacity: 0;
	transform: scale(.94);
	pointer-events: none;
}

#startbtn .icon {
	display: block;
	width: 34px;
	height: 34px;
	fill: currentColor;
}

#startspin {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

#start.waiting #startspin {
	opacity: 1;
}

#replay {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: none;
	place-items: center;
	background: #000;
}

#replay.show {
	display: grid;
}

#replaybtn {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 14px 26px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease;
}

#replaybtn:hover {
	background: rgba(255, 255, 255, .12);
}

#replaybtn .icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

#loader {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: grid;
	place-items: center;
	background: #000;
	transition: opacity .5s ease;
}

#loader.gone {
	opacity: 0;
	pointer-events: none;
}

.spinner {
	width: 30px;
	height: 30px;
	border: 2px solid rgba(255, 255, 255, .22);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin .8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.noscript-stage {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	background: #000;
}

.noscript-frame {
	position: relative;
	overflow: hidden;
	width: min(100vw, calc(100vh * 16 / 9));
	height: min(100vh, calc(100vw * 9 / 16));
}

.noscript-frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@supports (height: 100dvh) {
	.noscript-frame {
		width: min(100vw, calc(100dvh * 16 / 9));
		height: min(100dvh, calc(100vw * 9 / 16));
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

@media (max-width: 600px) {
	.bottombar {
		padding-right: 12px;
		padding-left: 12px;
	}

	.volume-slider {
		width: 64px;
	}
}