::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #EFEBE6;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #DCD6CF;
}

#toast {
	visibility: hidden;
	min-width: 250px;
	margin-left: -125px;
	background-color: #1E293B;
	color: #FCF9F6;
	text-align: center;
	border-radius: 8px;
	padding: 12px;
	position: fixed;
	z-index: 100;
	left: 50%;
	bottom: 30px;
	font-size: 14px;
	transition: visibility 0s, opacity 0.3s linear;
	opacity: 0;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

#toast.show {
	visibility: visible;
	opacity: 1;
}

.code-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	font-family: 'Fira Code', monospace;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #2563EB;
}

.code-label::before {
	content: '';
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 999px;
	background: #2563EB;
	box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.1);
}

.code-block,
.blog-code-block,
article pre:not(.unstyled) {
	position: relative;
	overflow: hidden;
	border: 1px solid #E2E8F0;
	border-radius: 1rem;
	background: #FFFFFF !important;
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
	color: #1E293B !important;
	font-family: 'Fira Code', monospace;
	font-size: 0.83rem;
	line-height: 1.75;
	tab-size: 4;
}

.code-block::before,
.blog-code-block::before {
	content: '';
	display: block;
	height: 2.25rem;
	border-bottom: 1px solid #E2E8F0;
	background:
		radial-gradient(circle at 1.25rem 50%, #CBD5E1 0 0.28rem, transparent 0.3rem),
		radial-gradient(circle at 2.15rem 50%, #CBD5E1 0 0.28rem, transparent 0.3rem),
		radial-gradient(circle at 3.05rem 50%, #CBD5E1 0 0.28rem, transparent 0.3rem),
		linear-gradient(90deg, #F8FAFC, #F1F5F9);
}

.code-block pre,
.blog-code-block pre,
.prose .code-block pre,
.prose .blog-code-block pre,
article pre:not(.unstyled) {
	margin: 0;
	padding: 1.35rem 1.5rem;
	overflow-x: auto;
	background: transparent !important;
	color: #1E293B !important;
	font-family: 'Fira Code', monospace;
	font-size: 0.83rem;
	line-height: 1.75;
	white-space: pre;
	tab-size: 4;
}

.code-block code,
.blog-code-block code,
.prose .code-block code,
.prose .blog-code-block code,
article pre:not(.unstyled) code {
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	color: inherit;
	background: transparent;
}

.prose pre:not(.unstyled),
.blog-post-content pre:not(.unstyled) {
	border-radius: 1rem;
	border: 1px solid #E2E8F0;
	background: #FFFFFF;
	color: #1E293B;
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.prose pre span,
.blog-post-content pre span {
	color: inherit;
}

.prose pre .text-slate-400,
.blog-post-content pre .text-slate-400 {
	color: #64748B !important;
}

.prose pre .text-mint-accent,
.blog-post-content pre .text-mint-accent {
	color: #2563EB !important;
}

.prose pre .text-emerald-600,
.blog-post-content pre .text-emerald-600,
.prose pre .text-emerald-400,
.blog-post-content pre .text-emerald-400 {
	color: #059669 !important;
}

.prose pre .text-rose-400,
.blog-post-content pre .text-rose-400 {
	color: #DC2626 !important;
}

/* Tailwind CDN pages use text-mint-cream on dark mint-heading callouts, but the
   runtime Tailwind config does not define mint.cream. Keep those examples readable
   everywhere and prevent the generic article pre rule from forcing dark code text
   inside dark callout/example blocks. */
.text-mint-cream,
.text-mint-cream\/80 {
	color: #F8FAFC !important;
}

.bg-mint-heading pre:not(.unstyled),
.bg-mint-heading pre:not(.unstyled) code,
.bg-mint-heading .text-mint-cream,
.bg-mint-heading .text-mint-cream\/80 {
	color: #F8FAFC !important;
	background: transparent !important;
}

.bg-mint-heading pre:not(.unstyled) {
	border: 0;
	box-shadow: none;
}