html {
	font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

::-webkit-scrollbar {
	width: 12px;
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: #e4e4e7;
	border-radius: 8px;
	border: 2px solid #f4f4f5;
	min-height: 40px;
	transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
	background: #d4d4d8;
}
::-webkit-scrollbar-corner {
	background: transparent;
}
html.dark ::-webkit-scrollbar-thumb {
	background: #27272a;
	border: 2px solid #18181b;
}
html.dark ::-webkit-scrollbar-thumb:hover {
	background: #3f3f46;
}

/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: #e4e4e7 #f4f4f5;
}
html.dark * {
	scrollbar-color: #27272a #18181b;
}

/* Responsive: Remove card and make fullscreen on small screens */
@media (max-width: 640px) {
	body,
	main {
		padding: 0 !important;
		margin: 0 !important;
	}
	main {
		height: 100dvh;
		width: 100vw;
		overflow-x: hidden;
		overflow-y: auto;
		justify-content: flex-start;
	}
	.main-card {
		box-sizing: border-box;
		background: none !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		padding: 4rem 0.5rem 5rem 0.5rem !important;
		max-width: 100vw !important;
		width: 100vw !important;
		min-height: 100dvh !important;
	}
	#chart-container,
	#y-prob-container {
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100vw !important;
		overflow-x: auto;
	}
	#myChart,
	#yProbChart {
		width: 100% !important;
		max-width: 100vw !important;
		height: auto !important;
	}
}