: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;
}

:root {
	--broadness: 400;
	--thickness: 100;
	--corner-radius: 0.26;
	--inner-circle-radius: 0.2;
	--inner-circle-width-props: 0.98;
	--inner-circle-height-props: 0.98;
	--corner-circle-width-props: 1.15;
	--color-background: hsl(219.5, 100%, 57.8%);
	--color-shade: rgba(0, 0, 0, 0.07);
	--shade-step: 0.02;
	--shade-x-left: 0.1;
	--shade-x-right: 0;
	--shade-y-left: 0.29;
	--shade-y-right: 0;
	--inner-shade-opacity: 0.5;
	--inner-shade-start: 0.2;
	--shadow-color: rgba(0, 0, 0, 0.3);
	--corner-circle-diameter: calc(var(--broadness) * var(--corner-radius) * 2);
	--inner-circle-diameter: calc(
		var(--inner-circle-radius) * var(--broadness) * var(--px) * var(--inner-circle-width-props)
	);
	--calc-broadness: calc(var(--broadness) * var(--px));
	--calc-corner-radius: calc(var(--corner-radius) * 100%);
}

.hn-3d {
	position: absolute;
	width: var(--calc-broadness);
	height: var(--calc-broadness);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
}
.hn-3d .custom-cylinder,
.hn-3d .custom-cube {
	position: absolute;
}

[data-camera] {
	--cameraY: 31;
	--cameraZ: 233;
}

body {
	filter: drop-shadow(0 calc(55 * var(--px)) calc(16 * var(--px)) var(--shadow-color));
}

[data-scene] {
	background-color: #fff0;
}

[data-3d],
[data-3d]::before,
[data-3d]::after,
[data-3d] div,
[data-3d] div::before,
[data-3d] div::after {
	transform-style: preserve-3d;
	box-shadow: var(--need-edge-fix, 0 0 0 1px rgba(0, 0, 0, 0.01));
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background: #fff;
	}

	html::before {
		background-image: radial-gradient(circle at center, #000, #111);
	}

	body {
		--shadow-color: rgba(255, 255, 255, 0.1);
	}
}
@supports not (-moz-appearance: none) {
	:root {
		--need-edge-fix: none;
		--inner-circle-height-props: 1;
	}
}
.custom-cylinder {
	--diameter: var(--corner-circle-diameter);
	--color-side: var(--color-background);
	--calc-theta: calc(360 / var(--n));
	--calc-diameter: calc(var(--diameter) * var(--px));
	--calc-radius: calc(var(--calc-diameter) * 0.5);
	--calc-depth: calc(var(--thickness) * var(--px) * var(--fix-height-props, 1));
	width: var(--calc-diameter);
	height: var(--calc-diameter);
}
.custom-cylinder:nth-child(1) {
	left: 0;
	bottom: 0;
	--shade-start: -0.08;
}
.custom-cylinder:nth-child(2) {
	left: 0;
	top: 0;
	--start: 1;
	--shade-start: 0.1;
}
.custom-cylinder:nth-child(3) {
	right: 0;
	top: 0;
	--start: 2;
	--shade-start: 0.3;
}
.custom-cylinder:nth-child(4) {
	right: 0;
	bottom: 0;
	--start: 3;
	--shade-start: 0.1;
}
.custom-cylinder:nth-child(5) {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform: translate(-50%, -50%) rotate(-145deg);
	--fix-height-props: var(--inner-circle-height-props);
	--diameter: calc(var(--broadness) * var(--inner-circle-radius) * 2);
}
.custom-cylinder:nth-child(5) div {
	--shade-binary: calc(var(--j) - (var(--binary) * (2 * var(--k))));
	--shades: clamp(0, (var(--shade-binary) / var(--n)) * var(--inner-shade-opacity), 1);
	--shade: rgba(0, 0, 0, calc(var(--shades) + var(--inner-shade-start)));
}
.custom-cylinder div {
	--beta: calc(var(--shift) * 1deg);
	--angle: calc(var(--calc-theta) * var(--i) * 1deg);
	--perpendicular: calc(var(--calc-radius) * var(--perpend));
	--calc-edge: calc(var(--calc-diameter) * var(--edge) * var(--corner-circle-width-props, 1));
	--start-from: calc(var(--start, 0) * 90deg);
	--shade-algo: calc(var(--shade-start) + (var(--shade-step) * var(--i)));
	--color-shade: rgba(0, 0, 0, var(--shade-algo));
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--calc-edge);
	height: var(--calc-depth);
	transform: translate(-50%, -50%) rotateZ(var(--start-from)) rotateZ(var(--beta)) rotateZ(var(--angle))
		translateX(var(--perpendicular)) rotateX(90deg) rotateY(90deg);
	transform-origin: center;
	background-color: var(--color-side);
	background-image: linear-gradient(var(--shade, var(--color-shade)) 0 0);
}

.custom-cube {
	--base-width: var(--broadness);
	--side-width: var(--broadness);
	--crop-size: calc(var(--calc-corner-radius) * 2);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	--calc-base-width: calc(var(--base-width) * var(--px));
	--calc-side-width: calc(var(--side-width) * var(--px));
	--calc-height: calc(var(--thickness) * var(--px));
	--circle-mask: radial-gradient(#fff0 var(--inner-circle-diameter), #fff calc(var(--inner-circle-diameter) + 1px));
	--half-variable: var(--calc-height);
	width: var(--calc-base-width);
	height: var(--calc-side-width);
}
.custom-cube::before,
.custom-cube::after {
	background-color: var(--color-background);
	background-image: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.2));
	mask-image: var(--circle-mask);
	-webkit-mask-image: var(--circle-mask);
}
.custom-cube::before,
.custom-cube::after,
.custom-cube div::before,
.custom-cube div::after {
	--calc-sgn-half: calc(var(--half-variable) * 0.5 * var(--sgn));
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform: translateZ(var(--calc-sgn-half));
}
.custom-cube::before,
.custom-cube div::before {
	--sgn: 1;
}
.custom-cube::after,
.custom-cube div::after {
	--sgn: -1;
}
.custom-cube 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);
}
.custom-cube div::before,
.custom-cube div::after {
	background-image:
		var(--gradient, none), linear-gradient(var(--side-shade) 0 0), linear-gradient(var(--color-background) 0 0);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: calc(100% - var(--crop-size)) 100%;
}
.custom-cube 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);
}
.custom-cube div:nth-child(1)::before,
.custom-cube div:nth-child(1)::after {
	background-size: 100% calc(100% - var(--crop-size));
}
.custom-cube::before,
.custom-cube::after {
	background-color: var(--color-background);
	border-radius: var(--calc-corner-radius);
}
.custom-cube div:nth-child(1)::before {
	--side-shade: rgba(0, 0, 0, var(--shade-x-left));
}
.custom-cube div:nth-child(1)::after {
	--side-shade: rgba(0, 0, 0, var(--shade-x-right));
	--gradient: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
}
.custom-cube div:nth-child(2)::before {
	--side-shade: rgba(0, 0, 0, var(--shade-y-left));
}
.custom-cube div:nth-child(2)::after {
	--side-shade: rgba(0, 0, 0, var(--shade-y-right));
	--gradient: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.31));
}