:root {
	--paper: #eee6d9;
	--paper-deep: #e2d5c3;
	--ink: #2b211c;
	--muted: #78695f;
	--orange: #c95f2d;
	--orange-dark: #9f431c;
	--code: #e4d8c7;
	--terminal: #332720;
	--terminal-ink: #f1e8dc;
	--sans: "IBM Plex Sans", Arial, sans-serif;
	--mono: "IBM Plex Mono", Consolas, monospace;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body,
h1,
h2,
p,
pre {
	margin: 0;
}

body {
	background: var(--paper);
	color: var(--ink);
	font: 18px/1.55 var(--sans);
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

header,
main,
footer {
	width: min(100% - 48px, 960px);
	margin: 0 auto;
}

header {
	display: flex;
	min-height: 96px;
	align-items: center;
	justify-content: flex-end;
}

header nav {
	display: flex;
	gap: 28px;
	color: var(--muted);
	font-size: 15px;
}

header a,
.actions a,
footer a {
	transition: color 140ms ease;
}

header a:hover,
header a:focus-visible,
.actions a:hover,
.actions a:focus-visible,
footer a:hover,
footer a:focus-visible {
	color: var(--orange);
}

.intro {
	padding: clamp(90px, 14vw, 160px) 0 clamp(110px, 15vw, 180px);
}

.section-heading > p,
.terminal > p {
	font: 500 12px/1.4 var(--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

h1 {
	max-width: 850px;
	font-size: clamp(76px, 13vw, 150px);
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 0.88;
}

.intro h1 {
	font-family: "Bagel Fat One", var(--sans);
	font-weight: 400;
	letter-spacing: 0;
}

.summary {
	margin-top: 32px;
	color: var(--muted);
	font-size: clamp(20px, 2.4vw, 26px);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 30px;
	margin-top: 42px;
	font-size: 16px;
	font-weight: 500;
}

.actions .download {
	color: var(--orange-dark);
}

.actions span {
	margin-left: 5px;
}

.content-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 210px;
	gap: 72px;
	align-items: start;
	padding-bottom: clamp(110px, 15vw, 170px);
}

.section-heading {
	display: grid;
	grid-template-columns: 180px 1fr;
	align-items: baseline;
	margin-bottom: 34px;
}

.section-heading > p {
	color: var(--orange-dark);
}

h2 {
	font-size: clamp(30px, 4vw, 45px);
	font-weight: 500;
	letter-spacing: -0.025em;
}

.code-block,
.terminal {
	border-radius: 10px;
}

.code-block {
	background: var(--code);
}

pre {
	overflow-x: auto;
	padding: clamp(26px, 4vw, 46px);
	font: 500 clamp(13px, 1.55vw, 16px)/1.7 var(--mono);
	tab-size: 4;
}

.example pre {
	font-size: clamp(15px, 1.8vw, 18px);
	line-height: 1.65;
}

.variable {
	color: #713b29;
	font-weight: 600;
}

.call {
	color: #b44820;
	font-weight: 600;
}

.property {
	color: #5f493e;
	font-weight: 600;
}

.keyword {
	color: #922e27;
	font-weight: 600;
}

.string {
	color: #42683f;
}

.terminal {
	margin-top: 24px;
	padding-top: 24px;
	background: var(--terminal);
	color: var(--terminal-ink);
}

.terminal > p {
	padding: 0 clamp(26px, 4vw, 46px);
	color: #bba99d;
}

.terminal pre {
	padding-top: 16px;
}

.prompt,
.progress {
	color: #e77d47;
}

.guide-links {
	display: block;
}

.guide-links a {
	display: block;
	padding: 3px 0;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.5;
	transition: color 140ms ease;
}

.guide-links h2 {
	margin: 0 0 7px;
	color: var(--orange-dark);
	font: 500 12px/1.4 var(--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.guide-links h2:not(:first-child) {
	margin-top: 24px;
}

.guide-links a:hover,
.guide-links a:focus-visible {
	color: var(--orange-dark);
}

footer {
	display: flex;
	justify-content: space-between;
	padding: 30px 0 48px;
	color: var(--muted);
	font-size: 14px;
}

footer a {
	color: var(--orange-dark);
}

.article {
	width: min(100% - 48px, 760px);
	padding: clamp(75px, 11vw, 125px) 0 clamp(110px, 15vw, 170px);
}

.article-label {
	margin-bottom: 24px;
	color: var(--orange-dark);
	font: 500 12px/1.4 var(--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.article h1 {
	margin-bottom: clamp(65px, 9vw, 100px);
	font-size: clamp(46px, 7vw, 76px);
	line-height: 1.02;
}

.article > p,
.article li {
	font-size: clamp(18px, 2.2vw, 21px);
	line-height: 1.65;
}

.article :not(pre) > code {
	padding: 0.1em 0.3em;
	border-radius: 4px;
	background: var(--paper-deep);
	font: 500 0.85em var(--mono);
}

.article a {
	color: var(--orange-dark);
}

.article a:hover,
.article a:focus-visible {
	color: var(--orange);
}

.article > p {
	margin: 28px 0;
}

.article ol {
	margin: 30px 0;
	padding-left: 28px;
}

.article li {
	padding: 5px 0 5px 8px;
}

.article strong {
	font-weight: 600;
}

.article pre,
.article .code-block {
	width: min(920px, calc(100vw - 48px));
	margin: 40px 0 40px 50%;
	border-radius: 10px;
	background: var(--code);
	transform: translateX(-50%);
}

.article h2 {
	margin: 70px 0 20px;
	font-size: clamp(28px, 4vw, 38px);
}

.article blockquote {
	margin: clamp(65px, 9vw, 95px) 0;
	padding: 0;
	border: 0;
	color: var(--orange-dark);
	font-size: clamp(28px, 4.5vw, 44px);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.article blockquote p {
	margin: 8px 0;
}

.statement {
	margin: clamp(65px, 9vw, 95px) 0;
	color: var(--orange-dark);
	font-size: clamp(28px, 4.5vw, 44px);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.statement p + p {
	margin-top: 8px;
}

@media (max-width: 800px) {
	.content-layout {
		grid-template-columns: 1fr;
		gap: 80px;
	}

}

@media (max-width: 640px) {
	header,
	main,
	footer {
		width: min(100% - 36px, 960px);
	}

	header {
		min-height: 76px;
	}

	.intro {
		padding-top: 70px;
	}

	h1 {
		font-size: 68px;
	}

	.section-heading {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	pre {
		font-size: 12px;
	}

	.example pre {
		font-size: 14px;
	}

	.article {
		width: min(100% - 36px, 760px);
		padding-top: 58px;
	}

	.article h1 {
		font-size: 42px;
	}

	.article .code-block {
		width: calc(100vw - 24px);
	}

	.article pre {
		width: calc(100vw - 24px);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	header a,
	.actions a,
	.guide-links a,
	footer a {
		transition: none;
	}
}