@font-face { font-family: 'Outfit';  font-display: swap; font-weight:100; src: url('Outfit-Thin.woff2'); }
@font-face { font-family: 'Outfit';  font-display: swap; font-weight:200; src: url('Outfit-ExtraLight.woff2'); }
@font-face { font-family: 'Outfit';  font-display: swap; font-weight:300; src: url('Outfit-Light.woff2'); }
@font-face { font-family: 'Outfit';  font-display: swap; font-weight:400; src: url('Outfit-Regular.woff2'); }
@font-face { font-family: 'Outfit';  font-display: swap; font-weight:500; src: url('Outfit-Medium.woff2'); }
@font-face { font-family: 'Outfit';  font-display: swap; font-weight:600; src: url('Outfit-SemiBold.woff2'); }
@font-face { font-family: 'Outfit';  font-display: swap; font-weight:700; src: url('Outfit-Bold.woff2'); }
@font-face { font-family: 'Outfit';  font-display: swap; font-weight:800; src: url('Outfit-ExtraBold.woff2'); }
@font-face { font-family: 'Outfit';  font-display: swap; font-weight:900; src: url('Outfit-Black.woff2'); }
@font-face { font-family: 'Symbols'; src: url('MaterialSymbols.woff2'); }
html, body {
	min-height: 100%;
	font-size: 14px;
	font-family: Outfit;
	line-height: 1.5;
}
body {
	--tesz:rgb(161 161 170);
	--bg-color: #09090b;
	--color: #fff; 
	--bg-color2:#18181b;
	--border-color:#2f2f32;
	--border-color2:#27272a;
	--border-color3:#151517;
	--link-hover: #ff3366;
	--color2:#9ca3af;
	--color3:#6b7280;
	--color4:#52525b;
	--color5:#cc2952;
	--color6:#52525b;
	--placeholder:#444d59;
	--headerborder: #161617;
	--headerbg: #09090b; 
	--footerbg: #020202;
	--footercolor:#424259; 
	--footerborder:#0e0e0e;
	--fixedmenuborder:#1b1b1b;
	--p-color:#a1a1aa;
	--eye-color:#71717a;
	--k-color:#d4d4d8;
	--aside-link-color:#ff3366;
	--aside-link-hover:#fff;
	--aside-links-color:#a1a1aa;
	--aside-links-hover:#fff;
	--aside-bg:#18181b;
	--aside-border:#232326;
	--aside-tag-color:#a1a1aa;
	--aside-tag-bg:#131315;
	--aside-tag-border:#27272a;
	--pn-prev-color:#a1a1aa;
	--pn-min-color:#66666f;
	--pn-color:#52525b;
	--pn-active-color:#fff;
	--pn-sep-color:#3f3f46;
	--inclusive:#3f3f46;

	--contact-border:#2a2a2b;
	--contact-top:#ff3366;
	--contact-footer-bg:#0a0a0c;
	--contact-bg:#121214;
	--contact-item-bg:#0e0e10;
	--contact-color1:#ffffff;
	--contact-color2:#a1a1aa;
	--contact-hover-border:#29292b;
	--contact-hover-icon:#ff3366;
	--contact-hover-bg:#1e1e20;
	--contact-hover-color1:#ff335d;
	--contact-hover-color2:#a1a1aa;

	--sa-color:#71717a;
	--sa-color-hover:#ffffff;
	--sa-border:#08080a;
	
	--dad-bg:#121214;
	--dad-border:#27272a;

	--gw-aside-btn-bg:#27272a;
	--gw-aside-btn-color:#d4d4d8;
	--gw-desc-bg:#18181b;
	--gw-linear: #18181b, rgba(24,24,27,0);

	&.body-light {
		--bg-color:#fafafa;
		--color:#18181b;
		--bg-color2:#f4f4f5;
		--border-color:#e4e4e7;
		--border-color2:#e4e4e7;
		--border-color3:#e4e4e7;
		--link-hover:#ff3366;
		--color2:#71717a;
		--color3:#71717a;
		--color4:#d4d4d8;
		--color5:#ff5b84;
		--color6:#a1a1aa;
		--placeholder:#82828a;
		--headerborder:#e4e4e7;
		--headerbg:#ffffff;
		--footerbg:#ffffff;
		--footercolor:#b3b3ba;
		--footerborder:#e4e4e7;
		--fixedmenuborder:#e4e4e7;
		--p-color:#71717a;
		--eye-color:#a1a1aa;
		--k-color:rgb(82 82 91);
		--aside-link-color:rgb(255 51 102);
		--aside-link-hover:#5c181b;
		--aside-links-color:#52525b;
		--aside-links-hover:#5c181b;
		--aside-bg:#fff;
		--aside-border:#e4e4e7;
		--aside-tag-color:#71717a;
		--aside-tag-bg:#f4f4f5;
		--aside-tag-border:#e4e4e7;
		--pn-prev-color:#71717a;
		--pn-min-color:#7e7e86;
		--pn-color:#a1a1aa;
		--pn-active-color:#18181b;
		--pn-sep-color:#d4d4d8;
		--inclusive:#d4d4d8;

		--contact-border:#e4e4e7;
		--contact-top:#ff3366;
		--contact-footer-bg:#fafafa;
		--contact-bg:#ffffff;
		--contact-item-bg:#fafafa;
		--contact-color1:#18181b;
		--contact-color2:#71717a;
		--contact-hover-border:#ffc1d1;
		--contact-hover-icon:#ff3366;
		--contact-hover-bg:#ffffff;
		--contact-hover-color1:#ff3366;
		--contact-hover-color2:#71717a;
		
		--sa-color:#a1a1aa; /*eyecolor*/
		--sa-color-hover:#18181b;
		--sa-border:#e4e4e7;

		--dad-bg:#f4f4f5;
		--dad-border:#d4d4d8;

		--gw-aside-btn-bg:#f4f4f5;
		--gw-aside-btn-color:#52525b;
		--gw-desc-bg:#fafafa;
		--gw-linear: #fafafa, rgba(250,250,250,0.9), transparent;
		
	}
	color:var(--color);
	background: var(--bg-color);
	font-family: Outfit;
	letter-spacing: 0.01em;
}
* {
	padding:0;
	margin:0;
	box-sizing: border-box;
	color:inherit;
	font-family: inherit;
	outline: none;
}
a {
	text-decoration: none;
}
.header-container {
	position: sticky;
	top:0;
	border-bottom:1px solid var(--headerborder);
	background: var(--headerbg);
	z-index:50;
	.header {
		display:flex;
		justify-content: space-between;
		max-width: 1460px;
		padding:0rem 1.5rem;
		margin:0 auto;
		height: 5rem;
		.header-left {
			display:flex;
			align-items: center;
			.menu-btn {
				padding:0.5rem 0.5rem 0.5rem 0;
				margin:0.5rem 0.5rem 0.5rem 0;
				font-size: 1.875rem;
				color:var(--color);
			}
			.title {
				font-size:3rem;
				letter-spacing: -0.05em;
				font-weight: 900;
				span { color:#ff3366; }
			}
		}
		.header-right {
			display:flex;
			width:776px;
			align-items: center;
			justify-content: space-between;
			.nav {
				display:flex;
				width:380px;
				justify-content: space-between;
				a {
					text-transform: uppercase;
					font-weight: 700;
					font-size:11px;
					letter-spacing: 0.15em;
					color:var(--color2);
					position:relative;
					transition: color 0.15s;
					transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
					
				}
				a.active {
					position:relative;
					color:var(--color) !important;
					&:before {
						position:absolute;
						background:#ff3366;
						width:0.25rem;
						height:0.25rem;
						border-radius: 50%;
						left:50%;
						bottom: -0.5rem;
						content:"";
						font-size:0;
					}
				}
			}
			.scheme-btn {
				display:flex;
				align-items: center;
				font-size: 1.25rem; 
				color:var(--color2);
				transition: color 0.15s;
				transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
				i::before {
					content: "light_mode";
				}
			}
			.scheme-btn.dark {
				i::before {
					content: "dark_mode";
				}
			}
			
			.search-btn {
				display:none;
				align-items: center;
				font-size: 1.25rem; 
				color:var(--color2);
				transition: color 0.15s;
				transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
				i::before {
					content: "search";
				}
			}
			.search-absolute {
				display:none;
				border-radius: 0.75rem;
				background: var(--aside-bg);
				border:1px solid var(--border-color);
				position:absolute;
				left:0;
				top:calc(100% + 5px);
				width: 100%;
				padding:1rem;
				label {
					text-transform: uppercase;
					font-weight: 700;
					font-size:10px;
					letter-spacing: 0.15em;
					color:var(--color2);
				}
				.aside-tags a {	padding: 0.35rem 0.75rem; }
			}
		}
		
		.menu-btn, .search-btn {
			display:none;
		}
		
		@media screen and (max-width: 1055px) {
			
			.header-right {
				width:unset;
				.nav {
					display:none;
				}
				.scheme-btn { 
					/*display:none; */
					margin-right:1rem;
				}
			}
			.menu-btn {
				display:unset;
			}
		}
		@media screen and (max-width: 768px) {
			padding:0 1rem;
			.header-left {
				.title {
					font-size: 1.875rem;
					
				}
			}
			.header-right {
				.search {
					display: none;
				}
				.search-btn {
					display: flex;
				}
				.scheme-btn {
					display:flex;
					margin-right:1rem;
					svg {
						fill:var(--color) !important;
					}
				}
			}
			
		}

	}
	

}
.aside-tags {
	padding-top:1rem;
	a {
		padding: 0.4rem 0.75rem;
	}
}
.main {
	flex: 1 1 0%;
}
.gw-title {
	margin-bottom:2rem;
	h1 {
		font-size: 1.25rem;
    	line-height: 1.75rem;
		letter-spacing: 0.1em;
		margin:0;
	}
	.data {
		span {
			display:inline-block;
			font-weight: 700;
			font-size: 0.75rem;
			line-height: 1rem;
			font-family: monospace;
			color:#a1a1a1;
			text-transform: uppercase;
		}
	}
}
.gw-rating {
	background: var(--aside-bg);
	border:1px solid var(--aside-border);
	display: flex;;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	border-radius: 1rem;
	margin:2rem 0;
	label {
		letter-spacing: 0.1em;
		text-transform: uppercase;
		font-weight: 700;
		font-size: 10px;
		color:#a1a1aa;
	}
	.rating .stars {
		margin-top:3px;
		display: flex;
		gap: 2px;
		padding: 0 2px;
		span { width:20px; }
	}
	.line {
		height:2rem;
		background-color: rgba(255, 255, 255, 0.25);
		width:1px;
	}
	.view span {
		font-family: monospace;
		font-weight: 700;
		font-size: 1.125rem;
	}
	.rating-view {
		display:flex;
		gap:1rem;
		align-items: center;
		.rating, .view {
			display:flex;
			flex-direction: column;
			flex:1 1 auto;
		}
	}
	.aside-tags a {
		display: flex;
		align-items: center;
		color:var(--gw-aside-btn-color);
		font-size: 0.75rem;
		font-weight: 700;
		gap: 0.5rem;
		padding: 0.5rem 1rem;
		border-radius: 0.75rem;
		border: none;
		background: var(--gw-aside-btn-bg);
		i {
			font-size: 0.875rem;
		}
	}
	@media screen and (max-width: 640px) {
		flex-direction: column;
		gap:1rem;
	}
	
}
.aside-tags a.share-copied {
	position: relative;
}
.aside-tags a.share-copied::after {
	content: 'Link copied!';
	position: absolute;
	top: -2rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--bg-color2);
	color: var(--color);
	font-size: 0.7rem;
	padding: 0.25rem 0.5rem;
	border-radius: 0.375rem;
	border: 1px solid var(--border-color);
	white-space: nowrap;
	pointer-events: none;
	animation: shareFade 2s ease forwards;
}
@keyframes shareFade {
	0%, 70% { opacity:1; }
	100% { opacity:0; }
}
.gw-desc {
	display:grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:1.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-size: 0.875rem;
  	line-height: 1.25rem;
	.left {
		label {
			color:var(--color2);
			font-size: 10px;
			font-weight: 700;
			text-transform: uppercase;
		}
		div:nth-child(2) {
			a {
				text-transform: none;
			}
		}
		div:nth-child(1), div:nth-child(2) {
			display:flex;
			align-items: center;
			justify-content: space-between;
			border-bottom:1px solid var(--border-color);
			padding-bottom: 0.5rem;
			margin-bottom: 1rem;
			a {
				text-transform: uppercase;
				font-weight: 700;
				font-size: 11px;
				letter-spacing: 0.15em;
				color: var(--color2);
				cursor:pointer;
				&:hover {
					color:var(--link-hover);
				}
			}
		}
		div:nth-child(2) { a { text-transform: none; } }
		.aside-tags a {
			border:none;
			padding:0.25rem .75rem;
			background: var(--gw-aside-btn-bg);
			color:var(--gw-aside-btn-color);
		}
	}
	.right {
		position:relative;
		background:#18181b;
		background: var(--gw-desc-bg);
		padding: 1rem;
		border-radius: 0.75rem;
		border:1px solid var(--border-color);
		label {
			color:var(--color2);
			font-size: 10px;
			font-weight: 700;
			text-transform: uppercase;
		}
		p {
			display: block;
			font-weight: 300;
			font-style: italic;
			font-size: 12px;
			line-height: 1.5;
			color: var(--color2);
			overflow: hidden;
			max-height: 80px;
		}
		.absolute {
			height: 4rem;
			display:flex;
			align-items: flex-end;
			justify-content: center;
			padding-bottom: 0.25rem;
			left:0;
			bottom:0;
			right:0;
			text-align: center;
			/*
			background-image: linear-gradient(to top, #18181b, rgba(24,24,27,0));
			background-image: linear-gradient(to top, #fafafa, rgba(250,250,250,0.9));
			*/
			background-image: linear-gradient(to top, var(--gw-linear) );
			border-bottom-right-radius: 0.75rem;
			border-bottom-left-radius: 0.75rem;
			label {
				display:inline-flex;
				align-items: center;
				gap: 0.25rem;
				cursor:pointer;
				&:hover {
					color:#fff;
				}
				
			}
			
		}
		&.opened {
			p { max-height: unset;}
			.absolute { display:none; }
		}

	}

	@media screen and (max-width: 768px) {
		gap:2rem;
		grid-template-columns: repeat(1, minmax(0, 1fr));
		.right {
			p { max-height: unset;}
			.absolute { display:none; }
		}
	}

}
.gw-join {
	cursor:pointer;
	background: #121214;
	border:1px solid rgba(255, 255, 255, 0.05);;
	display: flex;;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	border-radius: 1rem;
	margin:2rem 0;
	.gw-join-left {
		label {
			color:#a1a1aa;
			font-size: 10px;
			margin-bottom: 0.25rem;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.2em;
		}
		& > div {
			color:#fff;
			font-style: italic;
			font-size: 1.875rem;
    		line-height: 2.25rem;
			letter-spacing: 0.025em;
			font-weight: 200;
			span {
				padding-left:0.5rem;
				font-style: normal;
				font-weight: 900;
			}
		}
		
	}
	.gw-join-right {
		letter-spacing: 0.2em;
		text-transform: uppercase;
		font-weight: 700;
		font-size:10px;
		display:flex;
		align-items: center;
		padding:0.75rem 2rem;
		color:#fff;
		background: #ff3366;
		border-radius: 0.75rem;
		transition: all 0.25s;
		&:hover {
			background: #e8305e;
		}
	}
	@media screen and (max-width: 768px) {
		flex-direction: column;
		gap:1rem;
		.gw-join-left {
			text-align: center;
			& > div {
				font-size: 1.5rem;
				line-height: normal;
			}	
		}
		
	}
}
.dad {
	label {
		text-transform: uppercase;
		color: #a1a1aa;
		font-weight: 700;
		font-size: 9px;
		letter-spacing: 0.1em;
	}
	.dad-content {
		width:300px;
		height:250px;
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: var(--dad-bg);
		margin-top: 5px;
		border:1px dashed var(--dad-border);
		aspect-ratio: 1/1;
		border-radius: 1rem;
		span {
			color: #a1a1aa;
			font-size: 1.5rem;
			line-height: 2rem;
			font-weight: 900;
			opacity: 0.2;
			transition: all 0.25s;
			padding-bottom: 6px;
		}
		&:hover {
			span {
				opacity: .75;
			}
		}
		
	}
}
.content-top {
	display:block;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--border-color);
	.flex-center.gap {
		gap: 0.75rem;
		padding-bottom: 0.5rem;
		text-transform: uppercase;
	}
	.flex-center.data {
		gap: 0.375rem;
		font-size:10px;
		font-weight: 700;;
		letter-spacing: 0.025em;
		span.d2 {
			color:rgb(161 161 170);
		}
	}
	span.sep {
		color:var(--color4);
		font-size:10px;
	}
	i.tag-icon {
		font-size: 1.5rem;
		color: rgb(255 51 102);
		background-color: rgb(255 51 102 / 0.1);
		border: 1px solid rgba(255,255,255,.1);
		border-radius: 0.5rem;
		padding: 0.15rem 0.25rem;
		margin-right: 0.5rem;
		vertical-align: middle;
	}
	@media screen and (max-width: 768px) {
		margin-bottom: 0.5rem;
	}
}
.content-content {
	margin-bottom:3rem;
	@media screen and (max-width: 768px) {
		margin-bottom:2rem;
	}
}
.pagination {
	padding:3rem 0;
	margin-top:2rem;
	display:flex;
	gap: 5px;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-transform: uppercase;
	border-top:1px solid var(--border-color3);
	color:var(--color2);
	font-size: 11px;
  	font-weight: 700;
	i { font-size:30px ;}
	div {
		position:relative;
		display:flex;
		justify-content: center;
		span {
			position: absolute;
			top: -2px;
			transform: rotate(45deg);
			font-size: 11px;
			color:#ff3366;
			opacity: 0;
			transition: all .2s;
			aspect-ratio: 1/1;
      		line-height: 1px;
		}
		&.active {
			color:var(--link-hover);
			span {
				opacity: 1;
			}
		}
		&:not(.active) {
			cursor:pointer;
			color:var(--color2);
			&:hover {
				color:var(--link-hover);
				span { opacity: .4; };
			}
		}
	}
	a {
		display:flex;
		align-items: center;
		justify-content: center;
		width:30px;
		height:30px;
	}

	@media screen and (max-width: 500px) {
		gap:3px;
	}
}
.page-numbering {
	padding:3rem 0;
	margin-top:2rem;
	display:flex;
	gap: 1.5rem;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-transform: uppercase;
	border-top:1px solid var(--border-color3);
	a {
		position: relative;
		display:flex;
		align-items: center;
		justify-content: center;
		width:28px;
		height:35px;
		font-size:1rem;
		font-family: monospace;
		color:var(--color6);
		transition: all 0.3s;
		cursor:pointer;
		label { pointer-events: none; }
		/*
		color:#52525b;
		c:#a1a1aa;
		*/
		&:not(.prev, .next)::before {
			display:inline-block;
			content:"";
			position: absolute;
			top:0;
			transform: rotate(45deg);
			width:0.375rem;
			height:0.375rem;
			opacity:0;
			background: #ff330a;
			transition: opacity 0.3s;
		}

		/*
		span {
			position: absolute;
			top:0;
			transform: rotate(45deg);
			width:0.375rem;
			height:0.375rem;
			opacity:0;
			background: #ff330a;
			transition: all 0.25s;
		}
		*/
	}
	a:not(.active, .prev, .next):hover {
		color:var(--sa-color-hover);
		&::before {
			opacity: 0.5;
		}
	}
	a.active { 
		pointer-events: none;
		color:var(--color); 
		font-weight: 700; 
		&::before { opacity:1 ;}
	}
	a.prev, a.next {
		color: var(--p-color);
		&.disabled {
			color:var(--inclusive);
			cursor: not-allowed;
		}
		letter-spacing: 0.2em;
		font-weight: 700;
		font-size: 0.75rem;
		width:auto;
		&::before, &::after  {
			font-family: 'Symbols';
			font-size:1.125rem;
			font-weight: 400;
		}
		&:hover {
			color:var(--link-hover);
		}
	}
	a.prev::before { content:"west"; padding-right:0.5rem; }
	a.next::after { content:"east"; padding-left:0.5rem; }
	a.min, a.max {
		color:#71717a;
		font-size: 0.875rem;
	}
	.ellipsis {
		pointer-events: none;
		font-size: 0.75rem;
		color:#3f3f46;
		font-family: monospace;
	}
	a.hidden, .ellipsis.hidden { display:none; }
	@media screen and (max-width: 500px) {
		gap:0.5rem;
		a.prev, a.next { font-size:0; }
		a { width:25px; font-size:0.875rem; }
		a.prev, a.next {
			&::before, &::after {
				padding:0;
			}
		}
	}
}
.paging {
	padding:3rem 0;
	margin-top:2rem;
	display:flex;
	gap: 1.5rem;
	align-items: center;
	flex-direction: column;
	width: 100%;
	text-transform: uppercase;
	border-top:1px solid var(--border-color3);
	/*font-size: 14px;*/
	i {
		font-size: 1.125rem;
	}
	a {
		position:relative;
		padding:0 5px;
		display:flex;
		align-items: center;
		transition: all 0.15s;
		color:var(--color2);
		height:35px;
		&.prev, &.next {
			letter-spacing: 0.2em;
			font-weight: 700;
			font-size: 10px;
			gap:0.5rem;
			color:var(--pn-prev-color);
			&:not(.hidden):hover {
				color:var(--link-hover);
			}
			&.hidden {
				cursor:default;
				opacity: 0.8;
			}
			label {
				pointer-events: none;
			}
		}
		&.active {
			font-weight: 600;
			color:var(--link-hover);
			cursor:default;
			span {
				opacity: 1;
			}
		}
		&:not(.active) {
			&.btn {
				cursor:pointer;
				color:var(--color2);
				&:hover {
					color:var(--link-hover);
					span { opacity: .4; };
				}
			}
		} 

		display: flex;
		justify-content: center;

		span {
			position: absolute;
			top: -5px;
			transform: rotate(45deg);
			font-size: 10px;
			color:#ff3366;
			opacity: 0;
			transition: all .2s;
		}


	}
	.paging-content {
		display:flex;
		gap: 1rem;
		align-items: center;
		.items {
			display:flex;
			gap: 0rem;
			align-items: center;
			font-family: monospace, Courier, "Courier new";
			&>span {
				cursor:default;
				color:var(--pn-sep-color);
				font-size:0.75rem;
			}
		}
		@media screen and (max-width: 640px) {
			a.prev, a.next {
				label {
					display:none;
				}
			}
		}
	}
}
.about {
	padding: 3rem 1rem 1rem 1rem;
	text-align: center;
	max-width: 56rem;
	margin: 0 auto;

	hr {
		border:none;
		border-top:1px solid var(--border-color3);
		height:2rem;
	}
	h3 {
		
		color: #a1a1aa;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		font-weight: 700;
		font-size:12px;
		margin-bottom: 1rem;
		text-align: center;
	}
	p {
		color:var(--p-color);
		line-height: 1.625;
		text-align: center;
		padding-bottom:1.5rem;
	}
	i {
		color: var(--inclusive);
		font-size: 1.25rem;
	}
	body.body-light i {
		i {
			color:black; 
		}
	}
	@media screen and (max-width: 768px) {
		padding: 2rem 1rem 1rem 1rem;
	}
}	
.aside {
	display:flex;
	flex-direction: column;
	gap: 3rem;
	width:300px;

	.aside-container {
		background: var(--aside-bg);
		border-radius: 0.75rem;
		border:1px solid var(--aside-border);
		padding:2rem 1.5rem;
		border-radius: 1rem;

		.iasp_2_3 {
			row-gap: unset;
			column-gap: unset;
			flex-wrap: unset;
			justify-items:unset;
			flex-direction: column;
			gap:1.5rem;
			a { width:100% !important; }
		}
	}
	.aside-link {
		display:flex;
		justify-content: center;
		width:100%;
		height:29px;
		margin-top:1rem;
		padding-top: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.2em;
		font-weight: 700;
		font-size: 10px;
		border-top: 1px solid var(--aside-border);
		color:var(--aside-link-color);
		cursor:pointer;
		gap: 0.25rem;
		transition: all 0.15s;
		i {
			  transition: all 0.15s;
			display:inline-block;
		}
		&:hover {
			color:var(--aside-link-hover);
			i {
				transform:translateX(5px);
			}
		}
		
	}
	.aside-links {
		display:flex;
		flex-direction: column;
		a {
			padding-top: 0.75rem;
			  padding-bottom: 0.75rem;
			border-bottom:1px solid var(--aside-border);
			display: flex;
			justify-content: space-between;
			align-items: center;
			width:100%;
			position:relative;
			transition: all 0.15s;
			div.flex-center {
				transition: all 0.15s;
				gap:1rem;
				span {
					display:block;
					background: rgb(82 82 91);
					width: 0.375rem;
					height: 0.375rem;
					transform:rotate(45deg);
					transition: all 0.3s;
				}
				label {
					color: var(--aside-links-color);
					letter-spacing: 0.2em;
					text-transform: uppercase;
					font-weight: 700;
					font-size:10px;
					transition: all 0.30s;
				}
				
			}
			i {
				color: rgb(63 63 70 );
				transition: all 0.3s;
			}

			 /* light: "#83371b"  rgb(82 82 91) */

			&:hover {
				div.flex-center {
					transform: translateX(10px);
					span { background:#ff3366; }
					label { color:var(--aside-links-hover); }
				};
				i { color:#ff3366; }
			}
		}
	}

	@media screen and (max-width: 1055px) {
		display: none;
	}

}
.aside-tags {
	display:flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-content: flex-start;
	a {
		background: var(--aside-tag-bg);
		color:var(--aside-links-color);
		border:1px solid var(--aside-tag-border);
		transition: all 0.3s;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		font-weight: 700;
		font-size:10px;
		padding:0.5rem 1rem;
		border-radius: 9999px;
		cursor:pointer;
		&:hover {
			border-color: #ff3366;
			color:#ff3366;
		}
	}
}
.search {
	position:relative;
	display:flex;
	padding:0 1rem;
	align-items: center;
	width:300px;
	height: 40px;
	background: var(--bg-color2);
	border-radius: 0.75rem;
	border:1px solid var(--border-color);
	i {
		color:var(--color3);
		font-size: 1.25rem;
	}
	input {
		background:transparent;
		color:var(--color);
		border:none;
		letter-spacing: 0.025em;
		font-size: 0.75rem;
		line-height: 1rem;
		font-weight: 500;
		flex:1 1 auto;
		margin-left:1rem;
	}
	input::placeholder {
		color:var(--placeholder);
		font-weight: 600;
	}
	

}
.search-alphabet {
	position: sticky;
	top: 5.5rem;
	z-index: 10;
	padding: 0.75rem 0.5rem;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	background: var(--contact-bg);
	width: calc(100% + 3rem);
	margin-bottom: 2rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	border-radius: 0.5rem;
	border:1px solid var(--sa-border);
	transform: translateX(-1.5rem);
	a {
		padding: 0.25rem 0.65rem;
		color:var(--sa-color);
		text-transform: uppercase;
		font-weight: 700;
		font-size: 12px;
		cursor:pointer;
		transition: color 0.3s;
		&.active {
			color:#ff3366;
		}
		&:hover {
			&:not(.active) {
				color:var(--sa-color-hover);
			}
		}
	}
}
.content {
	max-width: 1460px;
	padding: 1.5rem 1.5rem 3rem 1.5rem;
	margin:0 auto;
	min-height: 100vh;
	.home {
		display:flex;
		flex-direction: row;
		gap: 1.25rem;
		justify-content: space-between;
		align-items: flex-start;
	}
	@media screen and (max-width: 768px) {
		padding: 1.0rem 1.0rem 2.5rem 1.0rem;
	}
}
.menu-fixed {
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	width:100%;
	background-color: rgba(0, 0, 0, 0.8); 
	backdrop-filter: blur(4px);
	transition: opacity .3s;
	opacity:1;
	z-index:54;
}
.menu-fixed.hidden {
	pointer-events: none;
	opacity: 0;
}
.menu-fixed-content {
	position:fixed;
	left:0;
	top:0;
	display:flex;
	flex-direction: column;
	height:100%;
	background:var(--footerbg);
	border-right:1px solid #ff3366;
	width:85%;
	max-width: 320px;
	transform: translate(0%);
	transition: transform .3s;
	box-shadow: 0 0 50px rgba(222,25,117,.2);
	z-index:55;
	.header {
		padding: 1.5rem;
		display:flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--fixedmenuborder);
		.title {
			font-weight: 900;
			font-size: 1.875rem;
			span { color:#ff3366; }
		}
		.btn {
			display:flex;
			padding: 0.25rem;
			color:var(--color2);
			font-size: 1.5rem;
		}
	}
	.links-content {
		overflow-y: auto;
		flex:1 1 0%;
		padding:1.5rem;
		margin-bottom:0.75rem;
		.top {
			display:flex;
			gap: 0.75rem;
			flex-direction: column;
			border-bottom: 1px solid var(--fixedmenuborder);
			padding-bottom: 1.5rem;
			margin-bottom:2rem;
			.title {
				text-transform: uppercase;
				font-size:9px;
				color: var(--color5);
				letter-spacing: 0.2em;
			}
			a {
				cursor:pointer;
				font-size: 1.125rem;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: 0.15em;
				color:var(--color);
			}

		}
		.links {
			/*padding:0.5rem 0;*/
			border-bottom: 1px solid var(--fixedmenuborder);

			.links-btn {
				/*padding:0.75rem 0;*/
				display:flex;
				justify-content: space-between;
				align-items: center;
				cursor:pointer;
				label {
					text-transform: uppercase;
					color:var(--color);
					font-weight: 600;
					font-size: 0.75rem;
					letter-spacing: 0.15em;
					cursor:pointer;
				}
				i {
					font-size:24px;
					color:#ff3366;
					transition: transform 0.3s;
					transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
				}
			}
			.links-btn.opened {
				i { transform: rotate(180deg); }
			}
			
		}
		.links2 {
			display:flex;
			flex-direction: column;
			padding:0.5rem 0 0 0.5rem;
			margin-bottom:0.75rem;
			overflow: hidden;
			max-height: 600px;
			transition: all 0.6s;
			a {
				color:var(--color2);
				display:flex;
				align-items: center;
				justify-content: space-between;
				padding:0.5rem 0.75rem;
				letter-spacing: 0.25em;
				font-weight: 700;
				font-size:11px;
				text-transform: uppercase;
				cursor:pointer;
			}
			span {
				font-size:9px;
			}
			i {
				font-size:16px;
				font-weight: 400;
				color:rgb(82 82 91);
			}
		}
		/* rgb(161 161 170  rgb(82 82 91*/
		
		.links2.most span{
			color:var(--color6);
		}

		.links2.closed {
			max-height: 0;
			opacity:0;
		}
	}
}
.search-fixed {
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	right:0;
	background:var(--headerbg);
	z-index:50;
	display:none;
	.search-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color:var(--color);
		padding:1.5rem;
		padding-bottom:2rem;
		label {
			font-weight: 900;
			letter-spacing: -0.025em;
			font-size: 1.25rem;
  			line-height: 1.75rem;
			text-transform: uppercase;
		}
		i {
			cursor:pointer;
			font-size: 1.875rem;
			padding:0.5rem;
			color:var(--color);
			display:flex;
			align-items: center;
		}
	}
	.search {
		width: calc(100% - 3rem);
    	margin: 0 auto;
	}

}
.contact-fixed {
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	width:100%;
	background-color: rgba(0, 0, 0, 0.8); 
	backdrop-filter: blur(4px);
	transition: opacity .3s;
	opacity:1;
	z-index:54;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 1rem;
	padding-right: 1rem;
}
.contact-fixed.hidden {
	display:none;
}
.contact-fixed-content {
	border-radius: 1.5rem;
	background: var(--contact-bg);
	border:1px solid var(--contact-border);
	overflow: hidden;
	width:100%;
	max-width: 28rem;
	.top {
		height: 0.375rem;
		background:var(--contact-top);
	}
	.header {
		padding: 1.5rem;
		display:flex;
		align-items: center;
		justify-content: space-between;
		.title {
			label {
				display:block;
				letter-spacing: 0.1em;
				text-transform: uppercase;
				font-weight: 900;
				font-size:1.5rem;
				color:var(--contact-color1);
			}
			span {
				font-weight: 500;
				font-size: 0.75rem;
  				line-height: 1rem;
				color:var(--contact-color2)
			}
		}
		.btn {
			display:flex;
			padding: 0.25rem;
			color:var(--color2);
			font-size: 1.5rem;
		}
	}
	.body {
		padding: 0 2rem;
		display:flex;
		flex-direction: column;
		gap:0.75rem;

		a {
			transition: all 0.3s;
			& > div:nth-child(2) {
				flex:1 1 auto;
				display:flex;
				flex-direction: column;
			}

			display:flex;
			align-items: center;
			gap: 1rem;
			background: var(--contact-item-bg);
			padding: 1rem;
			border:1px solid var(--contact-border);
			border-radius: 1rem;
			cursor:pointer;
			.icon {
				transition: all 0.3s;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 2.5rem;
				aspect-ratio: 1/1;
				border-radius: 50%;
				border:1px solid var(--contact-border);
				background: var(--contact-bg);
				i {
					transition: all 0.3s;
					color:var(--contact-color2);
					font-size: 1.25rem;
  					line-height: 1.75rem;
				}
			}
			.text {

				flex: 1 1 0%;
				display:flex;
				justify-content: space-between;
				label {
					transition: all 0.3s;
					transition: all 0.3s;
					font-weight: 700;
					font-size: 0.75rem;
					line-height: normal;
					letter-spacing: 0.1em;
					text-transform: uppercase;
					color:var(--contact-color1);
				}
				i {
					transition: all 0.3s;
					line-height: normal;
					color:var(--contact-hover-icon);
					opacity:0;
				}
			}
			span {
				font-family: monospace;
				font-size: 0.75rem;
  				line-height: 1rem;
				color:var(--contact-color2);
				
			}

			&:hover {
				border-color: var(--contact-hover-border);
				background:var(--contact-hover-bg);
				i {
					color: var(--contact-hover-icon);
				}
				.text {
					label {
						color:var(--contact-hover-color1);
					}
					i {
						opacity:1;
						}
					span {
						color:var(--contact-hover-color2);
					}
				}
			}

		}
	}
	.footer {
		margin-top: 2rem;
  		text-transform: uppercase;
		font-weight: 700;
		font-size: 9px;
		letter-spacing: 0.2em;
		color:var(--contact-color2);
		background: var(--contact-footer-bg);
		padding:1rem 0;
		text-align: center;
		border-top:1px solid var(--contact-border);
	}
}
.body-light .menu-fixed-content .links-content .links2 i {
	color:rgb(212 212 216);
}
.menu-fixed-content.hidden {
	transform: translateX(-100%);
}
.link-hover:hover {
	color:var(--link-hover) !important;
	svg {
		fill:var(--link-hover) !important;
	}
}
.pointer {
	cursor:pointer;
}
.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.relative { position:relative; }
.absolute { position:absolute; }
span.dot {
	background:#ff3366;
	width:0.375rem;
	aspect-ratio: 1/1;
	border-radius: 50%;
}
span.eye-k {
	color:yellow;	
}
.flex-center {
	display:flex;
	align-items: center;
}
.p-color {
	color:var(--p-color);
}
.model-top {
	display:flex;
	gap:2rem;
	align-items: flex-start;
	flex-direction: row;
	background: var(--aside-bg);
	border:1px solid var(--aside-border);
	padding: 1.5rem;
	border-radius: 1rem;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
	

	.img-cont {
		width: 8rem;
		aspect-ratio: 1/1;
		border-radius: 50%;
		border:2px solid rgba(255,255,255,.1);
		overflow: hidden;
		img {
			width:100%;
			height:100%;
			object-fit: cover;
		}
	}
	.name-cont {
		h1 {
			margin-bottom:0.5rem;
		}
		span {
			display:flex;
			gap:0.25rem;
			color:var(--color2);
			font-weight: 700;
			font-size: 0.75rem;
  			line-height: 1rem;
			i { font-size:16px; }
		}
	}

	@media screen and (max-width: 768px) {
		flex-direction: column;
		align-items: center;
		.img-cont {
			width:6rem;
		}
	}
}
.tag-top {
	display:flex;
	gap:2rem;
	align-items: end;
	flex-direction: row;
	background: var(--aside-bg);
	border:1px solid var(--aside-border);
	padding: 1.5rem 1.5rem 2.5rem 1.5rem;
	border-radius: 1rem;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
	.tag-cont {
		display:flex;
		align-items: center;
		justify-content: center;
		border:2px solid rgba(255,255,255,.1);
		background-color: rgb(255 51 102 / 0.1);
		width: 60px;
		height: 60px;
		aspect-ratio: 1/1;
		border-radius: 1rem;
		i {
			font-size: 3.75rem;
			color: rgb(255 51 102);
		}
	}
	.name-cont {
		padding-bottom: 5px;
		label {
			display:inline-block;
			color:#ff3366;
			letter-spacing: 0.15em;
			text-transform: uppercase;
			font-weight: 600;
			font-size:10px;
			padding:0.25rem 0.5rem;
			background-color: rgb(255 51 102 / 0.1);
			line-height: 1rem;
			width: max-content;
			border-radius: 0.5rem;
			margin-bottom: 0.75rem;
		}
		h1 {
			margin-bottom:0.5rem;
		}
		span {
			display:flex;
			align-items: center;
			font-family: monospace;
			gap:0.25rem;
			color:var(--color2);
			font-weight: 700;
			font-size: 0.75rem;
  			line-height: 1rem;
			i { font-size:16px; }
			ins {
				width:1px;
				height:0.75rem;
				background:var(--inclusive);
				margin:0 0.5rem;
			}
			span.red {
				color:rgb(255 51 102);
			}
		}
	}
	@media screen and (max-width: 768px) {
		flex-direction: column;
		align-items: center;
		.tag-cont {
			width:6rem;
		}
		.name-cont {
			text-align: center;
			padding-top:16px;
			padding-bottom:18px;
		}
	}
}
.model-h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom:1px solid var(--border-color);
	margin-bottom:1.5rem;
	span {
		font-size: 10px;
		color:var(--color2);
		font-family: monospace;
	}
}
.iasp {
	&.asp-4-3 { a .img-container { aspect-ratio: 4/3; } }
	&.asp-2-3 { a .img-container { aspect-ratio: 2/3; } }

	display:flex;
	flex-direction: column;
	gap:1.5rem;

	&.responsive { 
		
		flex-direction: unset;
		gap:unset;
		row-gap: 2rem;
		column-gap: 1.25rem;
		display:grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		
		a {
			/*width: calc(20% - 1.25rem);*/
			width:100%;
		}
		@media screen and (max-width: 1440px) {
			/*a {	width: calc(33.33% - 1.25rem); }*/
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		@media screen and (max-width: 768px) {
			/*a { width: calc(50% - 0.625rem); }*/
			grid-template-columns: repeat(2, minmax(0, 1fr));
			row-gap:1.5rem;
			column-gap: 0.75rem;
		}


	}
	&.responsive-4 {
		flex-direction: unset;
		gap:unset;
		gap: 0.75rem;
		display:grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		a { width:100%; }
		@media screen and (max-width: 768px) {
			/*a { width: calc(50% - 0.625rem); }*/
			grid-template-columns: repeat(2, minmax(0, 1fr));
			row-gap:1.5rem;
			column-gap: 0.75rem;
		}
	}

	
	&.responsive-full {
		flex-direction: unset;
		gap:unset;
		row-gap: 2rem;
		column-gap: 1.25rem;
		display:grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		@media screen and (max-width: 1440px) { 
			grid-template-columns: repeat(4, minmax(0, 1fr)); 
		}
		@media screen and (max-width: 1024px) { 
			grid-template-columns: repeat(3, minmax(0, 1fr)); 
		}
		@media screen and (max-width: 768px) { 
			grid-template-columns: repeat(2, minmax(0, 1fr)); 
			row-gap:1.5rem;
			column-gap: 0.75rem;
		}
	}
	
	a {
		cursor:pointer;
		.img-container {
			position:relative;
			border:1px solid var(--border-color2);
			width:100%;
			border-radius: 1rem;
			overflow: hidden;
			transition: all 0.5s;
			img {
				width:100%;
				height:100%;
				object-fit: cover;
				transition: transform .5s;
				transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
			}
			div.shadow {
				position:absolute;
				left:0;
				top:0;
				right:0;
				bottom:0;
				background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
				opacity:0.6;
				transition: all 0.5s;
			}
			div.shadow-full {
				position:absolute;
				left:0;
				top:0;
				right:0;
				bottom:0;
				background: black;
				opacity:0;
				transition: all 0.5s;
			}
			div.featured-top {
				position:absolute;
				top:0.75rem;
				left:0.75rem;
				opacity:0;
				transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 75ms;
				font-weight: 700;
				font-size: 9px;
				letter-spacing: 0.1em;
				text-transform: uppercase;
				padding: 0.25rem 0.5rem;
				background-color: rgb(255 51 102 / 0.9);
				border-radius: 0.375rem;
				color:#fff;
				border:1px solid rgba(255,255,255,.1);
				width: max-content;
				box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
			}
			div.info {
				position:absolute;
				bottom:0;
				left:0;
				right:0; 
				padding: 1rem;
				transition: all 0.5s;
				div.info-tag {
						opacity:0;
						transition: all 0.5s;
						margin-bottom:0.5rem;
						font-weight: 700;
						font-size: 9px;
						letter-spacing: 0.1em;
						text-transform: uppercase;
						padding: 0.20rem 0.75rem;
						background-color: rgb(255 51 102 / 0.9);
						border-radius: 9999px;
						color:#fff;
						width: max-content;
				}
				div.info-title {
					line-height: 1.25;
					font-size: 15px;
					color:#fff;
					font-weight: 700;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					&.center { text-align: center; }
					@media screen and (max-width: 640px) {
						font-size:0.875rem;
					}
				}
				div.info-other {
					font-size: 10px;
					text-transform: uppercase;
					font-weight: 500;
					color:rgb(212 212 216);
					margin-top: 0.25rem;
				}
				div.info-name {
					text-align: center;
					letter-spacing: 0.1em;
					text-transform: uppercase;
					font-weight: 700;
					font-size: 11px;
					transition: all 0.3s;
					color:#fff;
				}
				div.info-count {
					text-align: center;
					text-transform: uppercase;
					font-weight: 500;
					font-size: 9px;
					letter-spacing: 0.1em;
					color:rgb(212 212 216);
					opacity: 0.8;
					font-family: monospace;
					transition: all 0.3s;
					margin-top:3px;
				}
			}
		}
		.eye-stars {
			display:flex;
			align-items: center;
			justify-content: space-between;
			span.eye {
				display:flex;
				align-items: center;
				gap:0.375rem;
				font-size: 0.75rem;
				font-weight: 700;
				i {
					color:rgb(113 113 122);
					font-size:16px;
				}
			}
		}
		/* Hover effects - DESKTOP ONLY (prevents stuck hover on touch devices) */
		@media (hover: hover) and (pointer: fine) {
			&:hover {
				div.img-container {
					box-shadow: 0 1px 20px rgba(0,0,0,0.2);
					transform: translateY(-5px);
					img { transform:scale(1.12); }
					div.shadow { opacity: .8; }
					div.shadow-full { opacity: .3; }
					div.featured-top {
						opacity: 1; 
					}
					div.info {
						transform:translateY(-0.5rem) ;
						div.info-tag { opacity: 1; }
						div.info-name { color:#ff3366; }
						div.info-count { color:#efefef; opacity: 1; margin-top:5px;}
					}
					div.info:not(:has(div.info-tag)) {
						div.info-title { color:#ff3366; }
						div.info-other { color:#efefef; opacity: 1; }
					}
				}
			}
		}
		/* Mobile optimization - lighter animations */
		@media screen and (max-width: 768px) {
			a {
				/* Always show info on mobile (no hover needed) */
				div.img-container {
					div.info {
						div.info-tag { opacity: 0.9; }
					}
				}
			}
		}
	}
	
}
/* Center alignment for channels page only */
.iasp.responsive-full div.info:not(:has(div.info-tag)) {
	div.info-title { text-align: center; }
	div.info-other { text-align: center; }
}
span.stars {
	--empty:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23ff3366%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M288.1-32c9%200%2017.3%205.1%2021.4%2013.1L383%20125.3%20542.9%20150.7c8.9%201.4%2016.3%207.7%2019.1%2016.3s.5%2018-5.8%2024.4L441.7%20305.9%20467%20465.8c1.4%208.9-2.3%2017.9-9.6%2023.2s-17%206.1-25%202L288.1%20417.6%20143.8%20491c-8%204.1-17.7%203.3-25-2s-11-14.2-9.6-23.2L134.4%20305.9%2020%20191.4c-6.4-6.4-8.6-15.8-5.8-24.4s10.1-14.9%2019.1-16.3l159.9-25.4%2073.6-144.2c4.1-8%2012.4-13.1%2021.4-13.1zm0%2076.8L230.3%20158c-3.5%206.8-10%2011.6-17.6%2012.8l-125.5%2020%2089.8%2089.9c5.4%205.4%207.9%2013.1%206.7%2020.7l-19.8%20125.5%20113.3-57.6c6.8-3.5%2014.9-3.5%2021.8%200l113.3%2057.6-19.8-125.5c-1.2-7.6%201.3-15.3%206.7-20.7l89.8-89.9-125.5-20c-7.6-1.2-14.1-6-17.6-12.8L288.1%2044.8z%22%2F%3E%3C%2Fsvg%3E");
	--full:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23ff3366%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M309.5-18.9c-4.1-8-12.4-13.1-21.4-13.1s-17.3%205.1-21.4%2013.1L193.1%20125.3%2033.2%20150.7c-8.9%201.4-16.3%207.7-19.1%2016.3s-.5%2018%205.8%2024.4l114.4%20114.5-25.2%20159.9c-1.4%208.9%202.3%2017.9%209.6%2023.2s16.9%206.1%2025%202L288.1%20417.6%20432.4%20491c8%204.1%2017.7%203.3%2025-2s11-14.2%209.6-23.2L441.7%20305.9%20556.1%20191.4c6.4-6.4%208.6-15.8%205.8-24.4s-10.1-14.9-19.1-16.3L383%20125.3%20309.5-18.9z%22%2F%3E%3C%2Fsvg%3E");
	--half:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23ff3366%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M288.1%20353.6c10%200%2019.9%202.3%2029%207l74.4%2037.9-13-82.5c-3.2-20.2%203.5-40.7%2017.9-55.2l59-59.1-82.5-13.1c-20.2-3.2-37.7-15.9-47-34.1l-38-74.4%200%20273.6zM457.4%20489c-7.3%205.3-17%206.1-25%202L288.1%20417.6%20143.8%20491c-8%204.1-17.7%203.3-25-2s-11-14.2-9.6-23.2L134.4%20305.9%2020%20191.4c-6.4-6.4-8.6-15.8-5.8-24.4s10.1-14.9%2019.1-16.3l159.9-25.4%2073.6-144.2c4.1-8%2012.4-13.1%2021.4-13.1s17.3%205.1%2021.4%2013.1L383%20125.3%20542.9%20150.7c8.9%201.4%2016.3%207.7%2019.1%2016.3s.5%2018-5.8%2024.4L441.7%20305.9%20467%20465.8c1.4%208.9-2.3%2017.9-9.6%2023.2z%22%2F%3E%3C%2Fsvg%3E");
	display:inline-flex;
	gap:3px;
	span.star { 
		width: 9px; 
		&:before {
			content:var(--full);
		}
	}
	&.v0 span{ &:before { content:var(--empty); } } 
	&.v1 {
		span:nth-last-child(-n+4) { &:before { content:var(--empty); } }
		span:nth-child(1) { &:before { content:var(--half); } }
	}
	&.v2 { span:nth-last-child(-n+4) { &:before { content:var(--empty); } } }
	&.v3 {
		span:nth-last-child(-n+3) { &:before { content:var(--empty); } }
		span:nth-child(2) { &:before { content:var(--half); } }
	}
	&.v4 { span:nth-last-child(-n+3) { &:before { content:var(--empty); } } }
	&.v5 {
		span:nth-last-child(-n+2) { &:before { content:var(--empty); } }
		span:nth-child(3) { &:before { content:var(--half); } }
	}
	&.v6 { span:nth-last-child(-n+2) { &:before { content:var(--empty); } } }
	&.v7 {
		span:nth-last-child(-n+1) { &:before { content:var(--empty); } }
		span:nth-child(4) { &:before { content:var(--half); } }
	}
	&.v8 { span:nth-last-child(-n+1) { &:before { content:var(--empty); } } }
	&.v9 span:nth-last-child(-n+1) { &:before { content:var(--half); } }
}
i {
	font-style: normal;
	font-family: 'Symbols';
	font-weight: 400;
}
/*---------------------------------------------------------------------------*/
.footer {
	
	background-color: var(--footerbg);
	border-top:1px solid var(--footerborder);
	padding:2rem 0;
	.footer-content {
		text-align: center;
		.footer-nav {
			display:flex;
			justify-content: center;
			gap: 3rem;
			a {
				text-transform: uppercase;
				font-weight: 700;
				font-size:11px;
				letter-spacing: 0.15em;
				color:var(--color2);
				transition: all 0.15s;
			}
			a.active {
				color:var(--color) !important;
			}
		}
		p {
			letter-spacing: 0.2em;
			color:var(--color2);
			font-weight: 700;
			font-size:9px;
			padding-top:3rem;
			text-align: center;
		}
		@media screen and (max-width: 768px) {
			p { padding-top:1.25rem; }
		}
	}
}
.go-to-top {
	position:fixed;
	display:flex;
	justify-content: center;
	align-items: center;
	width:3rem;
	height:3rem;
	right:2rem;
	bottom:2rem;
	border-radius: 50%;
	z-index: 50;
	background: #ff3366;
	color:#fff;
	transition: all .3s;
	box-shadow: 0 0 20px rgba(222,25,17,.5);
	cursor:pointer;
	i {
		font-size: 1.5rem;
		font-weight: 700;
	}
	@media (hover: hover) and (pointer: fine) {
		&:hover {
			transform: scale(1.1);
		}
	}
	&.hidden { display:none; }
}
.image-viewer {
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	width:100%;
	background:rgba(0,0,0,.95);
	
	display:flex;
	align-items: center;
	justify-content: center;
	z-index:100;

	.close-btn {
		position:absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width:40px;
		aspect-ratio: 1/1;
		border-radius: 50%;
		color:rgb(161 161 170);
		z-index: 50;
		top:1rem;
		right:1rem;
		font-size: 1.875rem;
		cursor:pointer;
		background:rgba(0,0,0,.2);
		transition: all 0.25s;
		user-select: none;
		@media (hover:hover) {
			&:hover {
				background:rgba(255,255,255,.1); ;
			}
		}
	}
	.btn {
		position:absolute;
		display:flex;
		width:60px;
		aspect-ratio: 1/1;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		color:rgb(212 212 216);
		z-index: 50;
		font-size: 2.25rem;
    	line-height: 2.5rem;
		cursor:pointer;
		background:rgba(0,0,0,.2);
		transition: all 0.25s;
		user-select: none;
		@media (hover:hover) {
			&:hover {
				background:rgba(255,255,255,.1); ;
			}
		}
		
	}
	.btn.left {
		left:1rem;
	}
	.btn.right {
		right:1rem;
	}
	.img-container {
		padding:1rem;
		width:100%;
		height:100%;
		padding:3rem;
		display:flex;
		justify-content: center;
		align-items: center;
		position:relative;
		img {
			object-fit: contain;
			border-radius: 0.125rem;
			user-select: none;
			max-width: 100%;
			max-height: 100%;
			height:auto;
			transition: transform 0.1s;
		}
		a {
			display:flex;
			align-items: center;
			justify-content: space-between;
			padding:0.625rem 1.25rem;
			background: rgba(0,0,0,.6);
			border:1px solid rgba(255,255,255,.1);
			border-radius: 9999px;
			gap:1rem;
			position:absolute;
			bottom: 5rem;
			cursor:pointer;
			span {
				color: rgb(212 212 216);
				letter-spacing: 0.05em;
				font-size:9px;
				font-weight: 700;
				text-transform: uppercase;
			}
			label {
				color:#fff;
				font-size:10px;
				font-weight: 900;
				text-transform: uppercase;
			}
			i { 
				transition: all 0.25s;
				color:rgb(161 161 170); 
			}
			&:hover {
				i { color:#fff; }	
			}
		}
		.counter {
			position:absolute;
			bottom:1.0rem;
			color:#fff;	
			font-size: 0.75rem;
			line-height: 1rem;
			font-weight: 700;
			font-family: monospace;
			padding:0.25rem 1rem;
			background:rgba(0,0,0,.5);
			border:1px solid rgba(255,255,255,.2);
			border-radius: 9999px;
		}
		/* Lightbox loading spinner - shown while image loads */
		.lightbox-spinner {
			display: none;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 2rem;
			height: 2rem;
			border: 2px solid rgba(255,255,255,.15);
			border-top-color: #ff3366;
			border-radius: 50%;
			z-index: 10;
			pointer-events: none;
		}
		.lightbox-spinner.active {
			display: block;
			animation: lbspin .6s linear infinite;
		}
	}
	&.hidden {
		display: none;
	}
	@media screen and (max-width: 768px) {
		.img-container {
			padding:1rem;
		}
		.btn {
			width:40px;
			font-size: 1.875rem;
  			line-height: 2.25rem;
			&.left { left:0.5rem; }
			&.right { right:0.5rem; }
		}
		.img-container .counter { bottom:1.5rem; }
		
	}
}
/* Lightbox spinner animation */
@keyframes lbspin { to { transform: translate(-50%, -50%) rotate(360deg); } }
h1 {
	margin-bottom: 0.75rem;
	font-size: 1.875rem;
	line-height: 2.25rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 900;
	color:var(--color);
}
h2 {
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
	line-height: 2rem;
	margin-bottom: 0.75rem;
	gap: 0.75rem;
	color:#ff3366;
	display:flex;
	i {
		font-size:1.5rem;
	}
	
}
p {
	line-height: 1.5;
	font-weight: 500;
	font-size: 0.875rem;
	text-align: justify;
	margin-bottom:0.5rem;
	color:var(--p-color);
}
h2 {
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
	line-height: 2rem;
	margin-bottom: 0.75rem;
	gap: 0.75rem;
	color:#ff3366;
	display:flex;
	i {
		font-size:1.5rem;
	}
	
}
@media screen and (max-width: 768px) {
	h1 {
		font-size: 1.5rem;
		line-height: 1;
	}
}/* ============================================================================
   SEO-COMPLIANT GALLERY DESCRIPTION STYLES
   Added: 2025-01-31
   Purpose: Google Manual Review compliance
   
   Copy this ENTIRE block and paste at the END of your style.css file
   ============================================================================ */

/* Main container for SEO description */
.gw-desc .right.seo-description {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
	max-width: 538px !important;
	position: relative !important;
}

/* H3 Heading - "Gallery Review" */
.gw-desc .right.seo-description h3 {
	font-size: 18px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--color) !important;
	margin-bottom: 0.75rem !important;
	display: block !important;
}

/* Description text - SEO compliant (16px minimum) */
.gw-desc .right.seo-description .desc-text {
	font-size: 16px !important;
	font-weight: 300 !important;
	font-style: normal !important;
	line-height: 1.6 !important;
	text-align: left !important;
	color: var(--color) !important;
	margin: 0 !important;
	display: block !important;
	overflow: hidden !important;
	transition: max-height 0.3s ease !important;
}

/* Collapsed state - shows first 15 lines */
.gw-desc .right.seo-description .desc-text.collapsed {
	max-height: 24rem !important;
	position: relative !important;
}

/* Gradient fade effect for collapsed text */
.gw-desc .right.seo-description .desc-text.collapsed::after {
	content: '' !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 4rem !important;
	background: linear-gradient(to bottom, transparent, var(--bg-color)) !important;
	pointer-events: none !important;
}

/* First line bold - SEO requirement */
.gw-desc .right.seo-description .desc-text::first-line {
	font-weight: 700 !important;
}

/* Override .right p styles for fallback text inside desc-text */
.gw-desc .right.seo-description .desc-text p {
	font-size: 16px !important;
	font-weight: 300 !important;
	font-style: normal !important;
	line-height: 1.6 !important;
	color: var(--color) !important;
	max-height: unset !important;
	margin: 0 !important;
}

/* Read More button - matches site link style */
.gw-desc .right.seo-description .read-more-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.35rem !important;
	margin-top: 0.75rem !important;
	cursor: pointer !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	color: var(--aside-links-color) !important;
	transition: all 0.3s ease !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	text-decoration: none !important;
}

/* Read More hover effect */
.gw-desc .right.seo-description .read-more-btn:hover {
	color: #ff3366 !important;
	text-decoration: underline !important;
}

/* Read More icon */
.gw-desc .right.seo-description .read-more-btn i {
	font-size: 1rem !important;
	transition: transform 0.3s ease, color 0.3s ease !important;
	color: inherit !important;
}

/* Icon rotation when expanded */
.gw-desc .right.seo-description .read-more-btn.expanded i {
	transform: rotate(180deg) !important;
}

/* Hidden button for short text */
.gw-desc .right.seo-description .read-more-btn.hidden {
	display: none !important;
}

/* ============================================================================
   LIGHTBOX LINK FIX
   Purpose: Ensures entire link is clickable including channel name
   ============================================================================ */

.image-viewer .img-container a {
	justify-content: flex-start !important;
	gap: 0.5rem !important;
	width: auto !important;
	min-width: auto !important;
	max-width: none !important;
	display: flex !important;
	pointer-events: auto !important;
}

.image-viewer .img-container a span,
.image-viewer .img-container a label {
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
	pointer-events: auto !important;
	cursor: pointer !important;
}

.image-viewer .img-container a label {
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	padding: 0 !important;
}

.image-viewer .img-container a i {
	flex-shrink: 0 !important;
	pointer-events: auto !important;
}

/* ============================================================================
   END OF SEO GALLERY DESCRIPTION STYLES
   ============================================================================ */

/* ============================================================================
   TAG PAGE - COMPACT HASHTAG HEADER
   Purpose: Reduces spacing and sizing in tag-top section for compact look
   Note: Keeps the fancy hashtag icon + "TRENDING HASHTAG" label design
   Added: 2025-02-03
   ============================================================================ */

.tag-top {
	gap: 1rem !important;
	padding: 1rem !important;
}

.tag-top .tag-cont {
	width: 48px !important;
	height: 48px !important;
	border-radius: 0.75rem !important;
}

.tag-top .tag-cont i {
	font-size: 2.5rem !important;
}

.tag-top .name-cont {
	padding-bottom: 0 !important;
}

.tag-top .name-cont label {
	font-size: 9px !important;
	padding: 0.2rem 0.4rem !important;
	margin-bottom: 0.5rem !important;
}

.tag-top .name-cont h1 {
	margin-bottom: 0.25rem !important;
}

@media screen and (max-width: 768px) {
	.tag-top {
		flex-direction: row !important;
		align-items: center !important;
		gap: 0.75rem !important;
		padding: 0.875rem !important;
	}
	
	.tag-top .tag-cont {
		width: 48px !important;
		height: 48px !important;
	}
	
	.tag-top .name-cont {
		text-align: left !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	
	.tag-top .name-cont h1 {
		font-size: 1.5rem !important;
		line-height: 1 !important;
	}
}

/* ============================================================================
   END OF COMPACT HASHTAG HEADER
   ============================================================================ */

/* ============================================================================
   GOOGLE MOBILE-FRIENDLY STANDARDS - Tap Targets & Font Minimum
   Added: 2025-02-05
   Purpose: Meet Google 48px/44px tap target + 12px font minimum
   ============================================================================ */

/* Hamburger icon - tap target 48x48px */
.header-left .menu-btn {
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
}

/* Close (X) button - tap target 44x44px */
.menu-fixed-content .header .btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Top nav links (home, galleries...) - tap target 44px */
.menu-fixed-content .links-content .top a {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Accordion parent buttons - tap target 44px */
.menu-fixed-content .links-content .links .links-btn {
    min-height: 44px;
}

/* Submenu links - tap target 44px + font 11px → 12px (Google minimum) */
.menu-fixed-content .links-content .links2 a {
    min-height: 44px;
    font-size: 12px;
}

/* ============================================================================
   MOBILE MENU - Replace default blue tap highlight with pink brand color
   ============================================================================ */

/* Hamburger button in header - pink tap */
.header-left .menu-btn {
    -webkit-tap-highlight-color: rgba(255, 51, 102, 0.25);
}

/* All interactive elements inside mobile menu - pink tap */
.menu-fixed-content a,
.menu-fixed-content .btn,
.menu-fixed-content .links-btn {
    -webkit-tap-highlight-color: rgba(255, 51, 102, 0.25);
}

/* Pink hover for desktop */
.menu-fixed-content .links-content .top a:hover {
    color: #ff3366;
}

.menu-fixed-content .links-content .links .links-btn:hover label {
    color: #ff3366;
}

.menu-fixed-content .links-content .links2 a:hover {
    color: #ff3366;
}

/* ============================================================================
   END OF GOOGLE STANDARDS & TAP HIGHLIGHT FIX
   ============================================================================ */

/* ============================================================================
   MOBILE: Hide last gallery in "More from" section for even 2-column grid
   Shows 14 items (2x7) instead of 15 on mobile. Uses content-visibility
   combined with existing loading="lazy" to prevent image download.
   Added: 2025-02-05
   ============================================================================ */

@media screen and (max-width: 768px) {
    .more-from > a:last-child {
        content-visibility: hidden;
        height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: 0;
    }
}

/* ============================================================================
   END OF MOBILE MORE-FROM FIX
   ============================================================================ */

/* Screen reader only - visible to search engines and assistive tech */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ============================================================================
   MODEL BIO SECTION — Option A: 3-Column Grid
   Purpose: Displays performer bio data from server-side variables
   Location: model.jsp - between content-top and content-content
   Added: 2026-02-08
   ============================================================================ */

.model-bio-section {
	margin-bottom: 1.75rem;
}

.model-bio {
	background: var(--aside-bg);
	border: 1px solid var(--aside-border);
	border-radius: 1rem;
	padding: 1rem 1.25rem;
}

.model-bio-data {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.bio-item {
	padding: 0.375rem 0.5rem;
	border-bottom: 1px solid var(--border-color3);
}

.bio-item:nth-last-child(-n+3) {
	border-bottom: none;
}

.bio-item-full {
	grid-column: 1 / -1;
	border-bottom: none;
}

.bio-lbl {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color3);
	line-height: 1;
	margin-bottom: 0.15rem;
}

.bio-val {
	font-size: 11.5px;
	font-weight: 400;
	color: var(--color);
	line-height: 1.3;
}

@media screen and (max-width: 768px) {
	.model-bio {
		padding: 0.75rem 1rem;
	}

	.model-bio-data {
		grid-template-columns: repeat(2, 1fr);
	}

	.bio-item:nth-last-child(-n+3) {
		border-bottom: 1px solid var(--border-color3);
	}

	.bio-item:nth-last-child(-n+2) {
		border-bottom: none;
	}

	.bio-item-full:last-child {
		border-bottom: none;
	}

	.model-bio-section {
		margin-bottom: 0.5rem;
	}
}

/* ============================================================================
   END OF MODEL BIO SECTION
   ============================================================================ */