/*fonts*/
@font-face {
	font-family: gothammedium;
	src: url("../fonts/gotham-medium.ttf") format('truetype');
}
@font-face {
	font-family: gothambold;
	src: url("../fonts/gothambold.otf") format('opentype');
}
@font-face {
	font-family: belerenb;
	src: url("../fonts/beleren-b.ttf") format('truetype');
}
@font-face {
	font-family: belerenbsc;
	src: url("../fonts/beleren-bsc.ttf") format('truetype');
}
@font-face {
	font-family: matrix;
	src: url("../fonts/matrix.ttf") format('truetype');
}
@font-face {
	font-family: matrixb;
	src: url("../fonts/matrix-b.ttf") format('truetype');
}
@font-face {
	font-family: matrixbsc;
	src: url("../fonts/Matrix Bold Small Caps.ttf") format('truetype');
}
@font-face {
	font-family: mplantin;
	src: url("../fonts/mplantin.ttf") format('truetype');
}
@font-face {
	font-family: mplantini;
	src: url("../fonts/mplantin-i.ttf") format('truetype');
}
@font-face {
	font-family: plantinsemibold;
	src: url("../fonts/plantin-semibold.otf") format('opentype');
}
@font-face {
	font-family: plantinsemibolditalic;
	src: url("../fonts/Plantin-SemiboldItalic.otf") format('opentype');
}
@font-face {
	font-family: goudymedieval;
	src: url("../fonts/goudy-medieval.ttf") format('truetype');
}
@font-face {
	font-family: phyrexianold;
	src: url("../fonts/phyrexian.ttf") format('truetype');
}
@font-face {
	font-family: phyrexian;
	src: url("../fonts/phy.woff2") format("woff2");
}
@font-face {
	font-family: Montserrat-SemiBold;
	src: url("../fonts/Montserrat-SemiBold.ttf") format('truetype');
}
@font-face {
	font-family: Montserrat-Medium;
	src: url("../fonts/Montserrat-Medium.ttf") format('truetype');
}
@font-face {
	font-family: Acme-Regular;
	src: url("../fonts/Acme-Regular.ttf") format('truetype');
}
@font-face {
	font-family: fritz-quadrata;
	src: url("../fonts/fritz-quadrata.ttf") format('truetype');
}
@font-face {
	font-family: japanese-title;
	src: url("../fonts/NudMotoyaExAporo_W6.ttf") format('truetype');
}
@font-face {
	font-family: japanese;
	src: url('../fonts/2012c863631ba71f874aba70590795a1.otf') format('opentype');
}
@font-face {
	font-family: invocation;
	src: url('../fonts/Invocation.ttf') format('truetype');
}
@font-face {
	font-family: invocation-text;
	src: url('../fonts/shango-gothic-bold.ttf') format('truetype');
}
@font-face {
	font-family: souvenir;
	src: url('../fonts/Souvenir-Itc-T-OT-Bold.otf') format('opentype');
}
@font-face {
	font-family: palatino;
	src: url('../fonts/Palatino Font.ttf') format('truetype');
}
@font-face {
	font-family: amanda;
	src: url('../fonts/Amanda Std Regular.otf') format('opentype');
}
@font-face {
	font-family: gillsans;
	src: url('../fonts/Gill Sans Medium.otf') format('opentype');
}
@font-face {
	font-family: gillsansbold;
	src: url('../fonts/Gill Sans Condensed Bold.otf') format('opentype');
}
@font-face {
	font-family: gillsansitalic;
	src: url('../fonts/Gill Sans Medium Italic') format('opentype');
}
@font-face {
	font-family: gillsansbolditalic;
	src: url('../fonts/Gill Sans Bold Italic.otf') format('opentype');
}
@font-face {
	font-family: specialelite;
	src: url('../fonts/SpecialElite-Regular.ttf') format('truetype');
}
@font-face {
	font-family: neosans;
	src: url('../fonts/NeoSansProRegular.OTF') format('opentype');
}
@font-face {
	font-family: neosansitalic;
	src: url('../fonts/NeoSansProItalic.OTF') format('opentype');
}
@font-face {
	font-family: ocra;
	src: url('../fonts/OCR A Std Regular.ttf') format('truetype');
}
@font-face {
	font-family: decour;
	src: url('../fonts/decour-cnd-regular.ttf') format('truetype');
}
@font-face {
	font-family: decouritalic;
	src: url('../fonts/decour-cnd-regular-italic.ttf') format('truetype');
}
@font-face {
	font-family: officina;
	src: url('../fonts/officina-ser-itc-black.otf') format('opentype');
}
@font-face {
	font-family: davisonamericana;
	src: url('../fonts/Davison Americana CG Regular.otf') format('opentype');
}
@font-face {
	font-family: saloongirl;
	src: url('../fonts/saloon-girl.ttf') format('truetype');
}
@font-face {
	font-family: arialblack;
	src: url('../fonts/arial_black.ttf') format('truetype');
}
/*Variables - Proxyfield Card Theme*/
:root {
	--site-background: #050508;
	--color-primary: #8B5CF6;
	--color-secondary: #D4A574;
	--color-selected: #A78BFA;
	--color-highlight: #C4B5FD;
	--font-color: #F5F5F5;
	--font-color-2: #D4A574;
	--input-background: #2D2D2D;
	--input-background-selected: #3D3D3D;
	--input-border: #4D4D4D;
	--card-shadow: 0 8px 32px rgba(139, 92, 246, 0.3);
	--darkened-backdrop-filter: brightness(0.4);
	--regular-backdrop-filter: none;
	--window-diagonal-size: 400px;
	--anthracite: #0d0d14;
	--anthracite-light: #1a1a2e;
	--purple: #8B5CF6;
	--purple-light: #A78BFA;
	--beige: #D4A574;
	--beige-light: #E8C9A0;
}
/* RGB animated gradient for buttons */
@keyframes rgbShift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
/*Main Site Elements*/
.background {
	position: fixed;
	z-index: -1;
	width: 100vw;
	height: 100vh;
	background: var(--site-background);
	background-attachment: fixed;
}
/* Particle canvas - behind all content */
#particleCanvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/*Navbar - Glassmorphism style matching proxyfield.it*/
.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.5rem;
	height: 72px;
	background: rgba(5, 5, 8, 0.75);
	backdrop-filter: blur(20px) saturate(1.5);
	-webkit-backdrop-filter: blur(20px) saturate(1.5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	position: sticky;
	top: 0;
	z-index: 50;
}
.navbar-brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}
.navbar-brand:hover {
	text-decoration: none;
}
.brand-text {
	font-family: belerenbsc;
	font-size: 1rem;
	background: linear-gradient(90deg, var(--purple), var(--beige));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
@media only screen and (min-width: 400px) {
	.brand-text {
		font-size: 1.2rem;
	}
}
@media only screen and (min-width: 768px) {
	.brand-text {
		font-size: 1.5rem;
	}
}
.navbar-menu {
	display: none;
	gap: 2rem;
	align-items: center;
}
.nav-link {
	padding: 0.5rem 0;
	color: #8888aa;
	text-decoration: none;
	font-family: Montserrat-Medium, sans-serif;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	transition: all 0.3s;
	position: relative;
}
.nav-link:hover {
	color: #f0f0f5;
	text-decoration: none;
}
.nav-link::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(135deg, #ff2d7b, #00f0ff);
	transition: width 0.3s;
}
.nav-link:hover::after {
	width: 100%;
	background: linear-gradient(135deg, #ffe600, #a855f7);
}
.nav-link.active {
	color: #00f0ff;
}
.nav-link.active::after {
	width: 100%;
	background: linear-gradient(135deg, #ff2d7b, #00f0ff);
}
/* Desktop: show horizontal menu, hide hamburger */
@media only screen and (min-width: 768px) {
	.navbar-menu {
		display: flex;
	}
	.navbar .hamburger {
		display: none;
	}
}
/* Hamburger in navbar */
.navbar .hamburger {
	position: relative;
	right: auto;
	top: auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 6px;
}

/*Mobile Menu Overlay*/
.mobile-menu {
	position: fixed;
	z-index: 40;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(5, 5, 8, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}
.mobile-menu.menu-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-20px);
}
.mobile-menu-content {
	display: flex;
	flex-direction: column;
	gap: 0;
	text-align: center;
}
.mobile-menu-content a {
	font-size: 1.2rem;
	padding: 1rem 2rem;
	color: #8888aa;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	transition: all 0.3s ease;
	font-family: Montserrat-Medium, sans-serif;
}
.mobile-menu-content a:hover {
	color: #f0f0f5;
	background: rgba(255, 255, 255, 0.03);
	text-decoration: none;
}

/*Theme Toggle Button - Glass box style*/
.theme-toggle {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.03);
	cursor: pointer;
	transition: all 0.3s;
	color: #8888aa;
	padding: 0;
}
.theme-toggle:hover {
	border-color: #ffe600;
	color: #ffe600;
	box-shadow: 0 0 20px rgba(255, 230, 0, 0.1);
	background: rgba(255, 255, 255, 0.03);
}
.theme-toggle svg {
	width: 18px;
	height: 18px;
}
/* Default: show sun (for dark mode), hide moon */
.theme-toggle .sun-icon {
	display: block;
}
.theme-toggle .moon-icon {
	display: none;
}
/* Light mode: show moon, hide sun */
body.light-mode .theme-toggle .sun-icon {
	display: none;
}
body.light-mode .theme-toggle .moon-icon {
	display: block;
}
/* Mobile theme toggle */
.mobile-theme-toggle {
	width: auto;
	height: auto;
	flex-direction: row;
	gap: 0.75rem;
	font-size: 1.2rem;
	padding: 1rem 2rem;
	font-family: Montserrat-Medium, sans-serif;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 0;
	color: #8888aa;
	background: transparent;
}
.mobile-theme-toggle:hover {
	color: #f0f0f5;
	background: rgba(255, 255, 255, 0.03);
	box-shadow: none;
	border-color: rgba(255, 255, 255, 0.06);
}
.mobile-theme-toggle span {
	font-size: 1.2rem;
}

/*Light Mode Variables*/
body.light-mode {
	--site-background: #F5F5F5;
	--font-color: #1a1a1a;
	--font-color-2: #6D28D9;
	--input-background: #FFFFFF;
	--input-background-selected: #F0F0F0;
	--input-border: #C0C0C0;
	--anthracite: #FFFFFF;
	--anthracite-light: #F5F5F5;
	--beige: #8B6914;
	--beige-light: #A67C00;
	--card-shadow: 0 8px 32px rgba(139, 92, 246, 0.2);
}
body.light-mode .background {
	background: #F5F5F5;
}
body.light-mode #particleCanvas {
	opacity: 0;
}
body.light-mode .navbar {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(20px) saturate(1.5);
	-webkit-backdrop-filter: blur(20px) saturate(1.5);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
body.light-mode .readable-background {
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid #E0E0E0;
}
body.light-mode h1, body.light-mode h2, body.light-mode h3,
body.light-mode h4, body.light-mode h5, body.light-mode p {
	color: #1a1a1a;
}
body.light-mode .input-description {
	color: #6D28D9;
}
body.light-mode .input {
	background-color: #FFFFFF;
	color: #1a1a1a;
	border-color: #C0C0C0;
}
body.light-mode .input:hover {
	border-color: var(--purple);
}
body.light-mode .input:focus {
	border-color: var(--purple);
	box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
}
body.light-mode select.input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #FFFFFF;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236D28D9' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat !important;
	background-position: right 0.75rem center;
	background-size: 12px;
	padding-right: 2.5rem;
}
body.light-mode select.input option {
	background: #FFFFFF !important;
	color: #1a1a1a;
}
body.light-mode select.input option:checked {
	background: var(--purple) !important;
	color: #ffffff;
}
body.light-mode .collapsible {
	background: rgba(139, 92, 246, 0.08);
	border-color: rgba(139, 92, 246, 0.2);
}
body.light-mode .collapsible:after {
	border-color: var(--purple);
}
body.light-mode .collapsible + div {
	background: rgba(139, 92, 246, 0.05);
	border-color: rgba(139, 92, 246, 0.15);
}
body.light-mode .creator-menu {
	background: #FFFFFF;
	border-color: #E0E0E0;
}
body.light-mode .frame-picker, body.light-mode .mask-picker {
	background: #F8F8F8;
	border-color: #D0D0D0;
}
body.light-mode .frame-option, body.light-mode .mask-option {
	background: #FFFFFF;
	border-color: #D0D0D0;
}
body.light-mode .frame-element {
	background: #FFFFFF;
	border-color: #E0E0E0;
}
body.light-mode .drop-area {
	border-color: #A0A0A0;
	background: rgba(139, 92, 246, 0.03);
}
body.light-mode .nav-link {
	color: #666;
}
body.light-mode .nav-link:hover {
	color: #1a1a1a;
}
body.light-mode .nav-link.active {
	color: var(--purple);
}
body.light-mode .theme-toggle {
	border-color: rgba(0, 0, 0, 0.1);
	background: rgba(0, 0, 0, 0.03);
	color: #666;
}
body.light-mode .theme-toggle:hover {
	border-color: var(--purple);
	color: var(--purple);
	box-shadow: 0 0 12px rgba(139, 92, 246, 0.15);
}
body.light-mode .mobile-menu {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
}
body.light-mode .mobile-menu-content a {
	color: #666;
	border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .mobile-menu-content a:hover {
	color: #1a1a1a;
	background: rgba(0, 0, 0, 0.03);
}
body.light-mode .picker-label {
	color: #6D28D9;
}
body.light-mode .checkmark {
	background-color: #E0E0E0;
}
body.light-mode .galleryGridItem {
	background: #FFFFFF;
	border-color: #E0E0E0;
}
body.light-mode .galleryGridItem > h4 {
	color: #1a1a1a;
}
body.light-mode .galleryGridItem > p {
	color: #6D28D9;
}
body.light-mode .frame-element-editor,
body.light-mode .textbox-editor {
	background: #FFFFFF;
	border-color: var(--purple);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(139, 92, 246, 0.2);
}
body.light-mode .frame-element-editor > .frame-element-editor-close,
body.light-mode .textbox-editor > .textbox-editor-close {
	background: rgba(0, 0, 0, 0.05);
	border-color: #D0D0D0;
	color: #1a1a1a;
}
body.light-mode .frame-element-editor > .frame-element-editor-close:hover,
body.light-mode .textbox-editor > .textbox-editor-close:hover {
	background: rgba(139, 92, 246, 0.15);
	border-color: var(--purple);
	color: var(--purple);
}
body.light-mode .modal-backdrop {
	background: rgba(255, 255, 255, 0.6);
}

/*Loading Screen*/
.loading-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 50vh;
	gap: 1rem;
}
.loading-spinner {
	width: 48px;
	height: 48px;
	border: 4px solid var(--anthracite-light);
	border-top-color: var(--purple);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}
