:root {
	--tts-swipe-viewport-height: 100svh;
}

body.tts-has-swipe-home {
	overflow-x: hidden;
	background: #050709;
}

.tts-has-swipe-home .tts-site-header {
	position: fixed;
	z-index: 50;
	inset: 0 0 auto;
	border: 0;
	color: #fff;
	background: linear-gradient(180deg, rgba(4, 7, 9, 0.78), rgba(4, 7, 9, 0));
	backdrop-filter: none;
}

.admin-bar.tts-has-swipe-home .tts-site-header {
	top: 32px;
}

.tts-has-swipe-home .tts-site-title a,
.tts-has-swipe-home .tts-primary-menu a,
.tts-has-swipe-home .tts-header-search,
.tts-has-swipe-home .tts-site-description {
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.tts-has-swipe-home .tts-nav-toggle {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(4, 7, 9, 0.48);
}

.tts-swipe-home {
	--tts-swipe-overlay: 0.72;
	min-height: var(--tts-swipe-viewport-height);
	padding: 0;
	color: #fff;
	background: #050709;
}

.tts-swipe-feed {
	position: relative;
	height: var(--tts-swipe-viewport-height);
	overflow: hidden;
}

.tts-swipe-feed--embedded {
	--tts-swipe-embedded-height: clamp(32rem, 78vh, 48rem);
	height: var(--tts-swipe-embedded-height);
	margin-block: var(--tts-space-6);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--tts-radius-medium);
	box-shadow: var(--tts-shadow-card);
}

.tts-swipe-feed--embedded .tts-swipe-feed__scroller,
.tts-swipe-feed--embedded .tts-swipe-card,
.tts-swipe-feed--embedded .tts-swipe-state {
	height: var(--tts-swipe-embedded-height);
	min-height: var(--tts-swipe-embedded-height);
}

.tts-swipe-feed__scroller {
	width: 100%;
	height: var(--tts-swipe-viewport-height);
	overflow-x: hidden;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	overscroll-behavior-y: auto;
	scrollbar-width: none;
	background: #050709;
}

.tts-swipe-feed__scroller::-webkit-scrollbar {
	display: none;
}

.tts-swipe-card {
	position: relative;
	width: 100%;
	height: var(--tts-swipe-viewport-height);
	min-height: var(--tts-swipe-viewport-height);
	overflow: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	background: #111820;
	isolation: isolate;
}

.tts-swipe-card__media,
.tts-swipe-card__gradient {
	position: absolute;
	inset: 0;
}

.tts-swipe-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tts-swipe-card__placeholder {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	color: rgba(255, 255, 255, 0.38);
	background:
		radial-gradient(circle at 20% 20%, rgba(15, 118, 110, 0.7), transparent 42%),
		linear-gradient(145deg, #16242b, #090d10);
}

.tts-swipe-card__placeholder span {
	font-size: clamp(8rem, 40vw, 32rem);
	font-weight: 900;
	line-height: 1;
}

.tts-swipe-card__gradient {
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 32%),
		linear-gradient(0deg, rgba(2, 5, 7, var(--tts-swipe-overlay)) 0%, rgba(2, 5, 7, 0.55) 28%, transparent 68%);
	pointer-events: none;
}

.tts-swipe-card__content {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	width: min(100%, 72rem);
	padding: 8rem clamp(1.25rem, 5vw, 5rem) max(4.5rem, calc(2.5rem + env(safe-area-inset-bottom)));
	color: #fff;
}

.tts-swipe-card__utility {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.tts-swipe-card__category {
	display: inline-flex;
	padding: 0.35rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	color: #fff;
	background: rgba(5, 7, 9, 0.32);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	backdrop-filter: blur(10px);
}

.tts-swipe-card h2 {
	max-width: 15ch;
	margin: 0.8rem 0 0;
	color: #fff;
	font-size: clamp(2rem, 6vw, 5.5rem);
	line-height: 0.98;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.34);
}

.tts-swipe-card__excerpt {
	display: -webkit-box;
	max-width: 48rem;
	margin: 1rem 0 0;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(0.95rem, 1.5vw, 1.15rem);
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.tts-swipe-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.9rem;
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.78rem;
}

