html {
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: #333 transparent;
	transition: scrollbar-color 100ms linear;
}
body {
	margin: 0 0 8em;
	background-color: #ddd;
	/* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
	font-family: serif;
}

.wrapper,
header {
	color: #333;
	min-height: 100px;
	background-color: #ccc;
	padding-block: 2em 4em;
	margin-bottom: 4em;
}
header p {
	user-select: none;
}
header .badges .no-ai {
	margin-left: 4px;
}
/* header::before {
	content: "";
	background: url(hand.png);
} */
h1 {
	font-size: 4rem;
	font-weight: 100;
	margin-bottom: 30px;
	clear: right;
}
h2 {
	display: none;
	color: #999;
}
p {
	line-height: 22px;
	color: #666;
}
.grid p {
	color: #999;
}
.container {
	margin-inline: auto;
	width: 1024px;
}
.container_ {
	margin-inline: unset;
	padding-inline: 6em;
}
.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2em 6em;
	padding-bottom: 4em;
}
.grid > div {
	padding-bottom: 1em;
	overflow: auto;
}
.pre-wrapper {
	position: relative;
	border-radius: 10px;
	overflow: clip;
}
.pre-wrapper:hover .pre-cta {
	opacity: 1;
}
.pre-wrapper pre {
	background-color: #aaa;
	color: #666;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 400px;
	padding: 2em;
	border-radius: 8px;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}
.pre-wrapper pre:hover {
	color: #333;
	box-shadow: 0 2px 4px #777 inset;
	scrollbar-color: #333 transparent;
}
pre {
	line-height: 1.2rem;
}
pre.code {
	color: #333;
}
footer img {
	border-radius: 50%;
	float: left;
	width: 30px;
	height: 30px;
}
footer img + span {
	translate: 16px 7px;
	display: inline-block;
}
footer span.black {
	color: #000;
}
.copy {
	display: inline-block;
	width: 8px;
	height: 12px;
	border: #ccc solid 2px;
	pointer-events: none;
}
.copy::after {
	/* biome-ignore lint/complexity/noImportantStyles: inherit overrides without !important */
	content: "" !important;
	all: inherit;
	translate: -6px 2px;
}
div[role="button"]:has(.copy) {
	display: none;
	padding: 8px;
	padding-left: 12px;
	cursor: pointer;
	float: right;
	position: sticky;
	top: 0;
}

.pre-cta {
	position: absolute;
	right: 24px;
	top: 20px;
	opacity: 0;
	transition: opacity 250ms linear;
}
.pre-cta a {
	margin-left: 8px;
	display: inline-block;
}
:is(.pre-cta, a[href^="badges"]) img {
	width: 25px;
	pointer-events: none;
}
.pre-cta a:hover img {
	filter: invert(1);
}
a[href^="badges"] {
	float: right;
	opacity: 0.25;
}
a[href^="badges"]:hover {
	opacity: 1;
}
header + .container_ {
	margin-top: -47px;
}
header + .container_::after {
	content: "";
	clear: both;
	display: block;
}
header .quote-container {
	display: grid;
	grid-template-columns: 2.2fr 1fr;
	gap: 6em;
}
.quote {
	user-select: none;
}
.quote p:first-child {
	font-size: 1.2rem;
	line-height: 1.6rem;
}
.quote p:first-child::before {
	content: "“";
	font-size: 10rem;
	margin-top: 40px;
	position: absolute;
	opacity: 0.2;
}
.quote p:last-child::before {
	content: "— ";
}

footer .column {
	clear: both;
	columns: 3;
	column-gap: 6em;
	padding-block: 2em;
}
footer img[alt^="avatar"] {
	color-scheme: only light;
}
footer img[alt^="avatar"],
footer img[alt^="avatar"] + span {
	user-select: none;
}
footer img[alt="avatar 2"],
footer img[alt="avatar 2"] + span {
	display: none;
}

.wrapper.css .grid {
	grid-template-columns: 2.2fr 1fr;
}

td {
	vertical-align: baseline;
	padding: 0 16px 16px 0;
	line-height: 1.4rem;
}
td:last-child {
	color: #666;
}

@media screen and (width < 1230px) {
	h1 + div {
		columns: 2 !important;
	}
	.grid {
		grid-template-columns: 1fr 1fr;
	}
	.wrapper.css .container {
		margin-inline: unset;
		padding-inline: 6em;
		width: unset;
	}
	header .quote-container {
		grid-template-columns: 1fr;
	}
	footer .column {
		columns: 2;
	}
}
/* @media screen and (width < 480px) { */
@media screen and (width < 768px) {
	h1 {
		font-size: xxx-large;
	}
	h1 + div {
		columns: 1 !important;
	}
	.grid,
	.wrapper.css .grid {
		grid-template-columns: 1fr;
	}
	.container_,
	.wrapper.css .container {
		padding-inline: 2em;
	}
	footer .column {
		columns: 1;
	}
}
@media screen and (width < 480px) {
	footer img[alt="avatar"],
	footer img[alt="avatar"] + span {
		display: none;
	}
	footer img[alt="avatar 2"],
	footer img[alt="avatar 2"] + span {
		display: inline-block;
	}
	.pre-wrapper pre {
		color: #333;
	}
}

@media screen and (prefers-color-scheme: dark) and (width < 480px) {
	body {
		background-color: #333;
	}
	.wrapper,
	header {
		background-color: #666;
		color: #ddd;
	}
}

div::selection {
	--_bg: var(--bg, #333);
	--_c: var(--c, #fff);

	background-color: var(--_bg);
	color: var(--_c);
}
.grid > div .code {
	--_bg: var(--bg, #333);
	color: var(--_bg);
}
.grid.demo > div:nth-child(2) {
	--bg: #600;
	--c: #f99;
}
.grid.demo > div:nth-child(3) {
	--bg: #060;
	--c: #9f9;
}
.grid.demo > div:nth-child(4) {
	--bg: #750;
	--c: #fe9;
}
.grid.demo > div:nth-child(5) {
	--bg: #057;
	--c: #9ef;
}
.grid.demo > div:nth-child(6) {
	--bg: #507;
	--c: #e9f;
}

.grid > div:hover p {
	color: #666;
}
.grid > div p {
	transition: color 250ms linear;
	user-select: none;
}