.workflow {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 100px;
	padding-block: 110px;
}
h2 {
	font-size: clamp(32px, 3.5vw, 46px);
	letter-spacing: -1.9px;
	line-height: 1.12;
	font-weight: 550;
}
.section-intro .eyebrow {
	color: var(--accent);
}
.section-intro > p:last-child {
	color: var(--muted);
	max-width: 340px;
	font-size: 15px;
}
.steps article {
	display: flex;
	gap: 24px;
	border-top: 1px solid var(--line);
	padding: 24px 0 9px;
}
.step-number {
	font:
		12px ui-monospace,
		monospace;
	color: var(--accent);
	padding-top: 4px;
}
.steps h3 {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.4px;
	margin-bottom: 8px;
}
.steps p {
	color: var(--muted);
	font-size: 14px;
}
.code-section {
	background: #eae8df;
	border-block: 1px solid var(--line);
	padding-block: 72px;
}
.code-layout {
	display: grid;
	grid-template-columns: 0.8fr 1.3fr;
	gap: 70px;
	align-items: center;
}
.code-layout > div {
	min-width: 0;
}
.code-layout > div > p:not(.eyebrow) {
	max-width: 350px;
	color: var(--muted);
	font-size: 14px;
}
.light-link {
	font-size: 14px;
}
.code-layout .code-note {
	font-size: 12px;
	margin-top: 30px;
}
.code-window {
	background: #242824;
	color: #e4e7dc;
	border: 1px solid #484b44;
	border-radius: 7px;
	overflow: hidden;
}
.code-title {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #484b44;
	padding: 14px 20px;
	font:
		10px ui-monospace,
		monospace;
	color: #c2c4b9;
}
pre {
	overflow: auto;
	font:
		12px/1.9 ui-monospace,
		SFMono-Regular,
		monospace;
	padding: 20px;
	margin: 0;
	tab-size: 2;
}
.code-green {
	color: #b9d69b;
}
.code-purple {
	color: #d4b6f1;
}
.code-layout > .code-window > p:not(.eyebrow) {
	max-width: none;
	font-size: 11px;
	border-top: 1px solid #484b44;
	padding: 12px 20px;
	margin: 0;
	color: #c2c4b9;
}
.closing {
	text-align: center;
	padding-block: 94px;
}
.closing h2 {
	margin-block: 17px;
}
.closing > p:not(.eyebrow) {
	color: var(--muted);
	font-size: 14px;
}
.closing .button {
	margin-top: 14px;
}
.closing .availability {
	font:
		10px/1.7 ui-monospace,
		monospace;
	margin: 20px 0 0;
}

.skip {
	position: fixed;
	left: 16px;
	top: -80px;
	padding: 10px;
	background: white;
	z-index: 50;
}
.skip:focus {
	top: 12px;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.guide {
	max-width: 820px;
	padding-block: 65px 80px;
}
.guide h1 {
	font-size: clamp(42px, 6vw, 66px);
	letter-spacing: -3px;
}
.guide .intro {
	max-width: 620px;
}
.guide section {
	margin-top: 48px;
}
.guide h2 {
	font-size: 29px;
	letter-spacing: -1px;
}
.guide h3 {
	font-size: 19px;
}
.notice {
	border-left: 3px solid var(--accent);
	background: #eee9df;
	padding: 18px 22px;
	font-size: 14px;
}
.notice p {
	margin-bottom: 0;
}
.command {
	background: #242824;
	color: #f0f1e9;
	border-radius: 5px;
}
.command-header {
	padding: 8px 18px;
	border-bottom: 1px solid #484b44;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font:
		11px ui-monospace,
		monospace;
}
.copy-button {
	background: transparent;
	border: 1px solid #737a6a;
	color: white;
	border-radius: 3px;
	padding: 9px 14px;
	min-height: 44px;
}
.copy-status {
	font-size: 13px;
	min-height: 21px;
	margin-top: 8px;
}
.guide li {
	margin-block: 8px;
}
.resource-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.resource-list a {
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 4px;
}
.error-page {
	min-height: 65vh;
}

.guide p code,
.guide li code {
	overflow-wrap: anywhere;
}

.command + p {
	margin-top: 16px;
}

.prompt {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: 14px;
	line-height: 1.8;
}
.setup-note {
	font-size: 13px;
	color: var(--muted);
}
.agent-setup {
	padding-bottom: 24px;
}