.tts-swipe-card__read {
	display: inline-flex;
	min-height: 2.8rem;
	padding: 0.65rem 1rem;
	margin-top: 1.1rem;
	align-items: center;
	gap: 0.65rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	color: #fff;
	background: rgba(5, 7, 9, 0.42);
	font-size: 0.88rem;
	font-weight: 800;
	text-decoration: none;
	backdrop-filter: blur(12px);
}

.tts-swipe-card__utility .tts-swipe-card__read {
	margin-top: 0;
	margin-left: auto;
}

.tts-swipe-card__read:hover {
	color: #fff;
	background: rgba(15, 118, 110, 0.8);
}

.tts-swipe-progress,
.tts-swipe-controls,
.tts-swipe-guide,
.tts-swipe-fallback {
	position: fixed;
	z-index: 45;
}

.tts-swipe-feed--embedded .tts-swipe-progress,
.tts-swipe-feed--embedded .tts-swipe-controls,
.tts-swipe-feed--embedded .tts-swipe-guide {
	position: absolute;
}

.tts-swipe-feed--embedded .tts-swipe-progress {
	top: 1rem;
}

.tts-swipe-feed--embedded .tts-swipe-controls {
	bottom: 4.5rem;
}

.tts-swipe-feed--embedded .tts-swipe-guide {
	bottom: 1rem;
}

.tts-swipe-progress {
	top: max(5.2rem, calc(4.5rem + env(safe-area-inset-top)));
	right: max(1rem, env(safe-area-inset-right));
	padding: 0.42rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	color: #fff;
	background: rgba(5, 7, 9, 0.38);
	font-size: 0.76rem;
	font-weight: 750;
	backdrop-filter: blur(12px);
}

.tts-swipe-controls {
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(5.25rem, calc(4rem + env(safe-area-inset-bottom)));
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tts-swipe-controls button {
	display: grid;
	width: 2.9rem;
	height: 2.9rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	place-items: center;
	color: #fff;
	background: rgba(5, 7, 9, 0.44);
	font-size: 1.2rem;
	backdrop-filter: blur(12px);
}

.tts-swipe-controls button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.tts-swipe-guide {
	bottom: max(1.4rem, env(safe-area-inset-bottom));
	left: 50%;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.8rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	color: #fff;
	background: rgba(5, 7, 9, 0.42);
	font-size: 0.76rem;
	transform: translateX(-50%);
	backdrop-filter: blur(12px);
	animation: tts-swipe-guide 1.6s ease-in-out infinite;
}

.tts-swipe-guide p {
	margin: 0;
	white-space: nowrap;
}

.tts-swipe-fallback {
	bottom: max(1rem, env(safe-area-inset-bottom));
	left: max(1rem, env(safe-area-inset-left));
	display: flex;
	gap: 0.5rem;
}

.tts-swipe-fallback a {
	padding: 0.55rem 0.8rem;
	border-radius: 999px;
	color: #fff;
	background: rgba(5, 7, 9, 0.72);
	font-size: 0.8rem;
}

.tts-swipe-enhanced .tts-swipe-fallback {
	display: none;
}

.tts-swipe-state {
	display: flex;
	width: 100%;
	height: var(--tts-swipe-viewport-height);
	min-height: var(--tts-swipe-viewport-height);
	padding: 2rem;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	scroll-snap-align: start;
	text-align: center;
	background:
		radial-gradient(circle at 50% 20%, rgba(15, 118, 110, 0.35), transparent 45%),
		#080d11;
}

.tts-swipe-state h2,
.tts-swipe-state h3,
.tts-swipe-state p {
	max-width: 32rem;
	margin: 0.4rem 0;
	color: #fff;
}

.tts-swipe-state p {
	color: rgba(255, 255, 255, 0.7);
}

.tts-swipe-spinner {
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 1rem;
	border: 3px solid rgba(255, 255, 255, 0.2);
	border-top-color: #fff;
	border-radius: 50%;
	animation: tts-swipe-spin 0.8s linear infinite;
}

.tts-swipe-sentinel {
	width: 100%;
	height: 1px;
}

.tts-swipe-empty {
	display: flex;
	width: min(100% - 2rem, 42rem);
	height: var(--tts-swipe-viewport-height);
	margin-inline: auto;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

.tts-swipe-empty h1,
.tts-swipe-empty h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(2.5rem, 8vw, 5rem);
}

.tts-swipe-empty > p:not(.tts-eyebrow) {
	color: rgba(255, 255, 255, 0.68);
}

.tts-has-swipe-home .tts-site-footer {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.12);
	background: #080d11;
}

