:root {
	--tve-accent: #f7ff3c;
	--tve-hero-height: 340px;
	--tve-overlay: .72;
	--tve-content-width: 1180px;
	--tve-surface: .82;
	--tve-card-min: 220px;
	--tve-hero-image: none;
	--tve-page-bg: #000000;
	--tve-text-color: #ffffff;
}

body.tv-endpoints-page {
	color: var(--tve-text-color);
	background-color: var(--tve-page-bg);
}

.tve-template-source[hidden] { display: none !important; }

.tve-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: end;
	width: 100%;
	min-height: var(--tve-hero-height);
	margin: 0;
	color: #fff;
	background-color: #080808;
	background-image:
		linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, var(--tve-overlay)) 54%, rgba(0, 0, 0, .35) 100%),
		var(--tve-hero-image);
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

.tve-hero--fallback {
	background-image: linear-gradient(100deg, #050505 0%, #080808 45%, color-mix(in srgb, var(--tve-accent) 38%, #050505) 100%);
}

.tve-hero::after {
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tve-accent) 78%, transparent), transparent);
	box-shadow: 0 0 18px color-mix(in srgb, var(--tve-accent) 28%, transparent);
	content: "";
}

.tve-hero__texture {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 74% 32%, color-mix(in srgb, var(--tve-accent) 13%, transparent), transparent 34%),
		repeating-linear-gradient(120deg, transparent 0 24px, rgba(255, 255, 255, .018) 25px 26px);
	pointer-events: none;
}

.tve-hero__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	width: min(100% - 40px, var(--tve-content-width));
	margin: 0 auto;
	padding: 54px 0 44px;
}

.tve-hero__avatar {
	flex: 0 0 118px;
	width: 118px;
	height: 118px;
	padding: 4px;
	border: 1px solid color-mix(in srgb, var(--tve-accent) 74%, transparent);
	border-radius: 50%;
	background: rgba(0, 0, 0, .68);
	box-shadow: 0 0 24px color-mix(in srgb, var(--tve-accent) 25%, transparent), inset 0 0 0 3px #050505;
}

.tve-hero__avatar img,
.tve-hero__avatar-image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	border-radius: 50% !important;
	object-fit: cover;
}

.tve-hero__copy { min-width: 0; max-width: 760px; }
.tve-hero__eyebrow { margin: 0 0 10px; color: var(--tve-accent); font-size: 12px; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
.tve-hero h1 { margin: 0; color: var(--tve-text-color); font-size: clamp(32px, 6vw, 64px); font-weight: 900; line-height: 1.02; letter-spacing: 0; overflow-wrap: anywhere; }
.tve-hero__intro { max-width: 640px; margin: 16px 0 0; color: color-mix(in srgb, var(--tve-text-color) 75%, transparent); font-size: 16px; line-height: 1.6; }
.tve-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }

.tve-hero__endpoint,
.tve-hero__profile-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 42px;
	padding: 0 17px;
	border: 1px solid color-mix(in srgb, var(--tve-accent) 58%, transparent);
	border-radius: 999px;
	color: #050505;
	background: var(--tve-accent);
	box-shadow: 0 0 16px color-mix(in srgb, var(--tve-accent) 24%, transparent);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: uppercase;
}

.tve-hero__endpoint i { width: 8px; height: 8px; border-radius: 50%; background: #050505; box-shadow: 0 0 0 4px rgba(5, 5, 5, .12); }
.tve-hero__profile-link { color: #fff; background: rgba(5, 5, 5, .72); }
.tve-hero__profile-link:hover,
.tve-hero__profile-link:focus-visible { color: #050505; background: #fff; }

body.tv-endpoints-page .tve-native-content {
	box-sizing: border-box;
	width: min(calc(100% - 32px), var(--tve-content-width));
	max-width: var(--tve-content-width);
	margin: 28px auto calc(150px + env(safe-area-inset-bottom, 0px));
	padding: clamp(18px, 3vw, 34px);
	border: 1px solid color-mix(in srgb, var(--tve-accent) 22%, transparent);
	border-radius: 8px;
	color: var(--tve-text-color);
	background: rgba(13, 13, 13, var(--tve-surface));
	box-shadow: 0 18px 60px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .04);
	backdrop-filter: blur(14px);
}

body.tv-endpoints-page .tve-native-content :is(h1, h2, h3, h4, p, span, strong, small) { color: inherit; letter-spacing: 0; }
body.tv-endpoints-page .tve-native-content :is(a, .active, .current) { color: var(--tve-accent); }
body.tv-endpoints-page .tve-native-content :is(button, .button, input[type="submit"], input[type="button"]) { border-color: var(--tve-accent); border-radius: 999px; }
body.tv-endpoints-page .tve-native-content :is(input, select, textarea) { max-width: 100%; border: 1px solid rgba(255, 255, 255, .17); border-radius: 6px; color: #fff; background: rgba(0, 0, 0, .62); }
body.tv-endpoints-page .tve-native-content :is(.grid, .items, .cards, .members, .tracks, .favorites, .stations) { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tve-card-min)), 1fr)); }
body.tv-endpoints-page .tve-native-content :is(.card, .item, article, li) { border-color: rgba(255, 255, 255, .09); }

body.tv-endpoints-page.tve-hide-native-identity .tve-native-content .tve-native-identity--hidden,
body.tv-endpoints-page.tve-hide-native-identity .tve-native-content :is(
	#item-header-avatar,
	#item-header,
	.profile-avatar,
	.profile-identity,
	.profile-summary,
	.user-avatar,
	.user-identity,
	.author-avatar,
	.author-identity,
	.profile-header .avatar,
	.user-header .avatar,
	.author-header .avatar,
	.profile-cover .avatar
) { display: none !important; }

@media (max-width: 700px) {
	.tve-hero { min-height: min(var(--tve-hero-height), 390px); background-image: linear-gradient(0deg, rgba(0, 0, 0, .96), rgba(0, 0, 0, var(--tve-overlay))), var(--tve-hero-image); }
	.tve-hero--fallback { background-image: linear-gradient(145deg, #050505 0%, #090909 52%, color-mix(in srgb, var(--tve-accent) 34%, #050505) 100%); }
	.tve-hero__inner { align-items: flex-end; gap: 16px; width: calc(100% - 28px); padding: 40px 0 28px; }
	.tve-hero__avatar { flex-basis: 76px; width: 76px; height: 76px; }
	.tve-hero h1 { font-size: clamp(28px, 10vw, 44px); }
	.tve-hero__intro { font-size: 14px; line-height: 1.5; }
	body.tv-endpoints-page .tve-native-content { width: calc(100% - 16px); margin-top: 12px; padding: 16px 14px; }
}

@media (max-width: 440px) {
	.tve-hero__inner { display: block; }
	.tve-hero__avatar { margin-bottom: 18px; }
	.tve-hero__meta { gap: 8px; }
	.tve-hero__endpoint,
	.tve-hero__profile-link { min-height: 38px; padding: 0 13px; }
}