:root {
	--ink: #101814;
	--ink-soft: #253129;
	--paper: #f2efe6;
	--paper-light: #faf8f1;
	--line: rgba(16, 24, 20, 0.16);
	--acid: #c9ff47;
	--mint: #89d9b8;
	--orange: #ff7657;
	--muted: #6e776f;
	--mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
	--sans: Inter, "Segoe UI", Helvetica, Arial, sans-serif;
	--serif: Georgia, "Times New Roman", serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	color: var(--ink);
	background: var(--paper);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
}

button,
input {
	font: inherit;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

.skip-link {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100;
	padding: 10px 14px;
	background: var(--acid);
	transform: translateY(-150%);
}

.skip-link:focus {
	transform: translateY(0);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 76px;
	padding: 0 clamp(22px, 4vw, 64px);
	background: rgba(242, 239, 230, 0.92);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(16px);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	width: max-content;
	font-weight: 800;
	font-size: 18px;
	letter-spacing: -0.04em;
	text-decoration: none;
}

.brand-mark {
	position: relative;
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border: 2px solid currentColor;
	border-radius: 50%;
}

.brand-mark::before,
.brand-mark::after {
	content: "";
	position: absolute;
	width: 2px;
	background: currentColor;
	border-radius: 2px;
	transform-origin: bottom center;
}

.brand-mark::before {
	height: 8px;
	top: 5px;
}

.brand-mark::after {
	height: 6px;
	top: 8px;
	transform: rotate(120deg);
}

.brand-mark span {
	width: 4px;
	height: 4px;
	background: var(--orange);
	border-radius: 50%;
}

.brand-dot,
.hero h1 em,
.section-heading h2 em,
.playground-intro h2 em {
	color: var(--orange);
}

.site-header nav {
	display: flex;
	gap: clamp(18px, 3vw, 42px);
}

.site-header nav a,
.nav-spec {
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.nav-spec {
	justify-self: end;
	padding: 10px 14px;
	border: 1px solid var(--ink);
	border-radius: 3px;
}

.hero {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(430px, 0.98fr);
	min-height: 720px;
	border-bottom: 1px solid var(--line);
}

.hero-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 88px clamp(30px, 6vw, 100px);
}

.eyebrow,
.section-number {
	margin: 0 0 22px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.status-pulse {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	background: #47a873;
	border-radius: 50%;
	box-shadow: 0 0 0 5px rgba(71, 168, 115, 0.12);
}

.hero h1 {
	margin: 0;
	font-size: clamp(68px, 8.2vw, 128px);
	line-height: 0.82;
	letter-spacing: -0.075em;
}

.hero h1 em,
.section-heading h2 em,
.playground-intro h2 em {
	font-family: var(--serif);
	font-weight: 400;
}

.hero-lede {
	max-width: 560px;
	margin: 40px 0 0;
	color: var(--ink-soft);
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.5;
}

.hero-actions {
	display: flex;
	gap: 12px;
	margin-top: 38px;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 48px;
	padding: 0 20px;
	border: 1px solid var(--ink);
	border-radius: 3px;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
	transform: translateY(-2px);
}

.button-primary {
	background: var(--ink);
	color: var(--paper-light);
	box-shadow: 5px 5px 0 var(--orange);
}

.button-ghost {
	background: transparent;
}

.proof-list {
	display: flex;
	gap: clamp(24px, 4vw, 56px);
	margin: 70px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.proof-list li {
	display: grid;
}

.proof-list strong {
	font-family: var(--serif);
	font-size: 32px;
	font-weight: 400;
}

.proof-list span {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
}

.clock-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	min-width: 0;
	padding: clamp(30px, 5vw, 70px);
	color: #eff5ed;
	background:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		var(--ink);
	background-size: 42px 42px;
}

.clock-panel-top {
	position: absolute;
	top: 36px;
	left: clamp(30px, 5vw, 70px);
	right: clamp(30px, 5vw, 70px);
	display: flex;
	justify-content: space-between;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.live-indicator {
	color: var(--acid);
}

.live-clock {
	position: relative;
	z-index: 2;
	font-family: var(--mono);
	font-size: clamp(58px, 7.2vw, 112px);
	font-weight: 300;
	letter-spacing: -0.075em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.live-date {
	position: relative;
	z-index: 2;
	margin-top: 16px;
	color: #aeb9af;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.orbit {
	position: absolute;
	top: 17%;
	right: -22%;
	width: 72%;
	aspect-ratio: 1;
	opacity: 0.65;
}

.orbit-line {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(201, 255, 71, 0.28);
	border-radius: 50%;
}

.orbit-two {
	inset: 15%;
	border-color: rgba(255, 118, 87, 0.25);
}

.orbit-dot {
	position: absolute;
	top: 47%;
	left: -5px;
	width: 10px;
	height: 10px;
	background: var(--acid);
	border-radius: 50%;
	box-shadow: 0 0 22px var(--acid);
}

.code-window {
	position: relative;
	z-index: 3;
	margin-top: 72px;
	background: #18231d;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 18px 18px 0 rgba(0, 0, 0, 0.18);
}

.window-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.window-bar > span {
	width: 7px;
	height: 7px;
	border: 1px solid #718077;
	border-radius: 50%;
}

.copy-button {
	margin-left: auto;
	padding: 4px 8px;
	color: inherit;
	background: transparent;
	border: 0;
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
	cursor: pointer;
}

.copy-button:hover,
.copy-button:focus-visible {
	color: var(--orange);
}

.code-window pre,
.response-example pre {
	overflow: auto;
	margin: 0;
	padding: 24px;
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.75;
}

.code-muted {
	color: #6d7a72;
}

.code-url,
.json-string {
	color: var(--acid);
}

.ticker {
	overflow: hidden;
	padding: 12px 0;
	color: var(--ink);
	background: var(--acid);
	border-bottom: 1px solid var(--ink);
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ticker div {
	display: flex;
	justify-content: space-around;
	min-width: 1000px;
}

.ticker i {
	font-style: normal;
}

.content-section {
	padding: clamp(85px, 10vw, 150px) clamp(24px, 7vw, 112px);
}

.section-heading {
	display: grid;
	grid-template-columns: 1fr minmax(280px, 410px);
	gap: 60px;
	align-items: end;
	margin-bottom: 72px;
}

.section-heading h2,
.playground-intro h2,
.spec-section h2 {
	margin: 0;
	font-size: clamp(48px, 6vw, 84px);
	line-height: 0.98;
	letter-spacing: -0.065em;
}

.section-heading > p,
.playground-intro > p,
.spec-section > div > p {
	margin: 0;
	color: var(--muted);
	font-size: 17px;
}

.quickstart-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--ink);
	border-left: 1px solid var(--ink);
}

.step-card {
	position: relative;
	min-height: 300px;
	padding: 30px;
	border-right: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
}

.step-card-accent {
	background: #dcebd6;
}

.step-index {
	font-family: var(--mono);
	font-size: 11px;
}

.step-card h3 {
	margin: 82px 0 8px;
	font-size: 23px;
	letter-spacing: -0.04em;
}

.step-card p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
}

.inline-code {
	position: absolute;
	right: 30px;
	bottom: 28px;
	left: 30px;
	overflow: hidden;
	padding: 12px;
	background: rgba(16, 24, 20, 0.06);
	border-radius: 2px;
	font-family: var(--mono);
	font-size: 11px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.response-example {
	max-width: 850px;
	margin: 55px auto 0;
	color: #e9efe9;
	background: var(--ink);
	box-shadow: 14px 14px 0 #c9d9cf;
}

.response-caption {
	display: flex;
	align-items: center;
	padding: 12px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
}

.response-caption i,
.response-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 7px;
	background: var(--acid);
	border-radius: 50%;
}

.json-key {
	color: #9cc8e5;
}

.json-number {
	color: #ff987d;
}

.endpoint-section {
	background: var(--paper-light);
	border-top: 1px solid var(--line);
}

.endpoint-list {
	border-top: 1px solid var(--ink);
}

.endpoint-row {
	display: grid;
	grid-template-columns: 70px minmax(240px, 0.65fr) 1fr 40px;
	gap: 24px;
	align-items: center;
	min-height: 90px;
	padding: 18px 12px;
	border-bottom: 1px solid var(--line);
}

.endpoint-method {
	color: #397359;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 800;
}

.endpoint-path {
	display: flex;
	align-items: center;
	gap: 10px;
}

.endpoint-path code {
	font-family: var(--mono);
	font-size: 14px;
	font-weight: 700;
}

.badge {
	padding: 2px 6px;
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: 2px;
	font-family: var(--mono);
	font-size: 8px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.badge-new {
	color: var(--ink);
	background: var(--acid);
	border-color: var(--acid);
}

.badge-spec {
	color: white;
	background: var(--orange);
	border-color: var(--orange);
}

.endpoint-row > p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
}

.row-link,
.row-toggle {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 50%;
	text-decoration: none;
	cursor: pointer;
}

.endpoint-featured {
	grid-template-rows: auto auto;
	background: #eef6db;
}

.endpoint-detail {
	grid-column: 2 / -1;
	display: flex;
	justify-content: space-between;
	align-items: end;
	padding: 24px 0 10px;
	border-top: 1px solid var(--line);
}

.endpoint-detail[hidden] {
	display: none;
}

.endpoint-detail strong {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.endpoint-detail dl {
	margin: 14px 0 0;
}

.endpoint-detail dl div {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 20px;
	margin-top: 8px;
	font-size: 12px;
}

.endpoint-detail dt {
	font-family: var(--mono);
	font-weight: 700;
}

.endpoint-detail dd {
	margin: 0;
	color: var(--muted);
}

.endpoint-detail > a {
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
}

.playground-section {
	display: grid;
	grid-template-columns: 0.7fr 1.5fr;
	gap: clamp(40px, 7vw, 110px);
	padding: clamp(85px, 10vw, 150px) clamp(24px, 7vw, 112px);
	color: var(--paper-light);
	background: var(--ink);
}

.playground-intro {
	align-self: start;
	position: sticky;
	top: 120px;
}

.playground-intro h2 {
	color: var(--paper-light);
}

.playground-intro > p {
	margin-top: 35px;
	color: #98a39b;
}

.playground-shell {
	display: grid;
	grid-template-columns: minmax(280px, 0.8fr) minmax(340px, 1.2fr);
	min-height: 640px;
	border: 1px solid #405047;
	box-shadow: 16px 16px 0 rgba(201, 255, 71, 0.12);
}

.request-builder {
	padding: 26px;
	background: #18231d;
	border-right: 1px solid #405047;
}

.builder-heading,
.viewer-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 30px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.method-chip {
	padding: 4px 7px;
	color: var(--ink);
	background: var(--acid);
	border-radius: 2px;
	font-size: 9px;
}

.mode-switch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 0 28px;
	padding: 0;
	border: 1px solid #405047;
}

.mode-switch legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.mode-switch label {
	cursor: pointer;
}

.mode-switch input {
	position: absolute;
	opacity: 0;
}

.mode-switch span {
	display: block;
	padding: 10px;
	color: #98a39b;
	font-size: 11px;
	text-align: center;
}

.mode-switch label + label span {
	border-left: 1px solid #405047;
}

.mode-switch input:checked + span {
	color: var(--ink);
	background: var(--mint);
	font-weight: 800;
}

.field-label {
	display: flex;
	justify-content: space-between;
	margin: 0 0 8px;
	color: #dfe8e1;
	font-size: 12px;
	font-weight: 700;
}

.field-label span {
	color: #708078;
	font-family: var(--mono);
	font-size: 9px;
}

.select-wrap {
	position: relative;
	margin-bottom: 25px;
}

.select-wrap input,
.format-input,
.format-filter input {
	width: 100%;
	height: 44px;
	padding: 0 36px 0 12px;
	color: white;
	background: #101814;
	border: 1px solid #405047;
	border-radius: 2px;
	font-family: var(--mono);
	font-size: 12px;
	outline: none;
}

.select-wrap input:focus,
.format-input:focus {
	border-color: var(--acid);
	box-shadow: 0 0 0 2px rgba(201, 255, 71, 0.12);
}

.select-wrap > span {
	position: absolute;
	top: 10px;
	right: 12px;
	color: var(--acid);
	pointer-events: none;
}

.field-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.field-chips input {
	position: absolute;
	opacity: 0;
}

.field-chips span {
	display: block;
	padding: 7px 9px;
	color: #91a097;
	border: 1px solid #405047;
	border-radius: 2px;
	font-family: var(--mono);
	font-size: 10px;
	cursor: pointer;
}

.field-chips input:checked + span {
	color: var(--ink);
	background: var(--acid);
	border-color: var(--acid);
}

.field-help {
	margin: 8px 0 0;
	color: #7f8e85;
	font-size: 11px;
}

.request-url {
	overflow: hidden;
	display: flex;
	align-items: center;
	height: 48px;
	margin-top: 32px;
	padding: 0 8px 0 12px;
	background: #0c120f;
	border: 1px dashed #405047;
	font-family: var(--mono);
	font-size: 10px;
}

.request-url > span {
	overflow: hidden;
	color: #b4c1b8;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.button-run {
	justify-content: space-between;
	width: 100%;
	margin-top: 12px;
	color: var(--ink);
	background: var(--acid);
	border-color: var(--acid);
	box-shadow: none;
}

.response-viewer {
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-width: 0;
	background: #0c120f;
}

.viewer-heading {
	justify-content: space-between;
	height: 64px;
	margin: 0;
	padding: 0 20px;
	border-bottom: 1px solid #26332c;
}

.viewer-heading > div {
	display: flex;
	align-items: center;
	gap: 10px;
}

.viewer-heading > div:last-child {
	color: #7e8c83;
	font-size: 9px;
}

#response-status {
	padding: 3px 6px;
	border: 1px solid #35433b;
	border-radius: 2px;
}

#response-status.is-success {
	color: var(--acid);
}