/*
 * App split card
 *
 * The supplied Short News App uses a rounded image at the top, followed by a
 * category/action row, headline, summary, and source/date on a clean surface.
 * The immersive photo-overlay style remains available as a theme option.
 */
.tts-swipe-style-app,
.tts-swipe-home--style-app,
.tts-swipe-feed--style-app,
.tts-swipe-feed--style-app .tts-swipe-feed__scroller {
	background: var(--tts-color-canvas);
}

.tts-swipe-feed--style-app .tts-swipe-card {
	display: grid;
	grid-template-rows: var(--tts-swipe-image-height, 31%) minmax(0, 1fr);
	padding: 0.75rem;
	color: var(--tts-color-ink);
	background: var(--tts-color-surface);
}

.tts-swipe-feed--style-app .tts-swipe-card__media {
	position: relative;
	inset: auto;
	overflow: hidden;
	border-radius: var(--tts-radius-large);
	background: #111820;
	box-shadow: var(--tts-shadow-card);
}

.tts-swipe-feed--style-app .tts-swipe-card__media img {
	display: block;
}

.tts-swipe-feed--style-app .tts-swipe-card__gradient {
	display: none;
}

.tts-swipe-feed--style-app .tts-swipe-card__content {
	position: relative;
	inset: auto;
	display: flex;
	width: 100%;
	min-height: 0;
	padding: 0.85rem 0.45rem max(0.75rem, env(safe-area-inset-bottom));
	overflow: hidden;
	flex-direction: column;
	color: var(--tts-color-ink);
}

.tts-swipe-feed--style-app .tts-swipe-card__utility {
	min-height: 2.2rem;
}

.tts-swipe-feed--style-app .tts-swipe-card__category {
	padding: 0.32rem 0.85rem;
	border: 0;
	color: #fff;
	background: var(--tts-color-accent);
	font-size: 0.82rem;
	font-weight: 650;
	letter-spacing: 0;
	text-transform: none;
	backdrop-filter: none;
	box-shadow: 0 6px 18px rgba(15, 118, 110, 0.2);
}

.tts-swipe-feed--style-app .tts-swipe-card h2 {
	max-width: 24ch;
	margin: 0.8rem 0 0;
	color: var(--tts-color-ink);
	font-size: clamp(
		calc(1.4rem * var(--tts-swipe-title-scale, 1)),
		calc(4.8vw * var(--tts-swipe-title-scale, 1)),
		calc(2.2rem * var(--tts-swipe-title-scale, 1))
	);
	font-weight: 650;
	line-height: 1.16;
	text-shadow: none;
}

.tts-swipe-feed--style-app .tts-swipe-card__excerpt {
	-webkit-line-clamp: 5;
	max-width: 52rem;
	margin-top: 0.7rem;
	color: var(--tts-color-muted);
	font-size: 0.95rem;
	line-height: 1.45;
}

.tts-swipe-feed--style-app .tts-swipe-card__meta {
	padding-top: 0.65rem;
	margin-top: auto;
	color: var(--tts-color-muted);
	font-size: 0.82rem;
}

.tts-swipe-feed--style-app .tts-swipe-card__read {
	min-height: 2.2rem;
	padding: 0.42rem 0.75rem;
	border-color: var(--tts-color-border);
	color: var(--tts-color-accent-strong);
	background: var(--tts-color-accent-soft);
	font-size: 0.78rem;
	backdrop-filter: none;
}

.tts-swipe-feed--style-app .tts-swipe-card__read:hover {
	color: #fff;
	background: var(--tts-color-accent);
}

.tts-swipe-feed--style-app .tts-swipe-progress {
	background: rgba(5, 7, 9, 0.58);
}

.tts-swipe-feed--style-app .tts-swipe-controls {
	top: calc(var(--tts-swipe-image-height, 31%) - 3.5rem);
	bottom: auto;
	flex-direction: row;
}

