.code-section {
	background: #fff;
}

.section-heading-wide {
	max-width: 840px;
}

.example-switcher {
	display: flex;
	border-bottom: 1px solid #cad5c8;
	margin-bottom: 34px;
	gap: 0;
}

.example-tab {
	flex: 1 1 0;
	text-align: left;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 17px 8px 17px 5px;
	color: #69756b;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: color var(--interaction-duration) ease, border-color var(--interaction-duration) ease;
}

.example-tab span {
	font: 10px "DM Mono", monospace;
	margin-right: 9px;
}

.example-tab[aria-selected="true"] {
	border-bottom-color: #466b37;
	color: var(--ink);
}

.example-tab:hover {
	color: var(--ink);
}

.example-panel {
	animation: fade-in .22s ease;
}

.example-intro {
	display: flex;
	gap: 40px;
	align-items: end;
	margin-bottom: 24px;
}

.example-intro>div {
	flex: 1 1 0;
}

.example-intro>p {
	flex: .55 1 0;
}

.example-kicker {
	font: 11px "DM Mono", monospace;
	color: var(--meta-ink);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.example-intro h3 {
	font-size: 31px;
	font-weight: 500;
	margin: 9px 0 0;
}

.example-intro p {
	font-size: 14px;
	line-height: 1.65;
	margin: 0;
}

.code-grid {
	display: flex;
	gap: 16px;
}

.code-grid>.code-card {
	flex: 0 1 calc((100% - 16px) / 2);
}

.code-card {
	min-width: 0;
	margin: 0;
	border: 1px solid #dce4db;
	border-radius: var(--panel-radius);
	overflow: hidden;
	background: #f9faf9;
}

.code-card.vue-card {
	background: #f4f9ef;
	border-color: #d0e1c5;
}

.code-card figcaption {
	height: 46px;
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid #e1e7df;
	padding: 0 16px;
	font: 12px "DM Mono", monospace;
	color: #273428;
}

.code-card figcaption small {
	margin-left: auto;
	color: var(--muted);
	font-size: 10px;
}

.code-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: inline-block;
}

.react-dot {
	background: #70bad4;
}

.vue-dot {
	background: #6ca846;
}

.code-card pre {
	margin: 0;
	padding: 20px;
	overflow: auto;
	min-height: 360px;
	max-height: 465px;
	font: 12px/1.72 "DM Mono", Consolas, monospace;
	color: #2c3830;
	tab-size: 2;
}

.code-card code {
	font: inherit;
}

.example-takeaway {
	border-left: 3px solid #acd771;
	padding: 5px 0 5px 17px;
	margin: 22px 0 0;
	font-size: 13px;
}

.example-takeaway strong {
	color: var(--ink);
}

.code-note {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	border-top: 1px solid var(--line);
	margin-top: 42px;
	padding-top: 19px;
	font-size: 12px;
	color: var(--muted);
}

@media(max-width:760px) {
	.example-switcher {
		flex-wrap: wrap;
	}

	.example-tab {
		flex-basis: 50%;
	}

	.code-grid,
	.example-intro {
		flex-direction: column;
	}

	.code-grid>.code-card {
		flex-basis: auto;
	}

	.example-intro {
		gap: 8px;
	}

	.code-card pre {
		min-height: 0;
		max-height: 380px;
	}
}

@media(max-width:500px) {
	.example-switcher {
		gap: 4px;
	}

	.example-tab {
		font-size: 11px;
		padding: 13px 4px;
		white-space: normal;
	}

	.example-tab span {
		display: block;
		margin-bottom: 3px;
	}

	.example-intro h3 {
		font-size: 27px;
	}

	.code-card pre {
		font-size: 11px;
		padding: 15px;
	}

	.code-note {
		align-items: flex-start;
		flex-direction: column;
	}
}