@import url(https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap);

:root {
	--perspective: 62.5rem;
	--green-active: #87da21;
	--bright-green: #9eff00;
	--green-active-rgb: 135, 218, 33
}

@font-face {
	font-family: Geist;
	src: url(../fonts/Geist-Regular.woff2)
}

@font-face {
	font-family: Geist;
	src: url(../fonts/Geist-Bold.woff2);
	font-weight: 700
}

@font-face {
	font-family: Geist;
	src: url(../fonts/Geist-Medium.woff2);
	font-weight: 401 699
}

@font-face {
	font-family: Geist;
	src: url(../fonts/Geist-Light.woff2);
	font-weight: 0 399
}

.grid {
	display: flex;
	gap: 1.5em;
	flex-wrap: wrap;
	justify-content: center
}

calendar-month,
calendar-range {
	background: #0b1203;
	padding: 1rem;
	border-radius: .5rem;
	width: 100%
}

calendar-date svg,
calendar-range svg {
	height: 1rem;
	width: 1rem;
	fill: none;
	stroke: #fff;
	stroke-width: 2
}

calendar-date path,
calendar-range path {
	stroke-linecap: round;
	stroke-linejoin: round
}

calendar-date::part(button),
calendar-range::part(button) {
	background-color: #0b1203;
	border-radius: .25rem;
	border: none;
	width: 26px;
	height: 26px
}

calendar-date::part(button):focus-visible,
calendar-range::part(button):focus-visible {
	outline: none
}

calendar-month {
	--color-accent: rgba(135, 218, 33, .5);
	--color-text-on-accent: #fff
}

calendar-month::part(button) {
	border-radius: .325rem
}

calendar-month::part(range-inner) {
	border-radius: 0;
	background-color: rgba(135, 218, 33, .25)
}

calendar-month::part(range-start) {
	border-start-end-radius: 0;
	border-end-end-radius: 0
}

calendar-month::part(range-end) {
	border-start-start-radius: 0;
	border-end-start-radius: 0
}

calendar-month::part(range-start range-end) {
	border-radius: .25rem
}

.vc-chrome {
	width: 100% !important;
	background: none !important;
	border-radius: .5rem
}

.vc-chrome .vc-chrome-fields-wrap {
	display: none
}

.vc-chrome .vc-chrome-body {
	background: hsla(0, 0%, 100%, .01);
	border-bottom-left-radius: .5rem;
	border-bottom-right-radius: .5rem
}

.vc-chrome .vc-chrome-saturation-wrap {
	border-top-left-radius: .5rem;
	border-top-right-radius: .5rem
}

* {
	box-sizing: border-box
}

::-webkit-scrollbar {
	width: .25rem
}

::-webkit-scrollbar-track {
	background: #101010;
	border-radius: var(--XXS, .25rem)
}

::-webkit-scrollbar-thumb {
	border-radius: var(--XXS, .5rem);
	background: var(--green-active, #87da21)
}

h1,
h2,
h3,
h4,
h5,
p {
	margin: 0
}

.error {
	color: red
}

:root {
	font-size: min(.83333333vw, 1.48148148vh);
	font-family: Oswald, sans-serif
}

body,
html {
	margin: 0;
	padding: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

#app,
.app,
body,
html {
	width: 100%;
	height: 100%
}

#app,
.app {
	background: transparent
}

.bold {
	font-weight: 700
}

.app>.wrapper {
	position: fixed;
	pointer-events: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0
}

.app>.wrapper>* {
	pointer-events: auto
}


.interaction-item[data-v-1e5e066e] {
	position: absolute;
	width: 5rem;
	height: 5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: .75rem;
	border: 1.5px solid var(--White-White-15, hsla(0, 0%, 100%, .15));
	background: rgba(26, 31, 20, .75);
	translate: -50% -50%;
	cursor: pointer;
	top: 50%;
	left: 50%
}

.interaction-item img[data-v-1e5e066e],
.interaction-item svg[data-v-1e5e066e] {
	width: 2rem;
	height: 2rem;
	color: #fff
}

.interaction-item.active .out-text[data-v-1e5e066e],
.interaction-item.active[data-v-1e5e066e]:after,
.interaction-item.active[data-v-1e5e066e]:before,
.interaction-item:hover .out-text[data-v-1e5e066e],
.interaction-item[data-v-1e5e066e]:hover:after,
.interaction-item[data-v-1e5e066e]:hover:before {
	opacity: 1
}

.interaction-item .out-text[data-v-1e5e066e],
.interaction-item[data-v-1e5e066e]:after,
.interaction-item[data-v-1e5e066e]:before {
	opacity: 0;
	transition: opacity .2s ease
}

.interaction-item[data-v-1e5e066e]:before {
	content: "";
	width: 100%;
	height: 100%;
	pointer-events: none;
	position: absolute;
	top: -1px;
	left: -1px;
	background: radial-gradient(circle at var(--x) var(--y), rgba(135, 218, 33, .35) 0, transparent 50%)
}

.interaction-item[data-v-1e5e066e]:after {
	content: "";
	position: absolute;
	border-radius: inherit;
	width: 100%;
	padding: 2px;
	height: 100%;
	background: radial-gradient(circle at var(--x) var(--y), #87da21 0, transparent 80%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none
}

.interaction-item .out-text[data-v-1e5e066e] {
	position: absolute;
	color: #fff;
	font-size: 1.25rem;
	white-space: nowrap;
	text-transform: uppercase;
	--offsetX: 0%;
	--offsetY: 0%;
	left: 50%;
	top: 50%;
	translate: calc(var(--dx)*6rem/2 + var(--offsetX)) calc(var(--dy)*6rem/2 + var(--offsetY))
}

.interaction-item .out-text.top[data-v-1e5e066e] {
	--offsetY: -100%
}

.interaction-item .out-text.bottom[data-v-1e5e066e] {
	--offsetY: 0%
}

.interaction-item .out-text.y-center[data-v-1e5e066e] {
	--offsetY: -50%
}

.interaction-item .out-text.left[data-v-1e5e066e] {
	--offsetX: -100%
}

.interaction-item .out-text.right[data-v-1e5e066e] {
	--offsetX: 0%
}

.interaction-item .out-text.x-center[data-v-1e5e066e] {
	--offsetX: -50%
}

.back-button[data-v-68dda301] {
	width: 3.5rem;
	height: 3.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: .5rem;
	border: 1.5px solid var(--White-White-15, hsla(0, 0%, 100%, .15));
	background: rgba(26, 31, 20, .75);
	color: #fff;
	cursor: pointer
}

.back-button svg[data-v-68dda301] {
	stroke-width: 3
}

.wrapper[data-v-64ac35ea] {
	perspective: var(--perspective)
}

.inner-wrapper[data-v-64ac35ea] {
	width: 100%;
	height: 100%;
	perspective: var(--perspective);
	transform-origin: right center;
	transform: rotateY(-8deg)
}