@font-face {
	font-family: Demo Sans;
	src: url(vendor/noto-sans-sc-400.woff2) format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: Demo Sans;
	src: url(vendor/noto-sans-sc-600.woff2) format("woff2");
	font-weight: 600;
	font-display: swap;
}
:root {
	--paper: #f6f5f1;
	--ink: #242824;
	--muted: #777c74;
	--line: #dbded5;
	--green: #37644b;
	--sample-width: 360px;
	color-scheme: light;
	font-family: "Demo Sans", "PingFang SC", sans-serif;
	color: var(--ink);
	background: var(--paper);
	font-synthesis: none;
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
}
main {
	max-width: 1320px;
	padding: 44px 48px 32px;
	margin: auto;
}
a {
	color: inherit;
	text-underline-offset: 4px;
}
header {
	margin-bottom: 36px;
}
h1 {
	margin: 0;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.4;
}
.subtitle {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--muted);
}
.install {
	margin-bottom: 36px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: 10px;
}
.install h2 {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
}
.install p {
	margin: 16px 0 10px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--muted);
}
.install pre {
	margin: 0;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 6px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.install code {
	font-family: ui-monospace, monospace;
	font-size: 13px;
	line-height: 1.8;
}
.install blockquote {
	margin: 0 0 16px;
	padding-left: 14px;
	border-left: 2px solid var(--line);
	font-size: 13px;
	line-height: 1.8;
}
.install-docs {
	font-size: 12px;
	color: var(--muted);
}
.card-heading {
	margin: 0;
	padding: 18px 20px 0;
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
}
.after .card-heading {
	color: var(--green);
}
.case {
	margin-bottom: 25px;
}
.case-header {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 12px;
}
.case-number {
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--muted);
}
.case h2 {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}
.case-description {
	font-size: 11px;
	color: var(--muted);
	margin-left: auto;
}
.pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
}
.panel {
	min-width: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
}
.panel.after {
	border-color: #c7d3c6;
}
.stage {
	min-height: 174px;
	padding: 28px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sample {
	width: var(--sample-width);
	max-width: 100%;
	flex-shrink: 0;
	container-type: inline-size;
	text-autospace: no-autospace;
	overflow-wrap: normal;
	line-break: auto;
	word-break: normal;
}
.sample p {
	margin: 0;
	font-size: 25px;
	line-height: 1.65;
	letter-spacing: 0;
	font-weight: 400;
}
.caption {
	border-top: 1px solid #eef0ea;
	font-size: 11px;
	color: var(--muted);
	padding: 12px 20px;
	line-height: 1.7;
	min-height: 44px;
}
.after .caption {
	color: var(--green);
}
.sample .orphan,
.sample .semantic {
	max-width: 12.5em;
	margin-inline: auto;
}
.sample .semantic {
	max-width: 9.5em;
}
.nowrap {
	white-space: nowrap;
}
.sample .headline {
	font-weight: 600;
	font-size: 32px;
	line-height: 1.55;
	text-align: center;
}
.responsive-break {
	display: none;
}
.headline-line {
	white-space: nowrap;
}
.sample .product {
	font-size: 25px;
	max-width: 14em;
	margin-inline: auto;
}
.sample .optical {
	font-size: 32px;
	text-align: center;
	line-height: 1.7;
	font-weight: 600;
	padding-inline: 1em;
	position: relative;
	isolation: isolate;
}
.optical::before {
	content: "";
	position: absolute;
	top: -14px;
	bottom: -14px;
	left: 50%;
	border-left: 1px dashed #c4cfc1;
	z-index: -1;
}
.hang {
	display: inline-block;
	width: 0;
	overflow: visible;
}
.sample .optical::after {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	background: #7e997d;
	border-radius: 50%;
	position: absolute;
	left: calc(50% - 2.5px);
	top: -17px;
}
footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 38px;
	border-top: 1px solid var(--line);
	padding-top: 24px;
}
footer span {
	font-size: 10px;
	color: var(--muted);
	line-height: 1.9;
}
@container (max-width: 430px) {
	.responsive-break {
		display: block;
	}
	.headline-line {
		white-space: normal;
	}
}
@container (max-width: 290px) {
	.sample .headline,
	.sample .optical {
		font-size: 28px;
	}
	.long-name {
		white-space: normal;
	}
}
@media (max-width: 760px) {
	.pair {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
	.case-description {
		display: none;
	}
	main {
		padding: 28px 20px;
	}
	h1 {
		font-size: 26px;
	}
}