/* Fonts */
/* Default styling */
@layer reset, theme, component, overrides;
@layer reset {
	body {
		font-family: var(--sl-font-sans);
		background-color: #000;
		color: #fff;
		background-color: var(--sl-color-neutral-0);
		color: var(--rv-font-color-normal);
		font-weight: var(--sl-font-weight-normal);
		line-height: var(--sl-line-height-normal);
		overscroll-behavior-x: none;
	}

	sl-button[variant="text"]::part(base) {
		color: currentColor;
	}

	:where(button) {
		all: unset;
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
	}

	:where([hidden]:not([hidden="until-found"])) {
		display: none !important;
	}

	:where(input, button, textarea, select) {
		font: inherit;
		color: inherit;
	}

	:where(textarea) {
		resize: vertical;
		resize: block;
	}

	:where(button, label, select, summary, [role="button"], [role="option"]) {
		cursor: pointer;
	}

	:where(a) {
		color: inherit;
		text-underline-offset: 0.2ex;
	}

	:where(ul, ol) {
		list-style: none;
	}

	:where(img, svg, video, canvas, audio, iframe, embed, object) {
		display: block;
	}

	:where(img, picture, svg, video) {
		max-inline-size: 100%;
		block-size: auto;
	}

	:where(p, h1, h2, h3, h4, h5, h6) {
		overflow-wrap: break-word;
	}

	:where(h1, h2) {
		line-height: calc(1em + 0.5rem);
		text-wrap: balance;
		font-weight: var(--sl-font-weight-normal);
		margin: 0;
	}

	/* TODO: remove these !important flags once we delete all the duplicate h1, h2, etc styles everywhere */
	h1 {
		font-size: var(--sl-font-size-3x-large) !important;
	}

	h2 {
		font-size: var(--sl-font-size-2x-large);
	}

	h3 {
		font-size: var(--sl-font-size-x-large) !important;
		line-height: var(--sl-line-height-dense) !important;
		font-weight: var(--sl-font-weight-bold) !important;
		margin: 0;
		text-wrap: balance;
	}

	h4 {
		font-size: var(--sl-font-size-large) !important;
		margin: 0;
		font-weight: var(--sl-font-weight-semibold) !important;
		line-height: var(--sl-line-height-dense) !important;
	}

	:where(hr) {
		border: none;
		border-block-start: 1px solid;
		color: inherit;
		block-size: 0;
		overflow: visible;
	}

	:where(dialog, [popover]) {
		border: none;
		background: none;
		color: inherit;
		inset: unset;
		max-width: unset;
		max-height: unset;
	}

	:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
		display: none !important;
	}

	:where(:focus-visible) {
		outline: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);
		outline-offset: var(--sl-focus-ring-offset);
	}

	:where(:focus-visible, :target) {
		scroll-margin-block: 8vh;
	}

	:where(.visually-hidden:not(:focus-within, :active)) {
		clip-path: inset(50%) !important;
		height: 1px !important;
		width: 1px !important;
		overflow: hidden !important;
		position: absolute !important;
		white-space: nowrap !important;
		border: 0 !important;
		user-select: none !important;
	}

	/* For webkit browsers */
	::-webkit-scrollbar {
		width: 4px;
		height: 4px;
		background: transparent;
	}

	::-webkit-scrollbar-thumb {
		background-color: var(--sl-color-primary-500);
		border-radius: 4px;
	}

	/* For Firefox */
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--sl-color-primary-500);
	}

	/* Shoelace Overrides */

	sl-button::part(text),
	sl-button::part(label),
	rv-gradient-button::part(label) {
		font-weight: var(--sl-font-weight-bold) !important;
	}

	sl-button[variant="text"]::part(label) {
		padding: 0 var(--rv-rhythm);
	}

	sl-button[variant="default"],
	sl-button[variant="default"]::part(base) {
		background-color: transparent;
		border-color: var(--rv-color-alpha-700);
	}

	sl-button[circle]::part(base) {
		color: var(--rv-font-color-normal);
		border-color: transparent;
		background-color: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.16));
	}

	sl-button[circle][size="small"]::part(base) {
		width: calc(3 * var(--rv-rhythm));
		height: calc(3 * var(--rv-rhythm));
		min-height: calc(3 * var(--rv-rhythm));
		line-height: calc(3 * var(--rv-rhythm));
	}

	/* prevent doubling-up of alpha on the input and base parts */
	sl-input::part(input) {
		background-color: transparent !important;
	}

	sl-input.prefixed::part(input) {
		padding-left: var(--sl-spacing-2x-small);
	}

	h2.avatar-header {
		display: flex;
		align-items: center;
	}

	sl-icon {
		height: var(--rv-icon-size-m);
		width: var(--rv-icon-size-m);
		font-size: var(--rv-icon-size-m);
		stroke-width: 1.5px;
	}
	sl-icon-button::part(base) {
		font-size: var(--rv-icon-size-m);
		stroke-width: 1.5px;
	}

	.column-large,
	.column-medium,
	.column-small {
		display: flex;
		flex-direction: column;
	}

	.column-large {
		gap: var(--sl-spacing-large);
	}

	.column-medium {
		gap: var(--sl-spacing-medium);
	}

	.column-small {
		gap: var(--sl-spacing-small);
	}

	.columns-2 {
		display: flex;
		gap: var(--sl-spacing-medium);
		max-width: 100%;
		align-items: flex-end;
		flex-wrap: wrap;

		&.align-top {
			align-items: start;
		}

		> * {
			flex: 1 1 calc(50% - var(--sl-spacing-medium) / 2);
		}
	}

	/* fix sl-input bug that allows it to overflow horizontally */
	sl-input,
	sl-input::part(base) {
		max-width: 100%;
		min-width: 0;
	}

	.light {
		font-weight: var(--sl-font-weight-light);
		color: var(--rv-font-color-light);
	}

	sl-textarea.quiet::part(base) {
		border: none;
		background: none;
		--sl-focus-ring-width: 0;
		--sl-input-color-focus: var(--sl-input-color);
		--sl-input-color-hover: var(--sl-input-color);
	}

	/* fix sl-checkbox vertical alignment */
	sl-checkbox::part(base) {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.divider {
		display: flex;
		align-items: center;
		text-align: center;
		color: var(--rv-font-color-lighter);
		font-size: var(--sl-font-size-small);
		gap: var(--rv-rhythm);
	}

	.divider::before,
	.divider::after {
		content: "";
		flex: 1;
		height: var(--rv-border-width-s);
		background: var(--rv-font-color-lighter);
	}

	.vspace {
		margin-top: var(--sl-spacing-2x-large);
		margin-bottom: var(--sl-spacing-2x-large);
	}

	.vpush {
		margin-top: var(--sl-spacing-2x-large);
	}

	sl-progress-bar {
		--height: var(--sl-spacing-2x-small);
	}

	.fade-in {
		opacity: 1;
		transition: opacity var(--sl-transition-x-slow) var(--rv-transition-smoothstep);

		@starting-style {
			opacity: 0;
		}
	}

	.hint {
		color: var(--rv-font-color-lighter);
		font-size: var(--sl-font-size-small);
	}

.help-text {
	padding: var(--sl-spacing-2x-small) 0 0 0;
	margin: 0;
	color: var(--rv-font-color-normal);
	font-size: var(--sl-font-size-small) !important;
}

/* Ask bar */
.ask-wrapper {
	width: 100%;
	max-width: 1400px;
	margin: 20px auto 12px;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: center;
}

.ask-box {
	width: 100%;
	max-width: 1400px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #1f1f1f;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	padding: 10px 14px;
	box-shadow: 0 14px 45px rgba(0, 0, 0, 0.35);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	position: relative;
}

.ask-box.recording {
	border-color: #3b82f6;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

.ask-input {
	flex: 1;
	border: none;
	background: transparent;
	color: #f5f5f5;
	font-size: 16px;
	padding: 8px 18px 8px 4px;
	outline: none;
	min-height: 24px;
}

.ask-input::placeholder {
	color: rgba(255, 255, 255, 0.65);
}

.ask-caret {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 18px;
	background: #f5f5f5;
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	animation: ask-caret-blink 1s steps(2, start) infinite;
}

.ask-input:placeholder-shown ~ .ask-caret {
	opacity: 1;
}

.ask-input:not(:placeholder-shown) ~ .ask-caret {
	opacity: 0;
	animation: none;
	visibility: hidden;
}

@keyframes ask-caret-blink {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.ask-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ask-icon-btn {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.07);
	color: #f5f5f5;
	transition: background 0.2s ease, transform 0.2s ease;
}

.ask-icon-btn#voiceBtn {
	border-radius: 50%;
	background: transparent;
}

.ask-icon-btn:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-1px);
}

