.cpvc-note {
	--cpvc-bg: #fffdf7;
	--cpvc-text: #222;
	--cpvc-accessory: #111;
	--cpvc-accessory-size: 120px;
	--cpvc-title-size: 42px;
	--cpvc-text-size: 22px;
	--cpvc-padding-top: 0;
	--cpvc-padding-right: 0;
	--cpvc-padding-bottom: 0;
	--cpvc-padding-left: 0;
	--cpvc-safe-inset: 0px;
	--cpvc-rotation: 0deg;
	--cpvc-accessory-y: -74px;
	--cpvc-accessory-mobile-y: -53px;
	--cpvc-accessory-x: 0px;
	--cpvc-accessory-tilt: -4deg;
	--cpvc-accessory-back-tilt: 4deg;
	--cpvc-min-height: 280px;
	--cpvc-paper-height: var(--cpvc-min-height);
	color: var(--cpvc-text);
	display: block;
	margin: 0 auto;
	padding-top: 0;
	perspective: 1800px;
	position: relative;
	width: 100% !important;
}

.cpvc-stage {
	height: var(--cpvc-paper-height);
	min-height: var(--cpvc-min-height);
	position: relative;
	transform: rotate(var(--cpvc-rotation));
	transform-style: preserve-3d;
	width: 100%;
}

.cpvc-card {
	height: 100%;
	inset: 0;
	position: absolute;
	transform-origin: 50% 50%;
	transform-style: preserve-3d;
	transition: transform 860ms cubic-bezier(.2, .76, .18, 1);
	width: 100%;
	will-change: transform;
}

.cpvc-has-flip.cpvc-flip-center.cpvc-is-flipped .cpvc-card {
	transform: rotateY(-180deg);
}

.cpvc-has-flip.cpvc-flip-center_reverse.cpvc-is-flipped .cpvc-card {
	transform: rotateY(180deg);
}

.cpvc-face {
	backface-visibility: hidden;
	height: 100%;
	inset: 0;
	position: absolute;
	transform-style: preserve-3d;
	width: 100%;
	-webkit-backface-visibility: hidden;
}

.cpvc-face-front {
	transform: rotateY(0deg);
	z-index: 2;
}

.cpvc-face-back {
	transform: rotateY(180deg);
	z-index: 1;
}

.cpvc-face-back .cpvc-accessory,
.cpvc-face-back::before {
	display: none !important;
}

.cpvc-face::before {
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, .28), transparent 68%);
	content: "";
	filter: blur(2px);
	height: 18px;
	left: clamp(22px, 8%, 76px);
	opacity: .44;
	pointer-events: none;
	position: absolute;
	top: 16px;
	width: calc(var(--cpvc-accessory-size) * 1.08);
	z-index: 3;
}

.cpvc-accessory-none .cpvc-face::before {
	display: none;
}

.cpvc-paper {
	background: transparent;
	box-shadow: none !important;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	isolation: isolate;
	overflow: visible;
	padding: 0;
	position: relative;
	width: 100%;
}

.cpvc-content-top .cpvc-paper {
	justify-content: flex-start;
}

.cpvc-content-center .cpvc-paper {
	justify-content: center;
}

.cpvc-content-bottom .cpvc-paper {
	justify-content: flex-end;
}

.cpvc-paper-content {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	padding:
		calc(var(--cpvc-padding-top) + var(--cpvc-safe-inset))
		calc(var(--cpvc-padding-right) + var(--cpvc-safe-inset))
		calc(var(--cpvc-padding-bottom) + var(--cpvc-safe-inset))
		calc(var(--cpvc-padding-left) + var(--cpvc-safe-inset));
	position: relative;
	width: 100%;
	z-index: 2;
}

.cpvc-back-text-left .cpvc-face-back .cpvc-paper-content {
	text-align: left;
}

.cpvc-back-text-center .cpvc-face-back .cpvc-paper-content {
	text-align: center;
}

.cpvc-back-text-right .cpvc-face-back .cpvc-paper-content {
	text-align: right;
}

.cpvc-paper::before,
.cpvc-paper::after {
	box-shadow: none !important;
	content: "";
	pointer-events: none;
	position: absolute;
}

