.-pen-placeholder {
	background: #181921 url('https://blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png') center
		center/50vmin 50vmin no-repeat;
	height: 100vh;
}

:root {
	--chrome-factor: 0;
	--firefox-factor: 1;
}

@supports not (-moz-appearance: none) {
	:root {
		--chrome-factor: 1;
		--firefox-factor: 0;
	}
}
: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;
}

.star-cube {
	--point-color: transparent;
	--edge-color: #c10101;
	--edge-depth-color: rgba(0, 0, 0, 0.15);
	--face-color: #ff0000;
	--back-depth-color: rgba(0, 0, 0, 0.3);
}

html::before {
	background-image: radial-gradient(circle at center, #290000, #0a0000);
}

[data-camera] {
	--cameraZ: 108;
	--cameraY: 37;
	--auto-rotate-timing-func: linear;
	--auto-rotate-duration: 10s;
	--auto-rotate-direction: forwards;
	filter: drop-shadow(0 0 60px red);
}

[data-camera][data-autorotate] > [data-scene] {
	-webkit-animation: rotateCamera var(--auto-rotate-timing-func) var(--auto-rotate-duration)
		var(--auto-rotate-direction) infinite;
	animation: rotateCamera var(--auto-rotate-timing-func) var(--auto-rotate-duration) var(--auto-rotate-direction)
		infinite;
}

[data-scene] {
	background-color: transparent;
}

.star-cube {
	transform-style: preserve-3d;
}
.star-cube::before,
.star-cube::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
	background-color: var(--face-color);
	-webkit-clip-path: var(--polygon);
	clip-path: var(--polygon);
}
.star-cube::before {
	background-image: linear-gradient(var(--back-depth-color) 0 0);
}
.star-cube::after {
	transform: translateZ(var(--height));
}
.star-cube div {
	--rgb-background: hsla(calc(var(--i) * 20deg), 60%, 60%, 1);
	--angle: calc(((var(--theta) * 1 * var(--i)) - var(--start-angle)) * 1deg);
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: var(--point-color);
	border-radius: 50%;
	width: 5%;
	height: 5%;
	transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--outer-radius));
}
.star-cube div::before,
.star-cube div::after {
	--x: calc(var(--edge-angle) * 1deg);
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--height) - 2px);
	height: calc(var(--edge-length) * var(--px));
	background-color: var(--edge-color, var(--rgb-background));
	transform: translateZ(1px) rotateY(-90deg) rotateX(90deg) rotateX(var(--x))
		translateZ(calc(1px * var(--firefox-factor)));
	transform-origin: 0 0;
}
.star-cube div::after {
	--x: calc(var(--edge-angle) * -1deg);
	background-image: linear-gradient(var(--edge-depth-color) 0 0);
}
.star-cube::before,
.star-cube::after,
.star-cube div,
.star-cube div::before,
.star-cube div::after {
	transform-style: preserve-3d;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01);
}

.star-cube {
	--points: 18;
	--theta: 20;
	--start-angle: 0;
	--diameter: calc(500 * var(--px));
	--outer-radius: calc(var(--diameter) * 0.5);
	--inner-radius: 25%;
	--height: calc(80 * var(--px));
	--half-height: calc(var(--height) * 0.5);
	--edge-angle: 9.7064809029;
	--edge-length: 128.7420499943;
	width: var(--diameter);
	height: var(--diameter);
	--polygon: polygon(
		96.9846310393% 67.1010071663%,
		calc(50% + var(--inner-radius) * 0.8660254038) calc(50% + var(--inner-radius) * 0.5),
		88.3022221559% 82.1393804843%,
		calc(50% + var(--inner-radius) * 0.6427876097) calc(50% + var(--inner-radius) * 0.7660444431),
		75% 93.3012701892%,
		calc(50% + var(--inner-radius) * 0.3420201433) calc(50% + var(--inner-radius) * 0.9396926208),
		58.6824088833% 99.2403876506%,
		calc(50% + var(--inner-radius) * 0) calc(50% + var(--inner-radius) * 1),
		41.3175911167% 99.2403876506%,
		calc(50% + var(--inner-radius) * -0.3420201433) calc(50% + var(--inner-radius) * 0.9396926208),
		25% 93.3012701892%,
		calc(50% + var(--inner-radius) * -0.6427876097) calc(50% + var(--inner-radius) * 0.7660444431),
		11.6977778441% 82.1393804843%,
		calc(50% + var(--inner-radius) * -0.8660254038) calc(50% + var(--inner-radius) * 0.5),
		3.0153689607% 67.1010071663%,
		calc(50% + var(--inner-radius) * -0.984807753) calc(50% + var(--inner-radius) * 0.1736481777),
		0% 50%,
		calc(50% + var(--inner-radius) * -0.984807753) calc(50% + var(--inner-radius) * -0.1736481777),
		3.0153689607% 32.8989928337%,
		calc(50% + var(--inner-radius) * -0.8660254038) calc(50% + var(--inner-radius) * -0.5),
		11.6977778441% 17.8606195157%,
		calc(50% + var(--inner-radius) * -0.6427876097) calc(50% + var(--inner-radius) * -0.7660444431),
		25% 6.6987298108%,
		calc(50% + var(--inner-radius) * -0.3420201433) calc(50% + var(--inner-radius) * -0.9396926208),
		41.3175911167% 0.7596123494%,
		calc(50% + var(--inner-radius) * 0) calc(50% + var(--inner-radius) * -1),
		58.6824088833% 0.7596123494%,
		calc(50% + var(--inner-radius) * 0.3420201433) calc(50% + var(--inner-radius) * -0.9396926208),
		75% 6.6987298108%,
		calc(50% + var(--inner-radius) * 0.6427876097) calc(50% + var(--inner-radius) * -0.7660444431),
		88.3022221559% 17.8606195157%,
		calc(50% + var(--inner-radius) * 0.8660254038) calc(50% + var(--inner-radius) * -0.5),
		96.9846310393% 32.8989928337%,
		calc(50% + var(--inner-radius) * 0.984807753) calc(50% + var(--inner-radius) * -0.1736481777),
		100% 50%,
		calc(50% + var(--inner-radius) * 0.984807753) calc(50% + var(--inner-radius) * 0.1736481777)
	);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) translateZ(calc(var(--height) * -0.5));
}
.star-cube div:nth-child(n + 19) {
	display: none;
}