.loading-screen p {
	color: var(--beige);
	font-family: Montserrat-Medium, sans-serif;
}
html {
	font-size: 12pt;
	overflow-x: hidden;
	background: var(--anthracite);
	color: var(--font-color);
}
body {
    width: 100vw;
    overflow-x: hidden;
}
header, footer, .main-content {
	overflow-x: hidden;
}
header, footer {
	background: var(--anthracite);
	border-bottom: 2px solid var(--purple);
}
header {
	padding: 1.5rem 0;
	text-align: center;
}
header .title {
	background: linear-gradient(90deg, var(--purple), var(--beige));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.header-extension {
	padding-bottom: 2rem;
}
footer {
	padding: 2rem;
	display: grid;
	grid-template-columns: calc(1fr - 4rem);
	grid-gap: 1rem;
}
@media only screen and (min-width: 750px) {
	footer {
		grid-template-columns: repeat(3, 1fr);
	}
}
footer > div > * {
	margin: 1rem 0;
}
/*Viewport*/
img {
	max-width: 100%;
}
/*Scrollbar Mod*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: var(--anthracite);
}
::-webkit-scrollbar-thumb {
  background: var(--purple);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--purple-light);
}
/*Fonts*/
.title {
	font-family: belerenbsc;
}
h1.title {
	font-size: 4rem;
}
.shadow {
	text-shadow: 0.2rem 0.2rem 0.5rem black;
}
h1 {
	font-size: 1.75rem;
	font-family: Montserrat-SemiBold, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
	overflow-wrap: break-word;
}
h2 {
	font-size: 1.5rem;
	font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
	overflow-wrap: break-word;
}
h3 {
	font-size: 1.25rem;
	font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
	overflow-wrap: break-word;
}
h4 {
	font-size: 1rem;
	font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
	overflow-wrap: break-word;
}
h5 {
	font-size: 0.9rem;
	font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
	overflow-wrap: break-word;
}
p {
	font-size: 0.85rem;
	font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
	overflow-wrap: break-word;
}
/* Responsive typography */
@media only screen and (min-width: 500px) {
	h1 { font-size: 2rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }
	h4 { font-size: 1.15rem; }
	h5 { font-size: 1rem; }
	p { font-size: 0.9rem; }
}
@media only screen and (min-width: 900px) {
	h1 { font-size: 3rem; }
	h2 { font-size: 2.5rem; }
	h3 { font-size: 2rem; }
	h4 { font-size: 1.5rem; }
	h5 { font-size: 1.25rem; }
	p { font-size: 1rem; }
}
a {
	color: inherit;
	text-decoration: inherit;
	overflow-wrap: break-word;
}
a:hover {
	text-decoration: underline;
}
a.underline {
	text-decoration: underline;
}
::selection {
	color: var(--font-color);
	background: var(--color-highlight);
}
::moz-selection {
	color: var(--font-color);
	background: var(--color-highlight);;
}
/*General styles*/
.hidden {
	display: none;
}
.fake-hidden {
	opacity: 0;
	position: absolute;
	top: -100%;
	left: -100%;
}
.margin-bottom {
	margin-bottom: 0.5rem;
}
.margin-bottom-large {
	margin-bottom: 2rem;
}
.margin-bottom-larger {
	margin-bottom: 3rem;
}
.margin-top {
	margin-top: 0.5rem;
}
.padding {
	padding: 0.5rem;
}
.readable-background {
	background: rgba(26, 26, 26, 0.95);
	border-radius: 8px;
}
.box-shadow {
	box-shadow: 0 2px 8px #0008;
}
.split-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 0.75rem;
}
@media only screen and (min-width: 600px) {
	.split-grid {
		grid-template-columns: 1fr 1fr;
	}
}
.center {
	text-align: center;
}
.layer {
	padding: 0.5rem;
}
.vertical-center {
	margin: auto;
}
@media only screen and (min-width: 750px) {
	.layer {
		padding: 4rem;
	}
}
/*Hamburger*/
.hamburger {
	position: fixed;
	right: 0rem;
	top: 0rem;
	width: 4rem;
	height: 4rem;
	fill-rule: evenodd;
	clip-rule: evenodd;
	stroke-linejoin: round;
	stroke-miterlimit: 1.5;
	cursor: pointer;
	z-index: 100;
	background: var(--color-primary);
	border-radius: 0 0 0 0.5rem;
}
.hamburger > path {
	fill: none;
	stroke: white;
	stroke-width: 8px;
	transition: 0.5s;
}
.line1, .line3 {
	stroke-dasharray: 80 183;
	stroke-dashoffset: 0;
}
.line2 {
	stroke-dasharray: 80 80;
	stroke-dashoffset: 0;
}
.opened > .line1, .opened > .line3 {
	stroke-dasharray: 103 183;
	stroke-dashoffset: -80;
}
.opened > .line2 {
	stroke-dasharray: 0 60;
	stroke-dashoffset: -40;
}
.circle {
	z-index: 5;
	position: fixed;
	right: 0;
	top: 0;
	padding: 0;
	background: var(--color-primary);
	border-radius: 100%;
	transition: 0.333s ease;
}
.hamburger:hover + .circle {
	/*padding: 3rem;
	right: -1rem;
	top: -1rem;*/
}
.hamburger.opened + .circle {
	padding: var(--window-diagonal-size);
	right: calc(0px - var(--window-diagonal-size));
	top: calc(0px - var(--window-diagonal-size));
	transition: 0.75s cubic-bezier(.53,.47,.76,-0.52);
}
/*Menus*/
.menu {
	position: fixed;
	z-index: 10;
	bottom: 200vh;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow-y: scroll;
	transition: 0.5s;
	text-align: center;
}
.menu.menu-visible {
	bottom: 0;
	transition-delay: 0.667s;
}
.menu > div {
	display: inline-block;
	margin: 0 auto;
	text-align: left;
}
/*Main (Nav) Menu*/
.main-menu {
	position: relative;
	z-index: 1;
	padding: 2rem;
	line-height: 3rem;
}
.main-menu > h2 {
	margin-top: 4rem;
}
/*notifications*/
.notification-container {
	position: fixed;
	z-index: 10;
	bottom: 0;
	left: 1.5rem;
	width: calc(100vw - 3rem);
	max-height: 75vh;
	overflow-y: scroll;
	transition: 0.5s;
}
.notification {
	border-top: 0.25rem solid var(--color-selected);
	background: var(--input-background);
	display: grid;
	grid-template-columns: auto 2rem;
	transition: 0.5s;
}
.notification > h3 {
	text-align: center;
	user-select: none;
	cursor: pointer;
}
.notification.hidden {
	opacity: 0;
}
/*Inputs*/
.input {
	box-sizing: border-box;
	width: 100%;
	background-color: var(--anthracite);
	color: var(--font-color);
	font-size: 0.85rem;
	font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
	font-weight: 100;
	border: 2px solid var(--input-border);
	border-radius: 6px;
	padding: 0.5rem;
	transition: all 0.2s ease;
}
@media only screen and (min-width: 500px) {
	.input {
		font-size: 0.9rem;
		padding: 0.6rem;
		border-radius: 7px;
	}
}
@media only screen and (min-width: 900px) {
	.input {
		font-size: 1rem;
		padding: 0.75rem;
		border-radius: 8px;
	}
}
.input:hover {
	border-color: var(--beige);
}
.input:focus {
	outline: none;
	border-color: var(--purple);
	box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
}
.input:active {
	border-color: var(--purple-light);
}
.input:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.input:disabled:hover {
	border-color: var(--input-border);
}
.input-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
}
@media only screen and (min-width: 480px) {
	.input-grid {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		gap: 0.75rem;
	}
}
@media only screen and (min-width: 900px) {
	.input-grid {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}
}
.input-description {
	color: var(--beige);
	font-style: italic;
	font-size: 0.75rem;
	line-height: 1.4;
}
@media only screen and (min-width: 500px) {
	.input-description {
		font-size: 0.8rem;
	}
}
@media only screen and (min-width: 900px) {
	.input-description {
		font-size: 0.9rem;
	}
}
/* Align description text with checkbox text when they're in the same container */
div:has(> .checkbox-container) > .input-description {
	padding-left: 2rem;
}
input[type=checkbox].input {
	/*nothing for now*/
}
/*File Input Styling*/
input[type=file].input {
	cursor: pointer;
	padding: 0.5rem;
	background: var(--anthracite);
	border: 2px solid var(--input-border);
	border-radius: 8px;
	color: var(--font-color);
	font-size: 0.9rem;
}
input[type=file].input::-webkit-file-upload-button {
	background: linear-gradient(135deg, #ff2d7b, #00f0ff, #a855f7, #ffe600, #ff2d7b);
	background-size: 300% 300%;
	animation: rgbShift 4s ease infinite;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 0.5rem 1rem;
	margin-right: 0.75rem;
	cursor: pointer;
	font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	transition: all 0.2s ease;
}
input[type=file].input::-webkit-file-upload-button:hover {
	box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}
input[type=file].input::file-selector-button {
	background: linear-gradient(135deg, #ff2d7b, #00f0ff, #a855f7, #ffe600, #ff2d7b);
	background-size: 300% 300%;
	animation: rgbShift 4s ease infinite;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 0.5rem 1rem;
	margin-right: 0.75rem;
	cursor: pointer;
	font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	transition: all 0.2s ease;
}
input[type=file].input::file-selector-button:hover {
	box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}
input[type=file].input:hover {
	border-color: var(--beige);
}
input[type=file].input:focus {
	outline: none;
	border-color: var(--purple);
	box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
}
.input:not([type=text]):not([type=number]):not([type=url]):not([type=file]) {
	cursor: pointer;
}
textarea.input {
	cursor: text !important;
	resize: vertical;
	box-sizing: border-box;
	min-height: 10rem;
	max-height: 20rem;
	transition: height 0s;
}
/*Select/Dropdown Styling*/
select.input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23D4A574' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 12px;
	padding-right: 2.5rem;
	cursor: pointer;
}
select.input option {
	background-color: var(--anthracite);
	background-image: none;
	color: var(--font-color);
	padding: 0.75rem;
	border: none;
}
select.input option:checked {
	background-color: var(--purple);
	background-image: none;
	color: #ffffff;
}
select.input optgroup {
	background-color: var(--anthracite-light);
	background-image: none;
	color: var(--beige);
	font-weight: bold;
	font-style: normal;
}
/*Checkboxes*/
.checkbox-container {
	display: flex;
	align-items: center;
	position: relative;
	padding-left: 2rem;
	min-height: 1.5rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.checkbox-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.checkmark {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0.25rem;
	height: 1.25rem;
	width: 1.25rem;
	border-radius: 0.25rem;
	background-color: #efefef;
}
.checkbox-container input:checked ~ .checkmark {
	background-color: var(--color-selected);
}
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
.checkbox-container input:checked ~ .checkmark:after {
	display: block;
}
.checkbox-container .checkmark:after {
	left: 0.4rem;
	top: 0.15rem;
	width: 0.2rem;
	height: 0.6rem;
	border: solid var(--color-primary);
	border-width: 0 0.2rem 0.2rem 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
/*Collapsible*/
.collapsible {
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(139, 92, 246, 0.1);
	border: 1px solid rgba(139, 92, 246, 0.3);
	border-radius: 6px;
	padding: 0.5rem 0.75rem !important;
	transition: all 0.2s ease;
}
.collapsible:hover {
	background: rgba(139, 92, 246, 0.2);
	border-color: var(--purple);
}
.collapsible:after {
	content: '';
	border: solid var(--beige);
	border-width: 0 0.15em 0.15em 0;
	display: inline-block;
	padding: 0.2em;
	margin-left: 0.5rem;
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.collapsible.collapsed:after {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
.collapsed + div {
	display: none;
}
.collapsible + div {
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(139, 92, 246, 0.2);
	border-top: none;
	border-radius: 0 0 6px 6px;
	margin-top: -1px;
	padding: 0.5rem;
}
/*Videos*/
.video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video iframe, .video object, .video embed, .video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*drop to upload*/
.drop-area {
	border: 0.125rem dashed gray;
	border-radius: 8px;
	padding: 0.5rem;
	transition: 0.25s;
	background: rgba(255, 255, 255, 0.02);
}
.drop-area.hover {
	border-color: var(--color-selected);
	background: rgba(139, 92, 246, 0.1);
}


/*Animated cards*/
.animated-scene {
	perspective: 100rem;
}
.animated-card-1 {
	animation: animatedcardone 3s ease-in-out 0s alternate infinite;
	-moz-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
	-webkit-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
	-o-animation: animatedcardone 3s ease-in-out 0s alternate infinite;
	transform-style: preserve-3d;
}
.animation-delay-2 {
	animation-delay: 1s !important;
}
.animation-delay-4 {
	animation-delay: 2s !important;
}
@keyframes animatedcardone {
	0%   {transform: rotateY(15deg);}
	100%   {transform: rotateY(-15deg);}
}




/*Home Page only*/
.sample-grid {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: 1fr;
}
.sample-grid > img {
	display: block;
	max-width: 375px;
	width: 100%;
	height: auto;
	margin: 1rem auto;
}
@media only screen and (min-width: 750px) {
	.sample-grid {
		grid-template-columns: 375px auto;
	}
	.sample-grid.right {
		grid-template-columns: auto 375px;
	}
}




/*Tutorial Page only*/
.tutorial-grid {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: 1fr;
}
.tutorial-grid > img {
	display: block;
	width: 100%;
	height: auto;
	margin: 1rem auto;
}
.readable-background > .tutorial-grid > img {
	border: 0.1rem solid gray;
}
@media only screen and (min-width: 750px) {
	.tutorial-grid {
		grid-template-columns: 1fr 1fr;
	}
}



/*Creator related only*/
/*Creator Grid/Canvas/Menu - Card LEFT, Controls RIGHT*/
.creator-grid {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem;
	box-sizing: border-box;
}
.creator-canvas {
	max-width: 280px;
	width: 100%;
	height: auto;
	flex-shrink: 0;
	border-radius: 0;
	box-shadow: var(--card-shadow);
	border: 3px solid #ff2d7b;
	animation: borderColorShift 4s ease infinite;
}
@keyframes borderColorShift {
	0%   { border-color: #ff2d7b; box-shadow: 0 0 14px rgba(255, 45, 123, 0.45); }
	33%  { border-color: #a855f7; box-shadow: 0 0 14px rgba(168, 85, 247, 0.45); }
	66%  { border-color: #ffe600; box-shadow: 0 0 14px rgba(255, 230, 0, 0.35); }
	100% { border-color: #ff2d7b; box-shadow: 0 0 14px rgba(255, 45, 123, 0.45); }
}
.creator-canvas.rounded-corners {
	border-radius: 3.5%;
}
.creator-menu {
	width: 100%;
	background: var(--anthracite-light);
	border-radius: 12px;
	border: 1px solid var(--input-border);
	overflow: hidden;
}
/* Small mobile - better card size */
@media only screen and (min-width: 400px) {
	.creator-canvas {
		max-width: 320px;
	}
	.creator-grid {
		padding: 0.5rem 0.75rem;
	}
}
/* Medium mobile */
@media only screen and (min-width: 500px) {
	.creator-canvas {
		max-width: 360px;
	}
	.creator-grid {
		gap: 1rem;
		padding: 0.5rem 1rem;
	}
}
/* Large mobile / small tablet */
@media only screen and (min-width: 650px) {
	.creator-canvas {
		max-width: 400px;
	}
}
/* Tablet - side by side with independent scroll */
@media only screen and (min-width: 900px) {
	body.creator-page {
		overflow: hidden;
		height: 100vh;
	}
	.creator-grid {
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		padding: 0.75rem 1.5rem;
		gap: 2rem;
		height: calc(100vh - 72px); /* Full height minus navbar */
		overflow: hidden;
	}
	.creator-canvas {
		max-width: min(420px, calc((100vh - 110px) * 5 / 7));
		align-self: center;
		flex-shrink: 0;
	}
	.creator-menu {
		flex: 1;
		max-width: 700px;
		max-height: 100%;
		overflow-y: auto;
		padding-right: 0.5rem;
	}
}
/* Intermediate - better use of space */
@media only screen and (min-width: 1100px) {
	.creator-canvas {
		max-width: min(480px, calc((100vh - 110px) * 5 / 7));
	}
	.creator-menu {
		max-width: 780px;
	}
}
/* Desktop - larger card */
@media only screen and (min-width: 1400px) {
	.creator-grid {
		padding: 1rem 2rem;
		gap: 3rem;
	}
	.creator-canvas {
		max-width: min(520px, calc((100vh - 110px) * 5 / 7));
	}
	.creator-menu {
		max-width: 900px;
	}
}
/* Large Desktop - maximum use of space */
@media only screen and (min-width: 1800px) {
	.creator-grid {
		gap: 4rem;
	}
	.creator-canvas {
		max-width: min(580px, calc((100vh - 110px) * 5 / 7));
	}
	.creator-menu {
		max-width: 1000px;
	}
}
/* Custom scrollbar for creator menu */
.creator-menu::-webkit-scrollbar {
	width: 8px;
}
.creator-menu::-webkit-scrollbar-track {
	background: var(--anthracite);
	border-radius: 4px;
}
.creator-menu::-webkit-scrollbar-thumb {
	background: var(--purple);
	border-radius: 4px;
}
.creator-menu::-webkit-scrollbar-thumb:hover {
	background: var(--color-selected);
}
/*Creator Menu Tabs - Modern Pill/Segmented Style*/
.creator-menu-tabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.25rem;
	padding: 0.5rem;
	background: var(--anthracite);
	border-bottom: 1px solid rgba(139, 92, 246, 0.3);
}
.creator-menu-tabs .selectable {
	padding: 0.4rem 0.25rem;
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid transparent;
	color: var(--beige);
	transition: all 0.2s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.creator-menu-tabs .selectable:hover {
	background: rgba(139, 92, 246, 0.15);
	border-color: rgba(139, 92, 246, 0.3);
}
.creator-menu-tabs .selectable.selected,
.creator-menu-tabs h3.selectable.selected {
	background: linear-gradient(135deg, #ff2d7b, #a855f7) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}
/* Small mobile - 4 columns grid */
@media only screen and (min-width: 400px) {
	.creator-menu-tabs {
		gap: 0.35rem;
		padding: 0.5rem;
	}
	.creator-menu-tabs .selectable {
		padding: 0.5rem 0.35rem;
		font-size: 0.7rem;
		border-radius: 12px;
	}
}
/* Medium mobile - larger tabs */
@media only screen and (min-width: 500px) {
	.creator-menu-tabs {
		gap: 0.4rem;
		padding: 0.6rem;
	}
	.creator-menu-tabs .selectable {
		padding: 0.55rem 0.5rem;
		font-size: 0.75rem;
		border-radius: 14px;
	}
}
/* Large mobile - flex layout */
@media only screen and (min-width: 650px) {
	.creator-menu-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		padding: 0.75rem;
	}
	.creator-menu-tabs .selectable {
		flex: 1;
		min-width: 80px;
		padding: 0.6rem 0.5rem;
		font-size: 0.8rem;
		border-radius: 16px;
	}
}
/* Tab responsiveness for larger screens */
@media only screen and (min-width: 900px) {
	.creator-menu-tabs {
		padding: 1rem;
		gap: 0.6rem;
	}
	.creator-menu-tabs .selectable {
		padding: 0.7rem 1rem;
		font-size: 0.85rem;
		min-width: 100px;
		border-radius: 20px;
	}
}
@media only screen and (min-width: 1400px) {
	.creator-menu-tabs {
		padding: 1rem 1.25rem;
		gap: 0.75rem;
	}
	.creator-menu-tabs .selectable {
		padding: 0.75rem 1.25rem;
		font-size: 0.9rem;
		min-width: 110px;
		border-radius: 24px;
	}
}
/*Selectables*/
.selectable {
	text-align: center;
	user-select: none;
	padding: 0.75rem;
	border: 2px solid transparent;
	border-radius: 8px;
	transition: all 0.2s ease;
	cursor: pointer;
	background: var(--input-background);
}
.selectable.selected {
	border-color: var(--purple);
	background: var(--input-background-selected);
	box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
}
.selectable:hover {
	border-color: var(--beige);
	transform: translateY(-2px);
}
/*Draggables*/
.draggable {
	background: var(--input-background);
	touch-action: none;
}
.dragging {
	box-shadow: 0 0 16px rgba(139, 92, 246, 0.6);
	background: var(--input-background-selected);
	cursor: move;
	border-color: var(--purple) !important;
	opacity: 0.9;
	transform: scale(1.02);
}
.frame-list {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 0.25rem;
	user-select: none;
	counter-reset: frame-counter;
}
.frame-list .frame-element {
	counter-increment: frame-counter;
	position: relative;
}
.frame-list .frame-element::before {
	content: counter(frame-counter);
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	background: var(--purple);
	color: white;
	font-size: 0.65rem;
	font-weight: bold;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
/* Frame Search */
.autocomplete {
	position: relative;
}
.autocomplete-items {
  	position: absolute;
  	border: 1px solid black;
  	border-bottom: none;
  	top: 100%;
  	left: 0;
  	right: 0;
  	z-index: 99;
  	max-height: 8rem;
  	height: auto;
  	overflow-y: scroll;
}
.autocomplete-items div {
  	border-bottom: 1px solid black !important;
  	z-index: 99;
}
.autocomplete-items div:hover {
	background-color: var(--input-background-selected);
}
.autocomplete-active {
  	background-color: var(--color-highlight) !important;
  	color: black;
}
/*Frame/Mask-Pickers*/
.picker-container {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.picker-label {
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--beige);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding-left: 0.25rem;
}
@media only screen and (min-width: 500px) {
	.picker-label {
		font-size: 0.75rem;
	}
}
@media only screen and (min-width: 900px) {
	.picker-label {
		font-size: 0.8rem;
	}
}
.frame-picker, .mask-picker {
	display: grid;
	grid-gap: 0.5rem;
	height: 10rem;
	overflow-y: auto;
	overflow-x: hidden;
	grid-auto-rows: 4.5rem;
	border-radius: 8px;
	padding: 0.5rem;
	background: #0d0d0d;
	border: 1px solid var(--input-border);
}
.frame-picker {
	grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
	justify-items: center;
	align-items: center;
}
.mask-picker {
	grid-template-columns: 1fr;
	height: 8rem;
	background: #121212;
	grid-auto-rows: 3.5rem;
}
@media only screen and (min-width: 400px) {
	.frame-picker, .mask-picker {
		height: 12rem;
		grid-auto-rows: 5rem;
		grid-gap: 0.5rem;
		padding: 0.6rem;
	}
	.frame-picker {
		grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
	}
	.mask-picker {
		height: 9rem;
		grid-auto-rows: 3.5rem;
	}
}
@media only screen and (min-width: 600px) {
	.frame-picker, .mask-picker {
		height: 16rem;
		grid-auto-rows: 6rem;
		grid-gap: 0.6rem;
		padding: 0.75rem;
		border-radius: 10px;
	}
	.frame-picker {
		grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
	}
	.mask-picker {
		height: 14rem;
		grid-auto-rows: 4rem;
	}
}
@media only screen and (min-width: 900px) {
	.frame-picker, .mask-picker {
		height: 18rem;
		grid-auto-rows: 6.5rem;
		grid-gap: 0.75rem;
		padding: 1rem;
	}
	.frame-picker {
		grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
	}
	.mask-picker {
		height: 16rem;
		grid-auto-rows: 4.5rem;
	}
}
.frame-option, .mask-option {
	cursor: pointer;
	background: var(--anthracite-light);
	width: 100%;
	height: 4rem;
	padding: 0.25rem;
	text-align: center;
	border: 2px solid var(--input-border);
	border-radius: 6px;
	-webkit-user-select: none;
  	-khtml-user-select: none;
  	-moz-user-select: none;
  	-o-user-select: none;
  	user-select: none;
  	transition: all 0.2s ease;
  	box-sizing: border-box;
}
@media only screen and (min-width: 400px) {
	.frame-option, .mask-option {
		height: 4.5rem;
		padding: 0.3rem;
	}
}
@media only screen and (min-width: 600px) {
	.frame-option, .mask-option {
		height: 5.5rem;
		border-radius: 8px;
	}
}
@media only screen and (min-width: 900px) {
	.frame-option, .mask-option {
		height: 6rem;
	}
}
.frame-option:hover, .mask-option:hover {
	border-color: var(--beige);
}
.frame-option.selected, .mask-option.selected {
	background: var(--input-background-selected);
	border-color: var(--purple);
	box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
}
.frame-option > img, .mask-option > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	-webkit-user-select: none;
  	-khtml-user-select: none;
  	-moz-user-select: none;
  	-o-user-select: none;
  	user-select: none;
}
.mask-option {
	display: grid;
	grid-template-columns: 2.5rem auto;
	text-align: left;
	grid-gap: 0.5rem;
	align-items: center;
	height: 3.5rem;
	padding: 0.5rem;
}
.mask-option > img {
	max-height: 2.5rem;
	width: 2.5rem;
	object-fit: contain;
	justify-self: center;
}
@media only screen and (min-width: 600px) {
	.mask-option {
		grid-template-columns: 3rem auto;
		height: 4rem;
		padding: 0.5rem 0.75rem;
	}
	.mask-option > img {
		max-height: 3rem;
		width: 3rem;
	}
}
@media only screen and (min-width: 900px) {
	.mask-option {
		grid-template-columns: 3.5rem auto;
		height: 4.5rem;
		padding: 0.5rem 1rem;
	}
	.mask-option > img {
		max-height: 3.5rem;
		width: 3.5rem;
	}
}
/*Frame Elements*/
.frame-element {
	display: grid;
	grid-template-columns: 2.5rem 2.5rem 1fr 2rem;
	grid-gap: 0.35rem;
	padding: 0.4rem 0.4rem 0.4rem 1.5rem;
	align-items: center;
	cursor: grab;
	background: var(--anthracite);
	border: 1px solid var(--input-border);
	border-radius: 8px;
	margin-bottom: 0.25rem;
	transition: all 0.2s ease;
}
.frame-element > h4 {
	overflow-x: auto;
	overflow-y: hidden;
	font-size: 0.7rem;
	white-space: nowrap;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}
.frame-element > h4::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}
.frame-element > img {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
	border-radius: 4px;
}
.frame-element:hover {
	border-color: var(--purple);
	background: var(--anthracite);
}
@media only screen and (min-width: 500px) {
	.frame-element {
		grid-template-columns: 3rem 3rem 1fr 2.5rem;
		grid-gap: 0.4rem;
		padding: 0.45rem 0.5rem 0.45rem 1.75rem;
	}
	.frame-element > h4 {
		font-size: 0.8rem;
	}
	.frame-element > img {
		width: 3rem;
		height: 3rem;
	}
}
@media only screen and (min-width: 900px) {
	.frame-element {
		grid-template-columns: 4rem 4rem 1fr 4rem;
		grid-gap: 0.5rem;
		padding: 0.5rem 0.5rem 0.5rem 2rem;
	}
	.frame-element > h4 {
		font-size: 0.9rem;
	}
	.frame-element > img {
		width: 4rem;
		height: 4rem;
	}
}
.frame-element-close {
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
	padding: 0.25rem 0.5rem;
	background: #000000;
	border: 2px solid #333333;
	border-radius: 4px;
	color: var(--font-color);
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.frame-element-close:hover {
	background: #1a1a1a;
	border-color: var(--purple);
	color: var(--purple);
}
.frame-element-editor, .textbox-editor {
	display: none;
	position: fixed;
	max-width: calc(100vw - 2rem);
	width: 64rem;
	max-height: calc(100vh - 2rem);
	height: auto;
	overflow-y: auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
	top: 50%;
	left: 50%;
	background: var(--anthracite);
	border: 2px solid var(--purple);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.3);
	z-index: 100;
	padding: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	grid-gap: 1rem;
}
@media only screen and (min-width: 600px) {
	.frame-element-editor, .textbox-editor {
		padding: 2rem;
		max-width: calc(100vw - 4rem);
		max-height: calc(100vh - 4rem);
	}
}
.frame-element-editor.opened, .textbox-editor.opened {
	display: grid;
}
.frame-element-editor > .frame-element-editor-title, .textbox-editor > .textbox-editor-title {
	grid-column: 1 / -2;
	color: var(--beige);
	font-size: 1.25rem;
	margin: 0;
}
.frame-element-editor > .frame-element-editor-close, .textbox-editor > .textbox-editor-close {
	cursor: pointer;
	width: 2.5rem;
	height: 2.5rem;
	grid-column: -1 span 1;
	user-select: none;
	justify-self: right;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid var(--input-border);
	border-radius: 8px;
	color: var(--font-color);
	font-size: 1.25rem;
	transition: all 0.2s ease;
}
.frame-element-editor > .frame-element-editor-close:hover, .textbox-editor > .textbox-editor-close:hover {
	background: rgba(139, 92, 246, 0.3);
	border-color: var(--purple);
	color: var(--purple-light);
}
/* Modal overlay backdrop */
.modal-backdrop {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	z-index: 99;
}
.modal-backdrop.active {
	display: block;
}
/* Modal inner sections styling */
.frame-element-editor > div,
.textbox-editor > div {
	background: rgba(0, 0, 0, 0.3);
	border-radius: 8px;
	padding: 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.frame-element-editor > div:hover,
.textbox-editor > div:hover {
	border-color: rgba(139, 92, 246, 0.3);
}
.frame-element-editor > div > .input-description,
.textbox-editor > div > .input-description {
	margin-bottom: 0.5rem;
	color: var(--beige);
	font-weight: 500;
	font-style: normal;
}
body.light-mode .frame-element-editor > div,
body.light-mode .textbox-editor > div {
	background: rgba(0, 0, 0, 0.03);
	border-color: rgba(0, 0, 0, 0.1);
}
body.light-mode .frame-element-editor > div:hover,
body.light-mode .textbox-editor > div:hover {
	border-color: rgba(139, 92, 246, 0.3);
}
/*Text tab*/
.text-option {
	background: var(--input-background);
}
.text-codes {
	max-width: calc(100vw - 3rem);
	display: grid;
	grid-template-columns: auto auto;
	overflow-x: scroll;
}
.text-codes > * {
	border: 1px solid black;
	padding: 0.5rem;
}
/*tab content padding*/
#creator-menu-sections > div {
	padding: 0.5rem 0.5rem 0;
}
#creator-bottom-controls {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}
/*download button*/
.download-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem 0.5rem;
}
.download-alt-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}
.download {
	text-align: center;
	user-select: none;
	cursor: pointer;
	border-radius: 10px;
	font-weight: bold;
	transition: all 0.2s ease;
	display: block;
	width: 100%;
	border: none;
	font-family: inherit;
}
.download-main {
	background: linear-gradient(135deg, var(--purple), var(--purple-light));
	color: white;
	padding: 0.85rem 1rem;
	font-size: 1rem;
}
.download-main:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
}
.download-secondary {
	background: linear-gradient(135deg, var(--purple), var(--purple-light));
	color: white;
	padding: 0.6rem 0.5rem;
	font-size: 0.85rem;
}
.download-secondary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
}
body.light-mode .download-section {
	background-color: #FFFFFF;
	border-radius: 10px;
	padding: 0.75rem;
}
@media only screen and (min-width: 900px) {
	.download-main {
		padding: 1rem 2rem;
		font-size: 1.1rem;
	}
}
/*supporters*/
.supporters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	grid-gap: 0.5rem;
	padding: 1rem 2rem;
}