style.less

.stge--root {
	--scale-speaker: 120;
	--top: calc(100 - 100 / var(--scale-speaker) * 100);
	--offset: 25;
	--transition: 400;
	--scale-dropoff: 3;
	--position: 0;
	--width: calc((100vw - var(--sheldWidth)) / 2);
}
.stge--root {
	position: absolute;
	top: calc(var(--top) * 1%);
	bottom: 0;
	left: calc(var(--position) * (100vw - var(--width)) / 100);
	left: clamp(0vw, calc(var(--position) * (100vw - var(--width)) / 100 - var(--settings-panel-width, 0px)), calc(100vw - var(--width)));
	width: var(--width);
	perspective: 500px;
	transform-style: preserve-3d;
	transition: calc(var(--transition) * 1ms);

	> .stge--wrapper {
		--order: 0;
		--dir: 1;
		position: absolute;
		top: 0;
		left: calc(var(--offset) * 1% * var(--dir) * var(--order));
		width: 100%;
		bottom: 0;
		transform: translate3d(0, 0, calc(-1px * var(--order)));
		transform-origin: bottom center;
		transition: calc(var(--transition) * 1ms), transform 1ms;
		scale: calc(100% - var(--order) * var(--scale-dropoff) * 1%);
		&.stge--exit {
			left: calc(100vw * var(--dir));
		}
		&.stge--last {
			scale: calc(var(--scale-speaker) * 1%);
		}
		> .stge--img {
			height: 100%;
			object-fit: contain;
			aspect-ratio: 1/1.5;
			object-position: bottom center;
			margin-left: 50%;
			transform: translateX(-50%);
		}
	}
}




.stge--positionContainer {
	display: flex;
	flex-direction: row;
	gap: 1em;
	align-items: center;
}