.cpvc-paper::before {
	background:
		linear-gradient(0deg, rgba(43, 50, 76, .2) 0, rgba(43, 50, 76, .16) 13px, rgba(43, 50, 76, 0) 14px),
		linear-gradient(var(--cpvc-bg), var(--cpvc-bg)),
		linear-gradient(103deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, 0) 38%),
		linear-gradient(90deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, .065) 100%);
	background-blend-mode: multiply, normal, multiply, multiply;
	clip-path: polygon(0 2.1%, 100% .5%, 100% 94.8%, 96.6% 98.8%, 3.4% 96.9%, 0 92.6%);
	inset: 0;
	z-index: 0;
}

.cpvc-paper::after {
	background: transparent;
	bottom: 0;
	clip-path: polygon(0 2.1%, 100% .5%, 100% 94.8%, 96.6% 98.8%, 3.4% 96.9%, 0 92.6%);
	display: none;
	height: 0;
	left: 0;
	right: 0;
	z-index: 1;
}

.cpvc-shape-opposite .cpvc-paper::before,
.cpvc-shape-opposite .cpvc-paper::after {
	clip-path: polygon(0 .9%, 100% 2.2%, 100% 92.6%, 96.8% 96.9%, 3.2% 98.8%, 0 94.8%);
}

.cpvc-shape-straight .cpvc-paper::before,
.cpvc-shape-straight .cpvc-paper::after {
	clip-path: polygon(0 .8%, 100% .6%, 100% 96.2%, 97.8% 98.1%, 2.1% 97.8%, 0 95.8%);
}

.cpvc-face-back .cpvc-paper {
	background: transparent;
}