.tts-swipe-feed--style-app .tts-swipe-controls button {
	background: rgba(5, 7, 9, 0.62);
}

.tts-swipe-feed--style-app .tts-swipe-guide {
	color: var(--tts-color-ink);
	border-color: var(--tts-color-border);
	background: var(--tts-color-surface);
	background: color-mix(in srgb, var(--tts-color-surface) 92%, transparent);
	backdrop-filter: blur(12px);
}

.tts-swipe-feed--style-app .tts-swipe-state {
	color: var(--tts-color-ink);
	background:
		radial-gradient(circle at 50% 20%, var(--tts-color-accent-soft), transparent 45%),
		var(--tts-color-surface);
}

.tts-swipe-feed--style-app .tts-swipe-state h2,
.tts-swipe-feed--style-app .tts-swipe-state h3,
.tts-swipe-feed--style-app .tts-swipe-state p {
	color: var(--tts-color-ink);
}

.tts-swipe-feed--style-app .tts-swipe-state p {
	color: var(--tts-color-muted);
}

.tts-swipe-feed--style-app .tts-swipe-spinner {
	border-color: var(--tts-color-border);
	border-top-color: var(--tts-color-accent);
}

@keyframes tts-swipe-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes tts-swipe-guide {
	50% {
		transform: translate(-50%, -0.35rem);
	}
}

@media (min-width: 64rem) {
	.tts-swipe-home--contained .tts-swipe-card,
	.tts-swipe-feed--contained .tts-swipe-card {
		width: min(100%, calc(var(--tts-swipe-viewport-height) * 0.72));
		margin-inline: auto;
		border-inline: 1px solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 0 80px rgba(0, 0, 0, 0.7);
	}

	.tts-swipe-home--contained .tts-swipe-card__content,
	.tts-swipe-feed--contained .tts-swipe-card__content {
		padding-inline: 2rem;
	}

	.tts-swipe-home--contained .tts-swipe-card h2,
	.tts-swipe-feed--contained .tts-swipe-card h2 {
		font-size: clamp(2.2rem, 4vw, 4rem);
	}

	.tts-swipe-home--contained .tts-swipe-progress,
	.tts-swipe-home--contained .tts-swipe-controls {
		right: calc(
			(100vw - min(100vw, calc(var(--tts-swipe-viewport-height) * 0.72))) / 2
			+ 1rem
		);
	}

	.tts-swipe-home--style-app.tts-swipe-home--contained .tts-swipe-card h2 {
		font-size: clamp(
			calc(1.4rem * var(--tts-swipe-title-scale, 1)),
			calc(3.2vw * var(--tts-swipe-title-scale, 1)),
			calc(2.4rem * var(--tts-swipe-title-scale, 1))
		);
	}
}

@media (max-width: 782px) {
	.admin-bar.tts-has-swipe-home .tts-site-header {
		top: 46px;
	}
}

@media (max-width: 48rem) {
	.tts-has-swipe-home .tts-primary-navigation {
		position: fixed;
		top: 4.5rem;
		color: #fff;
		border-color: rgba(255, 255, 255, 0.14);
		background: rgba(5, 7, 9, 0.96);
	}

	.admin-bar.tts-has-swipe-home .tts-primary-navigation {
		top: calc(4.5rem + 46px);
	}

	.tts-swipe-card__content {
		padding-right: 4.5rem;
		padding-bottom: max(3.5rem, calc(2rem + env(safe-area-inset-bottom)));
	}

	.tts-swipe-feed--style-app .tts-swipe-card__content {
		padding-right: 0.45rem;
		padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
	}

	.tts-swipe-feed--style-app .tts-swipe-card h2 {
		max-width: 22ch;
	}

	.tts-swipe-card h2 {
		max-width: 18ch;
		font-size: clamp(2rem, 9vw, 3.4rem);
	}

	.tts-swipe-card__excerpt {
		-webkit-line-clamp: 2;
	}

	.tts-swipe-feed--style-app .tts-swipe-card__excerpt {
		-webkit-line-clamp: 5;
	}

	.tts-swipe-guide {
		bottom: max(1rem, env(safe-area-inset-bottom));
	}

	.tts-swipe-guide p {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tts-swipe-guide,
	.tts-swipe-spinner {
		animation: none;
	}
}