.ask-icon-btn#voiceBtn:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #f5f5f5;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.ask-icon-btn:active {
	transform: translateY(0);
}

.ask-hint {
	margin-top: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	text-align: center;
}

@media (max-width: 640px) {
	.ask-box {
		padding: 10px 12px;
	}
	.ask-input {
		font-size: 15px;
		padding-left: 4px;
	}
	.ask-caret {
		left: 16px;
	}
}

.use-cases {
	padding: 56px 16px;
	width: 100%;
}

.use-cases__container {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.use-cases__title {
	text-align: center;
	margin: 0;
	font-size: clamp(22px, 3vw, 28px);
	white-space: nowrap;
}

.chat-carousel {
	display: grid;
	grid-template-columns: 48px 1fr 48px;
	gap: 12px;
	align-items: center;
}

.chat-carousel__viewport {
	overflow: hidden;
}

.chat-carousel__track {
	display: flex;
	transition: transform 300ms ease;
	will-change: transform;
}

.chat-slide {
	flex: 0 0 100%;
	padding: 0 8px;
	box-sizing: border-box;
}

.chat {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.chat-message {
	padding: 12px 16px;
	border-radius: 14px;
	line-height: 1.5;
	max-width: 88%;
	font-size: 16px;
	color: #f5f5f5;
	background: #1f1f1f;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.chat-message.user {
	align-self: flex-end;
	background: linear-gradient(135deg, #2e7bff, #6c54ff);
	color: #fff;
	text-align: right;
}

.chat-message.bot {
	align-self: flex-start;
	border: 1px solid rgba(255, 255, 255, 0.08);
	text-align: left;
}

.chat-carousel__btn {
	height: 40px;
	width: 40px;
	border-radius: 12px;
	border: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
}

.chat-carousel__btn:hover {
	background: rgba(255, 255, 255, 0.16);
	transform: translateY(-1px);
}

.chat-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.chat-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	border: 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.chat-carousel__dot.is-active {
	background: #6c54ff;
	transform: scale(1.05);
}

@media (max-width: 1024px) {
	.chat-message {
		font-size: 15px;
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	.use-cases {
		padding: 40px 12px;
	}
	.chat-carousel {
		grid-template-columns: 1fr;
	}
	.chat-carousel__btn {
		display: none;
	}
	.chat-slide {
		padding: 0;
	}
	.chat {
		width: 100%;
	}
}
}
/* Unified, responsive Shoelace theme with light-dark() */
:root,
:host {
	color-scheme: dark;
	/*
   * Color Primitives
   */

	/* Gray */
	--sl-color-gray-50: light-dark(hsl(0 0% 97.5%), hsl(0 0% 11%));
	--sl-color-gray-100: light-dark(hsl(0 0% 95.9%), hsl(0 0% 18.2%));
	--sl-color-gray-200: light-dark(hsl(0 0% 90%), hsl(0 0% 22%));
	--sl-color-gray-300: light-dark(hsl(0 0% 83.9%), hsl(0 0% 27.6%));
	--sl-color-gray-400: light-dark(hsl(0 0% 64.9%), hsl(0 0% 35.5%));
	--sl-color-gray-500: light-dark(hsl(0 0% 46.1%), hsl(0 0% 44%));
	--sl-color-gray-600: light-dark(hsl(0 0% 33.9%), hsl(0 0% 58%));
	--sl-color-gray-700: light-dark(hsl(0 0% 26.1%), hsl(0 0% 73%));
	--sl-color-gray-800: light-dark(hsl(0 0% 15.9%), hsl(0 0% 84%));
	--sl-color-gray-900: light-dark(hsl(0 0% 10%), hsl(0 0% 91.8%));
	--sl-color-gray-950: light-dark(hsl(0 0% 8%), hsl(0 0% 95%));

	/* Red */
	--sl-color-red-50: light-dark(hsl(0 85.7% 97.3%), hsl(0 56% 23.9%));
	--sl-color-red-100: light-dark(hsl(0 93.3% 94.1%), hsl(0.6 60% 33.9%));
	--sl-color-red-200: light-dark(hsl(0 96.3% 89.4%), hsl(0.9 67.2% 37.1%));
	--sl-color-red-300: light-dark(hsl(0 93.5% 81.8%), hsl(1.1 71.3% 43.7%));
	--sl-color-red-400: light-dark(hsl(0 90.6% 70.8%), hsl(1 76% 52.5%));
	--sl-color-red-500: light-dark(hsl(0 84.2% 60.2%), hsl(0.7 89.6% 57.2%));
	--sl-color-red-600: light-dark(hsl(0 72.2% 50.6%), hsl(0 98.6% 67.9%));
	--sl-color-red-700: light-dark(hsl(0 73.7% 41.8%), hsl(0 100% 72.3%));
	--sl-color-red-800: light-dark(hsl(0 70% 35.3%), hsl(0 100% 85.6%));
	--sl-color-red-900: light-dark(hsl(0 62.8% 30.6%), hsl(0 100% 90.3%));
	--sl-color-red-950: light-dark(hsl(0 60% 19.6%), hsl(0 100% 95.9%));

	/* Orange */
	--sl-color-orange-50: light-dark(hsl(33.3 100% 96.5%), hsl(15 64.2% 23.3%));
	--sl-color-orange-100: light-dark(hsl(34.3 100% 91.8%), hsl(15.1 70.9% 31.1%));
	--sl-color-orange-200: light-dark(hsl(32.1 97.7% 83.1%), hsl(15.3 75.7% 35.5%));
	--sl-color-orange-300: light-dark(hsl(30.7 97.2% 72.4%), hsl(17.1 83.5% 42.7%));
	--sl-color-orange-400: light-dark(hsl(27 96% 61%), hsl(20.1 88% 50.8%));
	--sl-color-orange-500: light-dark(hsl(24.6 95% 53.1%), hsl(24.3 100% 50.5%));
	--sl-color-orange-600: light-dark(hsl(20.5 90.2% 48.2%), hsl(27.2 100% 57.7%));
	--sl-color-orange-700: light-dark(hsl(17.5 88.3% 40.4%), hsl(31.3 100% 68.7%));
	--sl-color-orange-800: light-dark(hsl(15 79.1% 33.7%), hsl(33.8 100% 79.3%));
	--sl-color-orange-900: light-dark(hsl(15.3 74.6% 27.8%), hsl(38.9 100% 87.7%));
	--sl-color-orange-950: light-dark(hsl(15.2 69.1% 19%), hsl(46.2 100% 95%));

	/* Amber */
	--sl-color-amber-50: light-dark(hsl(48 100% 96.1%), hsl(21.9 66.3% 21.1%));
	--sl-color-amber-100: light-dark(hsl(48 96.5% 88.8%), hsl(21.5 73.6% 29.7%));
	--sl-color-amber-200: light-dark(hsl(48 96.6% 76.7%), hsl(22.3 77.6% 33.3%));
	--sl-color-amber-300: light-dark(hsl(45.9 96.7% 64.5%), hsl(25.4 84.2% 39.6%));
	--sl-color-amber-400: light-dark(hsl(43.3 96.4% 56.3%), hsl(31.4 87.4% 46.7%));
	--sl-color-amber-500: light-dark(hsl(37.7 92.1% 50.2%), hsl(37 96.6% 48.3%));
	--sl-color-amber-600: light-dark(hsl(32.1 94.6% 43.7%), hsl(43.3 100% 53.4%));
	--sl-color-amber-700: light-dark(hsl(26 90.5% 37.1%), hsl(46.5 100% 61.1%));
	--sl-color-amber-800: light-dark(hsl(22.7 82.5% 31.4%), hsl(49.3 100% 73%));
	--sl-color-amber-900: light-dark(hsl(21.7 77.8% 26.5%), hsl(51.8 100% 85%));
	--sl-color-amber-950: light-dark(hsl(22.9 74.1% 16.7%), hsl(60 100% 94.6%));

	/* Yellow */
	--sl-color-yellow-50: light-dark(hsl(54.5 91.7% 95.3%), hsl(32.5 60% 18.2%));
	--sl-color-yellow-100: light-dark(hsl(54.9 96.7% 88%), hsl(28.1 68.6% 29%));
	--sl-color-yellow-200: light-dark(hsl(52.8 98.3% 76.9%), hsl(31.3 75.8% 30.8%));
	--sl-color-yellow-300: light-dark(hsl(50.4 97.8% 63.5%), hsl(34.7 84.4% 35.3%));
	--sl-color-yellow-400: light-dark(hsl(47.9 95.8% 53.1%), hsl(40.1 87.3% 43.3%));
	--sl-color-yellow-500: light-dark(hsl(45.4 93.4% 47.5%), hsl(44.7 88% 46%));
	--sl-color-yellow-600: light-dark(hsl(40.6 96.1% 40.4%), hsl(47.7 100% 50.9%));
	--sl-color-yellow-700: light-dark(hsl(35.5 91.7% 32.9%), hsl(51.3 100% 59.9%));
	--sl-color-yellow-800: light-dark(hsl(31.8 81% 28.8%), hsl(54.6 100% 73%));
	--sl-color-yellow-900: light-dark(hsl(28.4 72.5% 25.7%), hsl(58.9 100% 84.2%));
	--sl-color-yellow-950: light-dark(hsl(33.1 69% 13.9%), hsl(60 100% 94%));

	/* Lime */
	--sl-color-lime-50: light-dark(hsl(78.3 92% 95.1%), hsl(86.5 54.4% 18%));
	--sl-color-lime-100: light-dark(hsl(79.6 89.1% 89.2%), hsl(87.6 56.8% 23.3%));
	--sl-color-lime-200: light-dark(hsl(80.9 88.5% 79.6%), hsl(85.8 63.2% 24.5%));
	--sl-color-lime-300: light-dark(hsl(82 84.5% 67.1%), hsl(86.1 72% 29.4%));
	--sl-color-lime-400: light-dark(hsl(82.7 78% 55.5%), hsl(85.5 76.8% 37.3%));
	--sl-color-lime-500: light-dark(hsl(83.7 80.5% 44.3%), hsl(84.3 74.2% 42.1%));
	--sl-color-lime-600: light-dark(hsl(84.8 85.2% 34.5%), hsl(82.8 81.5% 52.6%));
	--sl-color-lime-700: light-dark(hsl(85.9 78.4% 27.3%), hsl(82 89.9% 64%));
	--sl-color-lime-800: light-dark(hsl(86.3 69% 22.7%), hsl(80.9 97.9% 76.6%));
	--sl-color-lime-900: light-dark(hsl(87.6 61.2% 20.2%), hsl(77.9 100% 85.8%));
	--sl-color-lime-950: light-dark(hsl(86.5 60.6% 13.9%), hsl(69.5 100% 93.8%));

	/* Green */
	--sl-color-green-50: light-dark(hsl(138.5 76.5% 96.7%), hsl(144.3 53.6% 16%));
	--sl-color-green-100: light-dark(hsl(140.6 84.2% 92.5%), hsl(143.2 55.4% 23.5%));
	--sl-color-green-200: light-dark(hsl(141 78.9% 85.1%), hsl(141.5 58.2% 26.3%));
	--sl-color-green-300: light-dark(hsl(141.7 76.6% 73.1%), hsl(140.8 64.2% 31.8%));
	--sl-color-green-400: light-dark(hsl(141.9 69.2% 58%), hsl(140.3 68% 39.2%));
	--sl-color-green-500: light-dark(hsl(142.1 70.6% 45.3%), hsl(141.1 64.9% 43%));
	--sl-color-green-600: light-dark(hsl(142.1 76.2% 36.3%), hsl(141.6 72.4% 55.2%));
	--sl-color-green-700: light-dark(hsl(142.4 71.8% 29.2%), hsl(141.7 82.7% 70.1%));
	--sl-color-green-800: light-dark(hsl(142.8 64.2% 24.1%), hsl(141 90.9% 82.1%));
	--sl-color-green-900: light-dark(hsl(143.8 61.2% 20.2%), hsl(142 100% 89.1%));
	--sl-color-green-950: light-dark(hsl(144.3 60.7% 12%), hsl(144 100% 95.5%));

	/* Emerald */
	--sl-color-emerald-50: light-dark(hsl(151.8 81% 95.9%), hsl(164.3 75% 13.5%));
	--sl-color-emerald-100: light-dark(hsl(149.3 80.4% 90%), hsl(163.5 72.6% 20.1%));
	--sl-color-emerald-200: light-dark(hsl(152.4 76% 80.4%), hsl(162.1 73.7% 22.4%));
	--sl-color-emerald-300: light-dark(hsl(156.2 71.6% 66.9%), hsl(161.3 77.3% 27.6%));
	--sl-color-emerald-400: light-dark(hsl(158.1 64.4% 51.6%), hsl(159.6 77.1% 34.3%));
	--sl-color-emerald-500: light-dark(hsl(160.1 84.1% 39.4%), hsl(159.1 73.5% 37.9%));
	--sl-color-emerald-600: light-dark(hsl(161.4 93.5% 30.4%), hsl(157.8 66.8% 48.9%));
	--sl-color-emerald-700: light-dark(hsl(162.9 93.5% 24.3%), hsl(156.2 76.1% 63.8%));
	--sl-color-emerald-800: light-dark(hsl(163.1 88.1% 19.8%), hsl(152.4 84.4% 77.4%));
	--sl-color-emerald-900: light-dark(hsl(164.2 85.7% 16.5%), hsl(149.3 100% 87%));
	--sl-color-emerald-950: light-dark(hsl(164.3 87.5% 9.4%), hsl(158.6 100% 94.8%));

	/* Teal */
	--sl-color-teal-50: light-dark(hsl(166.2 76.5% 96.7%), hsl(176.5 51.5% 15.4%));
	--sl-color-teal-100: light-dark(hsl(167.2 85.5% 89.2%), hsl(175.9 54.7% 22.3%));
	--sl-color-teal-200: light-dark(hsl(168.4 83.8% 78.2%), hsl(175.9 60.7% 23.9%));
	--sl-color-teal-300: light-dark(hsl(170.6 76.9% 64.3%), hsl(174.5 67.3% 28.8%));
	--sl-color-teal-400: light-dark(hsl(172.5 66% 50.4%), hsl(174.4 71.9% 34.9%));
	--sl-color-teal-500: light-dark(hsl(173.4 80.4% 40%), hsl(173.1 71% 38.3%));
	--sl-color-teal-600: light-dark(hsl(174.7 83.9% 31.6%), hsl(172.3 68.2% 48.1%));
	--sl-color-teal-700: light-dark(hsl(175.3 77.4% 26.1%), hsl(170.5 81.3% 61.5%));
	--sl-color-teal-800: light-dark(hsl(176.1 69.4% 21.8%), hsl(168.4 92.1% 75.2%));
	--sl-color-teal-900: light-dark(hsl(175.9 60.8% 19%), hsl(168.3 100% 86%));
	--sl-color-teal-950: light-dark(hsl(176.5 58.6% 11.4%), hsl(180 100% 95.5%));

	/* Cyan */
	--sl-color-cyan-50: light-dark(hsl(183.2 100% 96.3%), hsl(197.1 53.8% 20.3%));
	--sl-color-cyan-100: light-dark(hsl(185.1 95.9% 90.4%), hsl(196.8 57.3% 27.2%));
	--sl-color-cyan-200: light-dark(hsl(186.2 93.5% 81.8%), hsl(195.3 62.7% 29.4%));
	--sl-color-cyan-300: light-dark(hsl(187 92.4% 69%), hsl(193.5 71.3% 34.1%));
	--sl-color-cyan-400: light-dark(hsl(187.9 85.7% 53.3%), hsl(192.5 76.8% 40.6%));
	--sl-color-cyan-500: light-dark(hsl(188.7 94.5% 42.7%), hsl(189.4 78.6% 42.6%));
	--sl-color-cyan-600: light-dark(hsl(191.6 91.4% 36.5%), hsl(188.2 89.1% 51.7%));
	--sl-color-cyan-700: light-dark(hsl(192.9 82.3% 31%), hsl(187 98.6% 66.2%));
	--sl-color-cyan-800: light-dark(hsl(194.4 69.6% 27.1%), hsl(184.9 100% 78.3%));
	--sl-color-cyan-900: light-dark(hsl(196.4 63.6% 23.7%), hsl(180 100% 86.6%));
	--sl-color-cyan-950: light-dark(hsl(196.8 61% 16.1%), hsl(180 100% 94.8%));

	/* Sky */
	--sl-color-sky-50: light-dark(hsl(204 100% 97.1%), hsl(203 63.8% 20.9%));
	--sl-color-sky-100: light-dark(hsl(204 93.8% 93.7%), hsl(203.4 70.4% 28%));
	--sl-color-sky-200: light-dark(hsl(200.6 94.4% 86.1%), hsl(202.7 75.8% 30.8%));
	--sl-color-sky-300: light-dark(hsl(199.4 95.5% 73.9%), hsl(203.1 80.4% 36.1%));
	--sl-color-sky-400: light-dark(hsl(198.4 93.2% 59.6%), hsl(202.1 80.5% 44.3%));
	--sl-color-sky-500: light-dark(hsl(198.6 88.7% 48.4%), hsl(199.7 85.9% 47.7%));
	--sl-color-sky-600: light-dark(hsl(200.4 98% 39.4%), hsl(198.7 97.9% 57.2%));
	--sl-color-sky-700: light-dark(hsl(201.3 96.3% 32.2%), hsl(198.7 100% 70.5%));
	--sl-color-sky-800: light-dark(hsl(201 90% 27.5%), hsl(198.8 100% 82.5%));
	--sl-color-sky-900: light-dark(hsl(202 80.3% 23.9%), hsl(198.5 100% 89.9%));
	--sl-color-sky-950: light-dark(hsl(202.3 73.8% 16.5%), hsl(186 100% 95.5%));

	/* Blue */
	--sl-color-blue-50: light-dark(hsl(213.8 100% 96.9%), hsl(227.1 49.5% 22.7%));
	--sl-color-blue-100: light-dark(hsl(214.3 94.6% 92.7%), hsl(225.8 58.9% 36.8%));
	--sl-color-blue-200: light-dark(hsl(213.3 96.9% 87.3%), hsl(227.7 64.4% 42.9%));
	--sl-color-blue-300: light-dark(hsl(211.7 96.4% 78.4%), hsl(226.1 72.7% 51.2%));
	--sl-color-blue-400: light-dark(hsl(213.1 93.9% 67.8%), hsl(222.6 86.5% 56.3%));
	--sl-color-blue-500: light-dark(hsl(217.2 91.2% 59.8%), hsl(217.8 95.8% 57.4%));
	--sl-color-blue-600: light-dark(hsl(221.2 83.2% 53.3%), hsl(213.3 100% 65%));
	--sl-color-blue-700: light-dark(hsl(224.3 76.3% 48%), hsl(210.9 100% 74.8%));
	--sl-color-blue-800: light-dark(hsl(225.9 70.7% 40.2%), hsl(211.5 100% 83.4%));
	--sl-color-blue-900: light-dark(hsl(224.4 64.3% 32.9%), hsl(211 100% 88.9%));
	--sl-color-blue-950: light-dark(hsl(226.2 55.3% 18.4%), hsl(201.8 100% 95.3%));

	/* Indigo */
	--sl-color-indigo-50: light-dark(hsl(225.9 100% 96.7%), hsl(243.5 40.8% 27%));
	--sl-color-indigo-100: light-dark(hsl(226.5 100% 93.9%), hsl(242.9 45.7% 37.6%));
	--sl-color-indigo-200: light-dark(hsl(228 96.5% 88.8%), hsl(244.7 52.7% 43.1%));
	--sl-color-indigo-300: light-dark(hsl(229.7 93.5% 81.8%), hsl(245.3 60.5% 52.4%));
	--sl-color-indigo-400: light-dark(hsl(234.5 89.5% 73.9%), hsl(244.1 79.2% 60.4%));
	--sl-color-indigo-500: light-dark(hsl(238.7 83.5% 66.7%), hsl(239.6 88.7% 63.8%));
	--sl-color-indigo-600: light-dark(hsl(243.4 75.4% 58.6%), hsl(234.5 96.7% 70.9%));
	--sl-color-indigo-700: light-dark(hsl(244.5 57.9% 50.6%), hsl(229.4 100% 78.3%));
	--sl-color-indigo-800: light-dark(hsl(243.7 54.5% 41.4%), hsl(227.1 100% 85%));
	--sl-color-indigo-900: light-dark(hsl(242.2 47.4% 34.3%), hsl(223.8 100% 89.9%));
	--sl-color-indigo-950: light-dark(hsl(243.5 43.6% 22.9%), hsl(220 100% 95.1%));

	/* Violet */
	--sl-color-violet-50: light-dark(hsl(250 100% 97.6%), hsl(265.1 57.3% 25.4%));
	--sl-color-violet-100: light-dark(hsl(251.4 91.3% 95.5%), hsl(263.5 63.8% 39.4%));
	--sl-color-violet-200: light-dark(hsl(250.5 95.2% 91.8%), hsl(263.4 66.2% 44.1%));
	--sl-color-violet-300: light-dark(hsl(252.5 94.7% 85.1%), hsl(263.7 72.8% 52.4%));
	--sl-color-violet-400: light-dark(hsl(255.1 91.7% 76.3%), hsl(262.5 87.3% 59.8%));
	--sl-color-violet-500: light-dark(hsl(258.3 89.5% 66.3%), hsl(258.3 95.1% 63.2%));
	--sl-color-violet-600: light-dark(hsl(262.1 83.3% 57.8%), hsl(255.1 100% 67.2%));
	--sl-color-violet-700: light-dark(hsl(263.4 70% 50.4%), hsl(253 100% 81.5%));
	--sl-color-violet-800: light-dark(hsl(263.4 69.3% 42.2%), hsl(251.7 100% 87.9%));
	--sl-color-violet-900: light-dark(hsl(263.5 67.4% 34.9%), hsl(254.1 100% 91.7%));
	--sl-color-violet-950: light-dark(hsl(265.1 61.5% 21.4%), hsl(257.1 100% 96.1%));

	/* Purple */
	--sl-color-purple-50: light-dark(hsl(270 100% 98%), hsl(276 54.3% 20.5%));
	--sl-color-purple-100: light-dark(hsl(268.7 100% 95.5%), hsl(273.6 61.8% 35.4%));
	--sl-color-purple-200: light-dark(hsl(268.6 100% 91.8%), hsl(272.9 64% 41.4%));
	--sl-color-purple-300: light-dark(hsl(269.2 97.4% 85.1%), hsl(271.9 68.1% 49.2%));
	--sl-color-purple-400: light-dark(hsl(270 95.2% 75.3%), hsl(271.5 85.1% 57.8%));
	--sl-color-purple-500: light-dark(hsl(270.7 91% 65.1%), hsl(270.7 96.4% 62.1%));
	--sl-color-purple-600: light-dark(hsl(271.5 81.3% 55.9%), hsl(270.5 100% 71.9%));
	--sl-color-purple-700: light-dark(hsl(272.1 71.7% 47.1%), hsl(270.9 100% 81.3%));
	--sl-color-purple-800: light-dark(hsl(272.9 67.2% 39.4%), hsl(272.4 100% 87.7%));
	--sl-color-purple-900: light-dark(hsl(273.6 65.6% 32%), hsl(276.7 100% 91.5%));
	--sl-color-purple-950: light-dark(hsl(276 59.5% 16.5%), hsl(300 100% 96.5%));

	/* Fuchsia */
	--sl-color-fuchsia-50: light-dark(hsl(289.1 100% 97.8%), hsl(297.1 51.2% 18.6%));
	--sl-color-fuchsia-100: light-dark(hsl(287 100% 95.5%), hsl(296.7 59.5% 31.5%));
	--sl-color-fuchsia-200: light-dark(hsl(288.3 95.8% 90.6%), hsl(295.4 65.4% 35.1%));
	--sl-color-fuchsia-300: light-dark(hsl(291.1 93.1% 82.9%), hsl(294.6 67.4% 42.2%));
	--sl-color-fuchsia-400: light-dark(hsl(292 91.4% 72.5%), hsl(293.3 68.7% 51.2%));
	--sl-color-fuchsia-500: light-dark(hsl(292.2 84.1% 60.6%), hsl(292.1 88.4% 57.7%));
	--sl-color-fuchsia-600: light-dark(hsl(293.4 69.5% 48.8%), hsl(292 98.5% 59.5%));
	--sl-color-fuchsia-700: light-dark(hsl(294.7 72.4% 39.8%), hsl(292.4 100% 79.5%));
	--sl-color-fuchsia-800: light-dark(hsl(295.4 70.2% 32.9%), hsl(292.9 100% 86.8%));
	--sl-color-fuchsia-900: light-dark(hsl(296.7 63.6% 28%), hsl(300 100% 91.5%));
	--sl-color-fuchsia-950: light-dark(hsl(297.1 56.8% 14.5%), hsl(300 100% 96.3%));

	/* Pink */
	--sl-color-pink-50: light-dark(hsl(327.3 73.3% 97.1%), hsl(336.2 59.6% 20%));
	--sl-color-pink-100: light-dark(hsl(325.7 77.8% 94.7%), hsl(336.8 63.9% 34%));
	--sl-color-pink-200: light-dark(hsl(325.9 84.6% 89.8%), hsl(336.8 68.7% 37.6%));
	--sl-color-pink-300: light-dark(hsl(327.4 87.1% 81.8%), hsl(336.1 71.8% 44.5%));
	--sl-color-pink-400: light-dark(hsl(328.6 85.5% 70.2%), hsl(333.9 74.9% 53.1%));
	--sl-color-pink-500: light-dark(hsl(330.4 81.2% 60.4%), hsl(330.7 86.3% 57.7%));
	--sl-color-pink-600: light-dark(hsl(333.3 71.4% 50.6%), hsl(328.6 91.5% 67.2%));
	--sl-color-pink-700: light-dark(hsl(335.1 77.6% 42%), hsl(327.4 97.6% 78.7%));
	--sl-color-pink-800: light-dark(hsl(335.8 74.4% 35.3%), hsl(325.1 100% 86.6%));
	--sl-color-pink-900: light-dark(hsl(335.9 69% 30.4%), hsl(322.1 100% 91.3%));
	--sl-color-pink-950: light-dark(hsl(336.2 65.4% 15.9%), hsl(315 100% 95.9%));

	/* Rose */
	--sl-color-rose-50: light-dark(hsl(355.7 100% 97.3%), hsl(342.3 62.9% 21.5%));
	--sl-color-rose-100: light-dark(hsl(355.6 100% 94.7%), hsl(342.8 68.9% 34.2%));
	--sl-color-rose-200: light-dark(hsl(352.7 96.1% 90%), hsl(344.8 72.6% 37.3%));
	--sl-color-rose-300: light-dark(hsl(352.6 95.7% 81.8%), hsl(346.9 75.8% 43.7%));
	--sl-color-rose-400: light-dark(hsl(351.3 94.5% 71.4%), hsl(348.2 80.1% 52.7%));
	--sl-color-rose-500: light-dark(hsl(349.7 89.2% 60.2%), hsl(350.4 94.8% 57.5%));
	--sl-color-rose-600: light-dark(hsl(346.8 77.2% 49.8%), hsl(351.2 100% 58.1%));
	--sl-color-rose-700: light-dark(hsl(345.3 82.7% 40.8%), hsl(352.3 100% 78.1%));
	--sl-color-rose-800: light-dark(hsl(343.4 79.7% 34.7%), hsl(352 100% 86.2%));
	--sl-color-rose-900: light-dark(hsl(341.5 75.5% 30.4%), hsl(354.5 100% 90.7%));
	--sl-color-rose-950: light-dark(hsl(341.3 70.1% 17.1%), hsl(353.3 100% 95.7%));

	/*
   * Theme Tokens
   */

	/* Primary */
	--sl-color-primary-50: var(--sl-color-neutral-0);
	--sl-color-primary-100: var(--sl-color-neutral-100);
	--sl-color-primary-200: var(--sl-color-neutral-200);
	--sl-color-primary-300: var(--sl-color-neutral-300);
	--sl-color-primary-400: var(--sl-color-neutral-400);
	--sl-color-primary-500: var(--sl-color-neutral-700);
	--sl-color-primary-600: var(--sl-color-neutral-800);
	--sl-color-primary-700: var(--sl-color-neutral-900);
	--sl-color-primary-800: var(--sl-color-neutral-1000);
	--sl-color-primary-900: var(--sl-color-neutral-1000);
	--sl-color-primary-950: var(--sl-color-neutral-1000);

	/* Success */
	--sl-color-success-50: var(--sl-color-green-50);
	--sl-color-success-100: var(--sl-color-green-100);
	--sl-color-success-200: var(--sl-color-green-200);
	--sl-color-success-300: var(--sl-color-green-300);
	--sl-color-success-400: var(--sl-color-green-400);
	--sl-color-success-500: var(--sl-color-green-500);
	--sl-color-success-600: var(--sl-color-green-600);
	--sl-color-success-700: var(--sl-color-green-700);
	--sl-color-success-800: var(--sl-color-green-800);
	--sl-color-success-900: var(--sl-color-green-900);
	--sl-color-success-950: var(--sl-color-green-950);

	/* Warning */
	--sl-color-warning-50: var(--sl-color-amber-50);
	--sl-color-warning-100: var(--sl-color-amber-100);
	--sl-color-warning-200: var(--sl-color-amber-200);
	--sl-color-warning-300: var(--sl-color-amber-300);
	--sl-color-warning-400: var(--sl-color-amber-400);
	--sl-color-warning-500: var(--sl-color-amber-500);
	--sl-color-warning-600: var(--sl-color-amber-600);
	--sl-color-warning-700: var(--sl-color-amber-700);
	--sl-color-warning-800: var(--sl-color-amber-800);
	--sl-color-warning-900: var(--sl-color-amber-900);
	--sl-color-warning-950: var(--sl-color-amber-950);

	/* Danger */
	--sl-color-danger-50: var(--sl-color-red-50);
	--sl-color-danger-100: var(--sl-color-red-100);
	--sl-color-danger-200: var(--sl-color-red-200);
	--sl-color-danger-300: var(--sl-color-red-300);
	--sl-color-danger-400: var(--sl-color-red-400);
	--sl-color-danger-500: var(--sl-color-red-500);
	--sl-color-danger-600: var(--sl-color-red-600);
	--sl-color-danger-700: var(--sl-color-red-700);
	--sl-color-danger-800: var(--sl-color-red-800);
	--sl-color-danger-900: var(--sl-color-red-900);
	--sl-color-danger-950: var(--sl-color-red-950);

	/* Neutral */
	--sl-color-neutral-50: var(--sl-color-gray-50);
	--sl-color-neutral-100: var(--sl-color-gray-100);
	--sl-color-neutral-200: var(--sl-color-gray-200);
	--sl-color-neutral-300: var(--sl-color-gray-300);
	--sl-color-neutral-400: var(--sl-color-gray-400);
	--sl-color-neutral-500: var(--sl-color-gray-500);
	--sl-color-neutral-600: var(--sl-color-gray-600);
	--sl-color-neutral-700: var(--sl-color-gray-700);
	--sl-color-neutral-800: var(--sl-color-gray-800);
	--sl-color-neutral-900: var(--sl-color-gray-900);
	--sl-color-neutral-950: var(--sl-color-gray-950);

	/* Neutral one-offs */
	--sl-color-neutral-0: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 0%));
	--sl-color-neutral-1000: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%));

	/*
   * Border radii
   */

	--sl-border-radius-small: 0.1875rem; /* 3px */
	--sl-border-radius-medium: 0.25rem; /* 4px */
	--sl-border-radius-large: 0.5rem; /* 8px */
	--sl-border-radius-x-large: 1rem; /* 16px */

	--sl-border-radius-circle: 50%;
	--sl-border-radius-pill: 9999px;

	/*
   * Elevations
   */

	--sl-shadow-x-small: 0 1px 2px light-dark(hsl(240 3.8% 46.1% / 6%), rgb(0 0 0 / 18%));
	--sl-shadow-small: 0 1px 2px light-dark(hsl(240 3.8% 46.1% / 12%), rgb(0 0 0 / 24%));
	--sl-shadow-medium: 0 2px 4px light-dark(hsl(240 3.8% 46.1% / 12%), rgb(0 0 0 / 24%));
	--sl-shadow-large: 0 2px 8px light-dark(hsl(240 3.8% 46.1% / 12%), rgb(0 0 0 / 24%));
	--sl-shadow-x-large: 0 4px 16px light-dark(hsl(240 3.8% 46.1% / 12%), rgb(0 0 0 / 24%));

	/*
   * Spacings
   */

	--sl-spacing-3x-small: calc(0.25 * var(--rv-rhythm)); /* 2px */
	--sl-spacing-2x-small: calc(0.5 * var(--rv-rhythm)); /* 4px */
	--sl-spacing-x-small: var(--rv-rhythm); /* 8px */
	--sl-spacing-small: calc(1.5 * var(--rv-rhythm)); /* 12px */
	--sl-spacing-medium: calc(2 * var(--rv-rhythm)); /* 16px */
	--sl-spacing-large: calc(2.5 * var(--rv-rhythm)); /* 20px */
	--sl-spacing-x-large: calc(3.5 * var(--rv-rhythm)); /* 28px */
	--sl-spacing-2x-large: calc(4.5 * var(--rv-rhythm)); /* 36px */
	--sl-spacing-3x-large: calc(6 * var(--rv-rhythm)); /* 48px */
	--sl-spacing-4x-large: calc(9 * var(--rv-rhythm)); /* 72px */

	/*
   * Transitions
   */

	--sl-transition-x-slow: 1000ms;
	--sl-transition-slow: 200ms;
	--sl-transition-medium: 150ms;
	--sl-transition-fast: 100ms;
	--sl-transition-x-fast: 50ms;

	/*
   * Typography
   */

	/* Fonts */
	--sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
	--sl-font-sans: Soleil, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--sl-font-serif: Georgia, "Times New Roman", serif;

	/* Font sizes */
	--sl-font-size-2x-small: 0.625rem; /* 10px */
	--sl-font-size-x-small: 0.6875rem; /* 11 */
	--sl-font-size-small: 0.8125rem; /* 13 */
	--sl-font-size-medium: 0.9375rem; /* 15 */
	--sl-font-size-large: 1.0625rem; /* 17 */
	--sl-font-size-x-large: 1.25rem; /* 20 */
	--sl-font-size-2x-large: 1.75rem; /* 28 */
	--sl-font-size-3x-large: 2.125rem; /* 34 */
	--sl-font-size-4x-large: 3rem; /* 48px */

	/* Font weights */
	--sl-font-weight-light: 300;
	--sl-font-weight-normal: 300;
	--sl-font-weight-semibold: 400;
	--sl-font-weight-bold: 500;

	/* TODO: add typographic classes that group size + weight + density */

	/* Letter spacings */
	--sl-letter-spacing-denser: -0.03em; /* 17px */
	--sl-letter-spacing-dense: -0.005em; /* 15px */
	--sl-letter-spacing-normal: 0; /* 13px */
	--sl-letter-spacing-loose: 0.005em; /* 11px */
	--sl-letter-spacing-looser: 0.15em;

	/* Line heights */
	--sl-line-height-denser: 1.2;
	--sl-line-height-dense: 1.4;
	--sl-line-height-normal: 1.6;
	--sl-line-height-loose: 1.75;
	--sl-line-height-looser: 1.97;

	/* Focus rings */
	--sl-focus-ring-color: var(--rv-color-alpha-800);
	--sl-focus-ring-style: solid;
	--sl-focus-ring-width: 1px;
	--sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);
	--sl-focus-ring-offset: 0;

	/*
   * Forms
   */

	/* Buttons */
	--sl-button-font-size-small: var(--sl-font-size-small);
	--sl-button-font-size-medium: var(--sl-font-size-medium);
	--sl-button-font-size-large: var(--sl-font-size-large);

	/* Inputs */
	--sl-input-height-small: 2rem; /* 32px */
	--sl-input-height-medium: 2.75rem; /* 44px */
	--sl-input-height-large: 2.75rem; /* 44px */

	--sl-input-background-color: var(--sl-color-neutral-0);
	--sl-input-background-color-hover: var(--sl-input-background-color);
	--sl-input-background-color-focus: var(--sl-input-background-color);
	--sl-input-background-color-disabled: var(--sl-color-neutral-100);
	--sl-input-border-color: var(--sl-color-neutral-300);
	--sl-input-border-color-hover: var(--sl-color-neutral-400);
	--sl-input-border-color-focus: var(--sl-color-primary-500);
	--sl-input-border-color-disabled: var(--sl-color-neutral-300);
	--sl-input-border-width: 1px;
	--sl-input-required-content: "*";
	--sl-input-required-content-offset: -2px;
	--sl-input-required-content-color: var(--sl-input-label-color);

	--sl-input-border-radius-small: var(--sl-border-radius-medium);
	--sl-input-border-radius-medium: var(--sl-border-radius-medium);
	--sl-input-border-radius-large: var(--sl-border-radius-medium);

	--sl-input-font-family: var(--sl-font-sans);
	--sl-input-font-weight: var(--sl-font-weight-normal);
	/* TODO: fix the top padding, this is too high */
	--sl-input-font-size-small: var(--sl-font-size-medium);
	--sl-input-font-size-medium: var(--sl-font-size-large);
	--sl-input-font-size-large: var(--sl-font-size-large);
	--sl-input-letter-spacing: var(--sl-letter-spacing-normal);

	--sl-input-color: var(--rv-font-color-normal);
	--sl-input-color-hover: var(--sl-color-neutral-700);
	--sl-input-color-focus: var(--sl-color-neutral-700);
	--sl-input-color-disabled: var(--sl-color-neutral-900);
	--sl-input-icon-color: var(--rv-font-color-normal);
	--sl-input-icon-color-hover: var(--sl-color-neutral-600);
	--sl-input-icon-color-focus: var(--sl-color-neutral-600);
	--sl-input-placeholder-color: var(--rv-font-color-lighter);
	--sl-input-placeholder-color-disabled: var(--rv-font-color-lighter);
	--sl-input-spacing-small: var(--sl-spacing-small);
	--sl-input-spacing-medium: var(--sl-spacing-medium);
	--sl-input-spacing-large: var(--sl-spacing-large);

	--sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
	--sl-input-focus-ring-offset: 0;

	--sl-input-filled-background-color: var(--rv-color-alpha-50);
	--sl-input-filled-background-color-hover: var(--rv-color-alpha-100);
	--sl-input-filled-background-color-focus: var(--rv-color-alpha-50);
	--sl-input-filled-background-color-disabled: var(--rv-color-alpha-50);
	--sl-input-filled-color: var(--rv-font-color-normal);
	--sl-input-filled-color-hover: var(--rv-font-color-normal);
	--sl-input-filled-color-focus: var(--rv-font-color-normal);
	--sl-input-filled-color-disabled: var(--rv-font-color-lighter);

	/* Labels */
	--sl-input-label-font-size-small: var(--sl-font-size-small);
	--sl-input-label-font-size-medium: var(--sl-font-size-medium);
	--sl-input-label-font-size-large: var(--sl-font-size-large);
	--sl-input-label-color: var(--rv-font-color-light);

	/* Help text */
	--sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
	--sl-input-help-text-font-size-medium: var(--sl-font-size-small);
	--sl-input-help-text-font-size-large: var(--sl-font-size-medium);
	--sl-input-help-text-color: var(--rv-font-color-light);

	/* Toggles (checkboxes, radios, switches) */
	--sl-toggle-size-small: 0.875rem; /* 14px */
	--sl-toggle-size-medium: 1.125rem; /* 18px */
	--sl-toggle-size-large: 1.375rem; /* 22px */

	/*
   * Overlays
   */

	--sl-overlay-background-color: light-dark(hsl(0 0% 0% / 50%), hsl(0 0% 0% / 70%));

	/*
   * Panels
   */

	--sl-panel-background-color: var(--sl-color-neutral-0);
	--sl-panel-border-color: var(--sl-color-neutral-200);
	--sl-panel-border-width: 1px;

	/*
   * Tooltips
   */

	--sl-tooltip-border-radius: var(--sl-border-radius-medium);
	--sl-tooltip-background-color: var(--sl-color-neutral-800);
	--sl-tooltip-color: var(--sl-color-neutral-0);
	--sl-tooltip-font-family: var(--sl-font-sans);
	--sl-tooltip-font-weight: var(--sl-font-weight-normal);
	--sl-tooltip-font-size: var(--sl-font-size-small);
	--sl-tooltip-line-height: var(--sl-line-height-dense);
	--sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
	--sl-tooltip-arrow-size: 6px;

	/*
   * Z-indexes
   */

	--sl-z-index-drawer: 700;
	--sl-z-index-dialog: 800;
	--sl-z-index-dropdown: 900;
	--sl-z-index-toast: 950;
	--sl-z-index-tooltip: 1000;
}
/* Extensions */
:root,
:host {
	--rv-rhythm: 8px;
	--rv-border-width-s: 1px;
	--rv-border-width-m: 2px;
	--rv-border-width-w: 3px;
	--rv-touchmin: 40px;
	--rv-transition-smoothstep: cubic-bezier(0.53, 0.2, 0.04, 0.96);
	--rv-transition-out-back: cubic-bezier(0.43, 1.91, 0.64, 1);
	--rv-shadow-up: 0 0 16px light-dark(hsl(240 3.8% 46.1% / 12%), rgb(0 0 0 / 24%));

	/* https://linear-easing-generator.netlify.app/ */
	/* mass: 1, stiffness: 80, damping: 20, velocity: 0 */
	--rv-ease-spring: linear(
		0,
		0.005,
		0.02 2%,
		0.081 4.5%,
		0.469 15.2%,
		0.567,
		0.65,
		0.722 24.4%,
		0.784,
		0.835 31.1%,
		0.878 34.9%,
		0.914 39.1%,
		0.942 43.8%,
		0.964 49.1%,
		0.979 55.4%,
		0.989 62.4%,
		0.995 71.1%,
		1
	);

	--rv-letter-spacing-x-denser: -0.015em; /* 20px */
	--rv-letter-spacing-2x-denser: -0.02em; /* 28px, 34px */

	--rv-icon-size-m: 1.5rem; /* 24px */

	--rv-color-alpha-50: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
	--rv-color-alpha-100: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.16));
	--rv-color-alpha-200: light-dark(rgba(0, 0, 0, 0.17), rgba(255, 255, 255, 0.24));
	--rv-color-alpha-300: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.24));
	--rv-color-alpha-400: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25));
	--rv-color-alpha-500: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
	--rv-color-alpha-600: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
	--rv-color-alpha-700: light-dark(rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.35));
	--rv-color-alpha-800: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
	--rv-color-alpha-900: light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6));
	--rv-color-alpha-1000: light-dark(rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));

	--rv-font-color-normal: var(--rv-color-alpha-1000);
	--rv-font-color-light: var(--rv-color-alpha-900);
	--rv-font-color-lighter: var(--rv-color-alpha-800);

	--rv-color-light: #fff;
	--rv-color-dark: #000;

	/* Has tweak for 600 in light mode to add a bit more contrast */
	--rv-color-success-50: light-dark(hsl(138.5 76.5% 96.7%), hsl(144.3 53.6% 16%));
	--rv-color-success-100: light-dark(hsl(140.6 84.2% 92.5%), hsl(143.2 55.4% 23.5%));
	--rv-color-success-200: light-dark(hsl(141 78.9% 85.1%), hsl(141.5 58.2% 26.3%));
	--rv-color-success-300: light-dark(hsl(141.7 76.6% 73.1%), hsl(140.8 64.2% 31.8%));
	--rv-color-success-400: light-dark(hsl(141.9 69.2% 58%), hsl(140.3 68% 39.2%));
	--rv-color-success-500: light-dark(hsl(142.1 70.6% 45.3%), hsl(141.1 64.9% 43%));
	--rv-color-success-600: light-dark(hsl(142.1 76.2% 30.3%), hsl(141.6 72.4% 55.2%));
	--rv-color-success-700: light-dark(hsl(142.4 71.8% 29.2%), hsl(141.7 82.7% 70.1%));
	--rv-color-success-800: light-dark(hsl(142.8 64.2% 24.1%), hsl(141 90.9% 82.1%));
	--rv-color-success-900: light-dark(hsl(143.8 61.2% 20.2%), hsl(142 100% 89.1%));
	--rv-color-success-950: light-dark(hsl(144.3 60.7% 12%), hsl(144 100% 95.5%));
}
/* TODO: this file should be deleted / replaced by default.css */
html,
body {
	margin: 0;
	padding: 0;
}
body {
	box-sizing: border-box;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	/* align-items: center; */     /* Удалено для body */
    justify-content: space-between; /* Центрируем main по вертикали */
}