.cpvc-face-back .cpvc-paper::before {
	background:
		linear-gradient(color-mix(in srgb, var(--cpvc-bg), #d7c9ae 14%), color-mix(in srgb, var(--cpvc-bg), #d7c9ae 14%)),
		linear-gradient(103deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 38%),
		linear-gradient(90deg, rgba(0, 0, 0, .025), rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, .055) 100%);
	background-blend-mode: normal, multiply, multiply;
}

.cpvc-title,
.cpvc-text {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: break-word;
	position: relative;
	white-space: normal;
	width: 100%;
	word-break: normal;
}

.cpvc-title {
	color: inherit;
	font-size: clamp(22px, var(--cpvc-title-size), 96px);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.12;
	margin: 0 0 .58em;
	text-transform: none;
}

.cpvc-text {
	font-size: clamp(14px, var(--cpvc-text-size), 62px);
	font-weight: 400;
	line-height: 1.46;
}

.cpvc-text,
.cpvc-text * {
	max-width: 100%;
	overflow-wrap: anywhere;
	white-space: normal !important;
	word-break: normal;
}

.cpvc-text p,
.cpvc-text div {
	box-sizing: border-box;
	width: 100%;
}

.cpvc-title strong,
.cpvc-title b,
.cpvc-text strong,
.cpvc-text b {
	font-weight: 800;
}

.cpvc-text p {
	margin: 0 0 .85em;
}

.cpvc-text p:last-child {
	margin-bottom: 0;
}

.cpvc-text img {
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	width: 100% !important;
}

.cpvc-text .aligncenter,
.cpvc-text img.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.cpvc-title-font-body .cpvc-title,
.cpvc-text-font-body .cpvc-text {
	font-family: var(--fs-body-font, var(--body-font, inherit));
}

.cpvc-title-font-mono .cpvc-title,
.cpvc-text-font-mono .cpvc-text {
	font-family: "Courier Prime", "Courier New", Courier, monospace;
}

.cpvc-accessory {
	color: var(--cpvc-accessory);
	display: block;
	filter: drop-shadow(0 10px 7px rgba(0, 0, 0, .34));
	height: var(--cpvc-accessory-size);
	position: absolute;
	top: var(--cpvc-accessory-y);
	transform: rotate(var(--cpvc-accessory-tilt));
	transform-origin: 50% 68%;
	width: var(--cpvc-accessory-size);
	z-index: 6;
}

.cpvc-accessory svg,
.cpvc-accessory img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.cpvc-accessory-pos-left .cpvc-accessory,
.cpvc-accessory-pos-left .cpvc-face::before {
	left: calc(clamp(18px, 7%, 64px) + var(--cpvc-accessory-x));
}

.cpvc-accessory-pos-center .cpvc-accessory {
	left: 50%;
	transform: translateX(calc(-50% + var(--cpvc-accessory-x))) rotate(var(--cpvc-accessory-tilt));
}

.cpvc-accessory-pos-center .cpvc-face::before {
	left: 50%;
	transform: translateX(-50%);
}

.cpvc-accessory-pos-right .cpvc-accessory,
.cpvc-accessory-pos-right .cpvc-face::before {
	left: auto;
	right: calc(clamp(18px, 7%, 64px) - var(--cpvc-accessory-x));
}

.cpvc-accessory-pos-left .cpvc-face-back .cpvc-accessory,
.cpvc-accessory-pos-left .cpvc-face-back::before {
	left: auto;
	right: calc(clamp(18px, 7%, 64px) - var(--cpvc-accessory-x));
}

.cpvc-accessory-pos-right .cpvc-face-back .cpvc-accessory,
.cpvc-accessory-pos-right .cpvc-face-back::before {
	left: calc(clamp(18px, 7%, 64px) + var(--cpvc-accessory-x));
	right: auto;
}

.cpvc-binder,
.cpvc-accessory-image {
	width: calc(var(--cpvc-accessory-size) * 1.2);
}

.cpvc-binder-body,
.cpvc-binder-lip {
	fill: currentColor;
}

.cpvc-binder-shadow {
	fill: rgba(0, 0, 0, .32);
	transform: translate(3px, 4px);
}

.cpvc-binder-fold {
	fill: rgba(255, 255, 255, .12);
}

.cpvc-binder-lip {
	opacity: .92;
}

.cpvc-paperclip {
	top: calc(var(--cpvc-accessory-y) + 22px);
	transform: rotate(calc(var(--cpvc-accessory-tilt) - 9deg));
}

.cpvc-accessory-pos-center .cpvc-paperclip {
	transform: translateX(calc(-50% + var(--cpvc-accessory-x))) rotate(calc(var(--cpvc-accessory-tilt) - 9deg));
}

.cpvc-accessory-back {
	transform: scaleX(-1) rotate(var(--cpvc-accessory-back-tilt));
}

.cpvc-accessory-pos-center .cpvc-accessory-back {
	transform: translateX(calc(-50% + var(--cpvc-accessory-x))) scaleX(-1) rotate(var(--cpvc-accessory-back-tilt));
}

.cpvc-accessory-pos-center .cpvc-paperclip.cpvc-accessory-back {
	transform: translateX(calc(-50% + var(--cpvc-accessory-x))) scaleX(-1) rotate(calc(var(--cpvc-accessory-back-tilt) + 9deg));
}

.cpvc-paperclip.cpvc-accessory-back {
	transform: scaleX(-1) rotate(calc(var(--cpvc-accessory-back-tilt) + 9deg));
}

.cpvc-accessory-image.cpvc-accessory-back {
	filter: grayscale(.22) drop-shadow(0 7px 6px rgba(0, 0, 0, .18));
}

@supports not (color: color-mix(in srgb, #fff, #000)) {
	.cpvc-face-back .cpvc-paper::before {
		background-color: var(--cpvc-bg);
	}
}

@media (max-width: 640px) {
	.cpvc-note {
		margin: 0 auto;
	}

	.cpvc-stage {
		min-height: min(var(--cpvc-min-height), 230px);
	}

	.cpvc-paper {
		padding: 0;
	}

	.cpvc-title {
		font-size: clamp(22px, calc(var(--cpvc-title-size) * .72), 52px);
	}

	.cpvc-text {
		font-size: clamp(14px, calc(var(--cpvc-text-size) * .82), 30px);
	}

	.cpvc-accessory {
		height: max(58px, calc(var(--cpvc-accessory-size) * .72));
		top: var(--cpvc-accessory-mobile-y);
		width: max(58px, calc(var(--cpvc-accessory-size) * .72));
	}

	.cpvc-paperclip {
		top: calc(var(--cpvc-accessory-mobile-y) + 16px);
	}

	.cpvc-binder,
	.cpvc-accessory-image {
		width: max(68px, calc(var(--cpvc-accessory-size) * .86));
	}
}

@media (prefers-reduced-motion: reduce) {
	.cpvc-card {
		transition: none;
	}
}