:root {
	--unit: 1vmin;
	--zoom: 100;
	--available-screen-min: 665;
	--px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
	--auto-rotate-duration: 10s;
	--auto-rotate-timing-func: ease;
	--auto-rotate-direction: forwards;
	--fallback-fonts:
		-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, Ubuntu, sans-serif, 'Apple Color Emoji',
		'Twemoji Mozilla', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	text-size-adjust: none;
}

*::before,
*::after {
	display: block;
}

body {
	touch-action: none;
}

html {
	cursor: -webkit-grab;
	cursor: grab;
}

html:active {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

html,
body {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	scrollbar-width: thin;
	font-size: 0;
	overflow: hidden;
	/* to make touch gestures work correctly */
}

html::before {
	content: '';
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-image: radial-gradient(circle at 50% 50%, #fff, #f8f8f8);
	background-size: 100vw 100vh;
	background-repeat: no-repeat;
}

[data-camera] {
	--scene-size: 500;
	--scale: 100;
	--perspective: 1200;
	--cameraZ: 0;
	--cameraY: 0;
	--translateX: 0;
	--translateY: 0;
	--translateZ: 0;
}

[data-camera] {
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	--fmt-s: calc(var(--scale, 100) / 100);
	transform: scale(var(--fmt-s));
	display: grid;
	place-items: center;
	overflow: visible;
	transition: transform ease 500ms;
	will-change: transform;
}

[data-scene] {
	position: relative;
	left: 0;
	top: 0;
	width: calc(var(--scene-size) * var(--px));
	height: calc(var(--scene-size) * var(--px));
	background-color: rgba(0, 0, 0, 0.1);
	transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg))
		rotateZ(calc(var(--cameraZ, 0) * 1deg))
		translate3d(
			calc(var(--translateX, 0) * var(--px)),
			calc(var(--translateY, 0) * var(--px) * -1),
			calc(var(--translateZ, 0) * var(--px) * -1)
		);
	--max-rotation: calc((360 + var(--cameraZ)) * 1deg);
	transform-origin: 50% 50%;
}

[data-camera][data-dragging] {
	transition: none;
}

@-webkit-keyframes rotateCamera {
	to {
		transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg))
			rotateZ(var(--max-rotation))
			translate3d(
				calc(var(--translateX, 0) * var(--px)),
				calc(var(--translateY, 0) * var(--px) * -1),
				calc(var(--translateZ, 0) * var(--px) * -1)
			);
	}
}

@keyframes rotateCamera {
	to {
		transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg))
			rotateZ(var(--max-rotation))
			translate3d(
				calc(var(--translateX, 0) * var(--px)),
				calc(var(--translateY, 0) * var(--px) * -1),
				calc(var(--translateZ, 0) * var(--px) * -1)
			);
	}
}
[data-scene],
[data-camera],
[data-3d] {
	transform-style: preserve-3d;
}

[data-hidden],
.class-hidden {
	display: none;
}

.test .cuboid {
	--base-width: 256;
	--side-width: 256;
	--height: 256;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.test .cuboid::before,
.test .cuboid::after,
.test .cuboid div::before,
.test .cuboid div::after {
	transition: background-color ease 200ms;
}

.test [data-camera] {
	--cameraY: 46;
	--cameraZ: -29;
}
.test [data-scene] {
	transition: background-color ease 300ms;
}
.test [data-scene]::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(20 * var(--px));
	height: calc(20 * var(--px));
	background-color: black;
	border-radius: 50%;
	transform: translate(-50%, -50%) rotateZ(calc(var(--cameraZ) * -1deg)) rotateX(calc(var(--cameraY) * -1deg));
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01);
}
.test [data-float] {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}
.test [data-autorotate] [data-float] {
	-webkit-animation: test-rotate linear 10s infinite;
	animation: test-rotate linear 10s infinite;
}
.test [data-autorotate] [data-scene] {
	background-color: rgba(0, 0, 0, 0);
}
.test [data-autorotate] [data-scene] .cuboid {
	--color-background: rgba(255, 147, 8, 0.2);
}
.test span {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	padding: 0.8em;
	font-family: system-ui, sans-serif;
	font-size: 16px;
}
.test [data-3d],
.test [data-3d]::before,
.test [data-3d]::after,
.test [data-3d] div,
.test [data-3d] div::before,
.test [data-3d] div::after {
	transform-style: preserve-3d;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01);
}

@-webkit-keyframes test-rotate {
	to {
		transform: rotateX(1turn) rotateY(2turn) rotateZ(3turn);
	}
}

@keyframes test-rotate {
	to {
		transform: rotateX(1turn) rotateY(2turn) rotateZ(3turn);
	}
}
.test .cuboid {
	--calc-base-width: calc(var(--base-width) * var(--px));
	--calc-side-width: calc(var(--side-width) * var(--px));
	--calc-height: calc(var(--height) * var(--px));
	--color-background: rgb(255, 147, 8);
	--color-shade: rgba(0, 0, 0, 0.1);
	width: var(--calc-base-width);
	height: var(--calc-side-width);
	--half-variable: var(--calc-height);
}
.test .cuboid::before,
.test .cuboid::after,
.test .cuboid div::before,
.test .cuboid div::after {
	--calc-sgn-half: calc(var(--half-variable) * 0.5 * var(--sgn));
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-background);
	transform: translateZ(var(--calc-sgn-half));
}
.test .cuboid::before,
.test .cuboid div::before {
	--sgn: 1;
}
.test .cuboid::after,
.test .cuboid div::after {
	--sgn: -1;
}
.test .cuboid div {
	--half-variable: var(--calc-side-width);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotateX(90deg);
	width: var(--calc-base-width);
	height: var(--calc-height);
}
.test .cuboid div::before,
.test .cuboid div::after {
	background-image: linear-gradient(var(--color-shade) 0 0);
}
.test .cuboid div:nth-child(1) {
	--half-variable: var(--calc-base-width);
	transform: translate(-50%, -50%) rotateY(-90deg);
	width: var(--calc-height);
	height: var(--calc-side-width);
}
.test .cuboid div:nth-child(1)::before,
.test .cuboid div:nth-child(1)::after {
	background-image: linear-gradient(var(--color-shade) 0 0), linear-gradient(var(--color-shade) 0 0);
}