maslo-deck {
	--width: 1024px;
	--aspect-ratio: 4 / 3;

	--brush: 12;
	--highlight: rgba(255 20 20 / 0.8);

	--overview-scale: 0.3;
	--overview-border: 4px;
	--overview-bg: #666;

	--bg: Canvas;

	--scale: 1;
	--current: 0;
	--total: 0;

	counter-reset: slide slide-before slide-current slide-after;
	box-sizing: border-box;
	background-color: var(--bg);
	position: relative;
	overflow: hidden;

	* { box-sizing: inherit; }

	@media screen {
		&:state(full) {
			display: block;

			maslo-slide {
				position: absolute;
				margin: auto;
				inset: 0;
				zoom: var(--scale);

				// display:none breaks counters
				&:not(:state(current)) { visibility: hidden; }
			}
		}
	}

	&:state(overview) {
		display: flex;
		flex-wrap: wrap;
		--gap: 32px;
		padding: var(--gap);
		gap: var(--gap);
		background-color: var(--overview-bg);

		--thickness: calc(var(--overview-border) / var(--overview-scale));

		maslo-slide {
			zoom: var(--overview-scale);
			background-color: var(--bg);
			border-radius: var(--thickness);
			box-shadow: 0 var(--thickness) calc(2 * var(--thickness)) rgba(0, 0, 0, 0.6);

			&:hover {
				outline: var(--thickness) solid rgba(255, 255, 255, 0.25);
			}

			&:state(current) {
				outline: var(--thickness) solid rgba(255, 255, 255, 0.75);
			}
		}
	}

	&[standalone] {
		width: 100dvw;
		min-height: 100dvh;
		body:has(&) { margin: 0; }
	}
}