#response-status.is-error {
	color: #ff8b73;
}

#playground-response {
	overflow: auto;
	margin: 0;
	padding: 26px;
	color: #dbe6de;
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.8;
	white-space: pre-wrap;
	word-break: break-word;
}

.viewer-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 48px;
	padding: 0 12px 0 20px;
	color: #65736b;
	border-top: 1px solid #26332c;
	font-family: var(--mono);
	font-size: 9px;
	text-transform: uppercase;
}

.formats-section {
	background: var(--paper);
}

.format-example {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 30px;
	align-items: center;
	padding: 30px;
	background: #dcebd6;
	border: 1px solid var(--ink);
}

.format-example div {
	display: grid;
	gap: 8px;
}

.format-example div > span,
.format-filter label {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.format-example code,
.format-example strong {
	font-family: var(--mono);
	font-size: clamp(13px, 1.5vw, 18px);
}

.format-filter {
	display: grid;
	grid-template-columns: auto minmax(260px, 420px);
	gap: 20px;
	align-items: center;
	margin: 50px 0 20px;
}

.format-filter input {
	height: 42px;
	color: var(--ink);
	background: var(--paper-light);
	border-color: var(--line);
}

.format-groups {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.format-group {
	background: var(--paper-light);
	border: 1px solid var(--line);
}

.format-group h3 {
	margin: 0;
	padding: 14px 18px;
	border-bottom: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.format-token {
	display: grid;
	grid-template-columns: 40px 1fr minmax(90px, 0.6fr);
	gap: 12px;
	align-items: center;
	min-height: 48px;
	padding: 8px 18px;
	border-bottom: 1px solid var(--line);
	font-size: 12px;
}

.format-token:last-child {
	border-bottom: 0;
}

.format-token > code {
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	color: var(--paper-light);
	background: var(--ink);
	border-radius: 2px;
	font-family: var(--mono);
}

.format-token span {
	color: var(--muted);
}

.format-token samp {
	justify-self: end;
	font-family: var(--mono);
	font-size: 10px;
}

.format-empty {
	grid-column: 1 / -1;
	padding: 40px;
	color: var(--muted);
	text-align: center;
}

.spec-section {
	display: grid;
	grid-template-columns: 1fr minmax(340px, 0.7fr);
	gap: 80px;
	align-items: center;
	padding: clamp(85px, 10vw, 150px) clamp(24px, 9vw, 150px);
	color: var(--paper-light);
	background: #233229;
}

.spec-section h2 {
	color: white;
}

.spec-section > div > p:last-child {
	max-width: 520px;
	margin-top: 30px;
}

.spec-card {
	padding: 30px;
	color: var(--ink);
	background: var(--acid);
	box-shadow: 16px 16px 0 var(--orange);
}

.spec-card-top {
	display: flex;
	gap: 16px;
	align-items: center;
	font-family: var(--mono);
	font-size: 9px;
	line-height: 1.3;
	letter-spacing: 0.1em;
}

.spec-symbol {
	display: grid;
	width: 52px;
	height: 52px;
	place-items: center;
	background: var(--ink);
	color: var(--acid);
	border-radius: 50%;
	font-size: 14px;
}

.spec-card > code {
	display: block;
	margin: 55px 0;
	font-family: var(--mono);
	font-size: clamp(22px, 3vw, 40px);
	letter-spacing: -0.05em;
}

.spec-actions {
	display: flex;
	gap: 12px;
}

.spec-card .button-primary {
	box-shadow: none;
}

footer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 130px;
	padding: 28px clamp(24px, 7vw, 112px);
	background: var(--paper-light);
	border-top: 1px solid var(--line);
}

footer p {
	color: var(--muted);
	font-family: var(--serif);
	font-style: italic;
}

footer > div {
	display: flex;
	justify-self: end;
	gap: 24px;
}

footer > div a {
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
}

@media (max-width: 1050px) {
	.site-header {
		grid-template-columns: 1fr auto;
	}

	.site-header nav {
		display: none;
	}

	.hero {
		grid-template-columns: 1fr;
	}

	.hero-copy {
		min-height: 660px;
	}

	.clock-panel {
		min-height: 620px;
	}

	.quickstart-grid {
		grid-template-columns: 1fr;
	}

	.step-card {
		min-height: 240px;
	}

	.step-card h3 {
		margin-top: 50px;
	}

	.playground-section {
		grid-template-columns: 1fr;
	}

	.playground-intro {
		position: static;
	}

	.spec-section {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.site-header {
		min-height: 64px;
	}

	.nav-spec {
		padding: 8px 10px;
		font-size: 10px;
	}

	.hero-copy {
		min-height: 600px;
		padding-top: 70px;
		padding-bottom: 70px;
	}

	.hero h1 {
		font-size: clamp(62px, 21vw, 94px);
	}

	.proof-list {
		gap: 20px;
		justify-content: space-between;
	}

	.clock-panel {
		min-height: 520px;
	}

	.live-clock {
		font-size: 18vw;
	}

	.section-heading {
		grid-template-columns: 1fr;
		gap: 28px;
		margin-bottom: 48px;
	}

	.endpoint-row {
		grid-template-columns: 48px 1fr 34px;
		gap: 12px;
	}

	.endpoint-row > p {
		grid-column: 2 / -1;
	}

	.endpoint-row > .row-link,
	.endpoint-row > .row-toggle {
		grid-column: 3;
		grid-row: 1;
	}

	.endpoint-featured {
		grid-template-rows: auto auto auto;
	}

	.endpoint-detail {
		grid-column: 1 / -1;
		display: block;
	}

	.endpoint-detail dl div {
		grid-template-columns: 1fr;
		gap: 2px;
		margin-top: 14px;
	}

	.endpoint-detail > a {
		display: inline-block;
		margin-top: 24px;
	}

	.playground-shell {
		grid-template-columns: 1fr;
	}

	.request-builder {
		border-right: 0;
		border-bottom: 1px solid #405047;
	}

	.response-viewer {
		min-height: 500px;
	}

	.format-example {
		grid-template-columns: 1fr;
	}

	.format-example > span {
		transform: rotate(90deg);
	}

	.format-filter {
		grid-template-columns: 1fr;
	}

	.format-groups {
		grid-template-columns: 1fr;
	}

	.format-token {
		grid-template-columns: 36px 1fr;
	}

	.format-token samp {
		grid-column: 2;
		justify-self: start;
	}

	.spec-actions {
		flex-direction: column;
	}

	footer {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	footer p {
		margin: 0;
	}

	footer > div {
		justify-self: start;
		flex-wrap: wrap;
	}
}

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

	.button {
		transition: none;
	}
}