/* Добавляем правило для rv-footer */
/* rv-footer {
	margin-top: auto;
} */ /* Удалено */

header {
	display: flex;
	justify-content: space-between;

	a {
		text-decoration: none;
	}
	rv-header-unauthed {
			align-self: flex-start;
		}
	}
	header > rv-header-unauthed {
		--browser-warning-display: none;
	}
	@media screen and (min-width: 449px) {
		h2:first-child {
			max-width: 200px;
		}

		h2:first-child {
			margin-block-end: calc(4 * var(--rv-rhythm)) !important;
		}
	}
	@media screen and (max-width: 448px) {

		rv-header-unauthed {
			padding: calc(2 * var(--rv-rhythm));
		}
		h2 {
			margin-block-end: calc(2 * var(--rv-rhythm)) !important;
		}
		main {
			padding: calc(2.5 * var(--rv-rhythm));
		}
		p {
			margin-inline-start: unset !important;
			display: inline-block;
		}

		h3 {
			margin-inline-start: 0 !important;
			margin-block-start: calc(2 * var(--rv-rhythm));
			margin-block-end: calc(2 * var(--rv-rhythm));
		}
		ul,
		ol {
			margin-inline-start: 0 !important;
		}
	}

@media (prefers-color-scheme: light) {
	img.icon {
		filter: brightness(0);
	}
}
@layer reset {
				/* TODO: collapse these into a common theme as well */

				body {
					overflow-x: clip;
					overflow-y: auto;
				}

				main {
					flex-grow: 1;
					width: min(100%, 1120px);
					margin: 0 auto;
					padding: clamp(12px, 4vh, 32px) clamp(24px, 6vw, 72px);
					align-items: center;
					justify-content: center;
					display: flex;
					flex-direction: column;
					text-align: center;
					gap: clamp(4px, 1.5vh, 16px);

					p {
						margin: 0 !important;
						font-size: clamp(20px, 2.2vw, 28px);
						line-height: 1.3;
						text-wrap: balance;
						max-width: min(60ch, 100%);
					}

					.punctuation {
						display: inline-flex;
					}

					#headline {
						font-weight: var(--sl-font-weight-semibold);
						font-size: clamp(44px, 5.5vw, 68px) !important;


						span {
							background: linear-gradient(
								-45deg,
								#6a719f,
								#734c72,
								#84a76e,
								#8c7aca,
								#b14b44,
								#b3867b,
								#b8a947,
								#cd7221
							);
							background-size: 600% 600%;
							animation: gradient 30s ease infinite;

							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}

					&:has(rv-madlib-tooltip:focus-within),
					&:has(rv-madlib-tooltip:hover) {
						rv-madlib-tooltip::part(span):not(:hover) {
							background: var(--sl-color-primary-200);
						}
					}
				}

				@keyframes gradient {
					0% {
						background-position: 0% 50%;
					}
					50% {
						background-position: 100% 50%;
					}
					100% {
						background-position: 0% 50%;
					}
				}
				rv-madlib-tooltip {
					display: inline-flex;
					line-height: calc(1lh - 4px);
					margin: 2px 0;
				}

				rv-madlib-tooltip:not(:defined) {
					span:not([slot]) {
						background: var(--sl-color-primary-100);
						padding: 2px;
						position: relative;
						border-radius: calc(var(--rv-rhythm) / 4);
					}
					span[slot="tooltip"] {
						display: none;
					}
				}

				.inspiration {
					position: absolute;
				}

				rv-header-unauthed {
					margin-top: calc(0.5 * var(--rv-rhythm));
					flex-direction: row-reverse;
				}

				.landing {
					position: absolute;
					width: 100vw;
					height: 100vh;
					overflow-x: clip;
					overflow-y: auto;
					z-index: -1;
					pointer-events: none;
				}
			}

	rv-footer {
		footer {
			width: 100%; /* Добавлено */
			box-sizing: border-box; /* Добавлено */
			display: flex;
			align-items: center;
			justify-content: center !important; /* Изменено с space-between */
				gap: var(--rv-rhythm);
				padding: calc(2 * var(--rv-rhythm)) calc(3 * var(--rv-rhythm));

			div { /* Это тот самый div со ссылками */
				display: flex;
				align-items: center;
				justify-content: center !important; /* Добавлено !important для теста */
				gap: var(--rv-rhythm);
			}
		}
	}

	/* Заменяем стили для rv-footer на стили для .footer-placeholder */
	.footer-placeholder {
		width: 100%; /* Копируем ширину */
		box-sizing: border-box;
		display: flex; /* Копируем flex */
		align-items: center;
		justify-content: center !important; /* Копируем центрирование */
		gap: var(--rv-rhythm);
		padding: calc(2 * var(--rv-rhythm)) calc(3 * var(--rv-rhythm)); /* Копируем padding */
		color: var(--rv-font-color-lighter); /* Добавим цвет текста для видимости */

		div { /* Стили для внутреннего div со ссылками */
			display: flex;
			align-items: center;
			justify-content: center !important; /* Копируем центрирование */
			gap: var(--rv-rhythm);

			a { /* Стили для ссылок внутри */
				color: var(--rv-font-color-lighter); 
				text-decoration: none;
			}
			a:hover {
				color: var(--rv-font-color-normal);
			}
		}
	}

	/* Добавим базовый стиль для .header-placeholder */
	.header-placeholder {
		margin-top: calc(0.25 * var(--rv-rhythm));
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.header-placeholder a {
		display: inline-flex;
		width: min(100%, 360px);
		justify-content: center;
	}

	.phone-media { /* Медиа-превью в шапке (стилизованный блок телефона) */
		position: relative;
		width: clamp(260px, 32vw, 440px);
		max-width: 100%;
		aspect-ratio: 912 / 1860; /* Соотношение сторон исходного изображения телефона */
		margin: 0 auto clamp(8px, 2vh, 20px); /* Центрируем и добавляем минимальный отступ снизу */
	}

	.phone-media__frame {
		width: 100%;
		height: auto;
		display: block;
	}

		.phone-media__video {
			position: absolute;
			top: 1%;
			left: 3%;
			width: 93%;
			height: 98%;
			border-radius: 32px;
			object-fit: cover;
			background-color: #000;
			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
		}

	/* Стили для кнопки внутри плейсхолдера */
	.header-placeholder rv-gradient-button {
		/* Применяем фоновый градиент как запасной вариант */
		background: linear-gradient(to right, #34D399, #059669); /* Зеленый градиент (пример) */
		color: white; /* Цвет текста */
		border: none; /* Убираем рамку, если есть */
		padding: 0.6rem 1.5rem; /* Внутренние отступы (можно подстроить) */
		border-radius: 8px; /* Скругление углов (можно подстроить) */
		cursor: pointer;
		display: inline-block; /* Важно для правильного отображения */
		width: 100%;
	}
	.header-placeholder rv-gradient-button:hover {
		opacity: 0.9; /* Небольшой эффект при наведении */
	}

/* Стили для контейнера анимации и сообщений */
.text-animation-container {
    position: absolute; /* Позиционируем абсолютно */
    top: 0;
    left: 0;
    width: 100vw; /* На всю ширину */
    height: 100vh; /* На всю высоту */
    overflow: hidden; /* Скрываем то, что выходит за пределы */
    z-index: -1; /* Помещаем под основной контент */
    pointer-events: none; /* Чтобы не мешал кликать по кнопкам/ссылкам */
}

.animated-message {
    position: absolute; /* Для позиционирования внутри контейнера */
    background-color: rgba(128, 128, 128, 0.15); /* Полупрозрачный фон */
    color: var(--rv-font-color-normal); /* Цвет текста из переменных */
    padding: 10px 15px;
    border-radius: 12px;
    font-size: var(--sl-font-size-medium); /* Размер шрифта из переменных */
    max-width: 300px; /* Ограничиваем ширину */
    text-align: left;
    opacity: 0; /* Начальная прозрачность для анимации */
    will-change: transform, opacity, filter; /* Подсказка браузеру для оптимизации */
    /* transform-origin: center center; - Не нужно, т.к. используем translate(-50%, -50%) */
}



@media screen and (max-width: 1440px) {
	main {
		width: min(100%, 960px);
		margin: 0 auto;
		padding: clamp(12px, 4vh, 32px) clamp(24px, 6vw, 64px);
		gap: clamp(8px, 3vh, 24px);
	}

	main > section p {
		font-size: clamp(20px, 2.2vw, 26px);
	}

	main #headline {
		font-size: clamp(40px, 5vw, 62px) !important;
		margin-bottom: clamp(8px, 2.5vh, 18px);
	}

	.phone-media {
		width: clamp(250px, 34vw, 420px);
		margin: 0 auto clamp(20px, 5vh, 52px);
	}

	.header-placeholder {
		margin-top: clamp(20px, 5vh, 48px);
	}

	.header-placeholder a {
		width: min(100%, 300px);
	}
}

@media screen and (max-width: 1024px) {
	main {
		width: min(100%, 720px);
		padding: clamp(12px, 4vh, 32px) clamp(20px, 6vw, 48px);
		gap: clamp(8px, 3vh, 24px);
	}

	main > section p {
		font-size: clamp(18px, 3vw, 24px);
	}

	main #headline {
		font-size: clamp(32px, 5.2vw, 52px) !important;
		margin-bottom: clamp(8px, 2.5vh, 18px);
	}

	.phone-media {
		width: clamp(220px, 48vw, 360px);
		margin: 0 auto clamp(16px, 5vh, 40px);
	}

	.header-placeholder {
		margin-top: clamp(16px, 5vh, 36px);
	}

	.header-placeholder a {
		width: min(100%, 260px);
	}
}

@media screen and (max-width: 768px) {
	main {
		width: 100%;
		padding: calc(2 * var(--rv-rhythm)) var(--rv-rhythm);
		align-items: center;
		gap: calc(2 * var(--rv-rhythm));
	}

	main > section p {
		font-size: var(--sl-font-size-large);
	}

	.phone-media {
		max-width: 320px;
	}

	.header-placeholder {
		width: 100%;
		margin-top: calc(1.5 * var(--rv-rhythm));
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header-placeholder a,
	.header-placeholder rv-gradient-button {
		display: block;
		width: 100%;
		text-align: center;
	}



	.footer-placeholder div {
		flex-direction: column;
		gap: calc(1.5 * var(--rv-rhythm));
	}
}

/* Стили для мобильной версии */
@media screen and (max-width: 448px) {
    .phone-media {
        display: none; /* Скрываем изображение на маленьких экранах */
    }
    /* Можно добавить другие мобильные стили сюда, если нужно */
}

/* Стили для анимации изображений */
.image-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* чтобы изображения не выходили за пределы экрана */
    z-index: -2; /* Ниже чем текстовая анимация, если она тоже fixed */
    pointer-events: none; /* Чтобы не мешали взаимодействию с основным контентом */
}


.animated-image {
    position: absolute;
    /* Начальные стили для opacity и transform будут установлены JS через Web Animations API */
    /* Можно задать максимальный размер, чтобы изображения не были слишком большими */
    max-width: 300px; /* Пример */
    max-height: 300px; /* Пример */
    object-fit: contain; /* Сохраняет пропорции изображения */
    will-change: transform, opacity; /* Оптимизация для анимации */
    border-radius: 8px; /* Небольшое скругление углов, опционально */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Легкая тень, опционально */
}