@layer base, prose, content, components;
@layer base {
	:root {
		--gray-100: oklch(96.7% .003 264.542);
		--gray-200: oklch(92.8% .006 264.531);
		--gray-300: oklch(87.2% .01 258.338);
		--gray-400: oklch(70.7% .022 261.325);
		--gray-500: oklch(55.1% .027 264.364);
		--gray-600: oklch(44.6% .03 256.802);
		--gray-700: oklch(37.3% .034 259.733);
		--gray-800: oklch(27.8% .033 256.848);
		--gray-900: oklch(21% .034 264.665);
		--slate-50: oklch(98.4% .003 247.858);
		--slate-200: oklch(92.9% .013 255.508);
		--slate-300: oklch(86.9% .022 252.894);
		--slate-400: oklch(70.4% .04 256.788);
		--slate-500: oklch(55.4% .046 257.417);
		--slate-600: oklch(44.6% .043 257.281);
		--slate-700: oklch(37.2% .044 257.287);
		--slate-800: oklch(27.9% .041 260.031);
		--slate-900: oklch(20.8% .042 265.755);
		--slate-950: oklch(12.9% .042 264.695);
		--primary-50: #eff6ff;
		--primary-100: #dbeafe;
		--primary-200: #bfdbfe;
		--primary-300: #93c5fd;
		--primary-400: #60a5fa;
		--primary-500: #3b82f6;
		--primary-600: #2563eb;
		--primary-700: #1d4ed8;
		--primary-800: #1e40af;
		--primary-900: #1e3a8a;
		--primary-950: #172554;
		--secondary-50: #fdf2f8;
		--secondary-200: #fbcfe8;
		--secondary-400: #f472b6;
		--secondary-500: #ec4899;
		--secondary-600: #db2777;
		--secondary-800: #9d174d;
		--secondary-900: #831843;
		--red-400: #f87171;
		--red-500: #ef4444;
		--red-600: #dc2626;
		--amber-50: oklch(98.7% .022 95.277);
		--amber-200: oklch(92.4% .12 95.746);
		--amber-300: oklch(87.9% .169 91.605);
		--amber-400: oklch(82.8% .189 84.429);
		--amber-600: oklch(66.6% .179 58.318);
		--amber-700: oklch(55.5% .163 48.998);
		--amber-800: oklch(47.3% .137 46.201);
		--amber-900: oklch(41.4% .112 45.904);
		--orange-100: oklch(95.4% .038 75.164);
		--orange-200: oklch(90.1% .076 70.697);
		--teal-100: oklch(95.3% .051 180.801);
		--teal-200: oklch(91% .096 180.426);
		--sky-100: oklch(95.1% .026 236.824);
		--sky-200: oklch(90.1% .058 230.902);
		--indigo-50: oklch(96.2% .018 272.314);
		--indigo-200: oklch(87% .065 274.039);
		--indigo-500: oklch(58.5% .233 277.117);
		--indigo-950: oklch(25.7% .09 281.288);
		--violet-500: #8b5cf6;
		--primary-text: light-dark(var(--gray-900), #fff);
		--body-text: light-dark(var(--gray-700), var(--gray-300));
		--secondary-text: light-dark(var(--gray-500), var(--gray-400));
		--link: light-dark(var(--primary-600), var(--primary-400));
		--separator: light-dark(var(--gray-200), var(--gray-700));
		--page-background: light-dark(#fff, var(--slate-950));
		color-scheme: light dark;
		@media (prefers-contrast: more) {
			--primary-text: light-dark(var(--gray-900), #fff);
			--body-text: light-dark(var(--gray-800), var(--gray-200));
			--secondary-text: light-dark(var(--gray-700), var(--gray-300));
			--link: light-dark(var(--primary-700), var(--primary-300));
			--separator: light-dark(var(--gray-500), var(--gray-400));
			--page-background: light-dark(#fff, var(--slate-950));
		}
		@supports (interpolate-size: allow-keywords) {
			interpolate-size: allow-keywords;
		}
	}
	*, ::before, ::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		border: 0 solid;
	}
	html {
		line-height: 1.5;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: transparent;
		scroll-padding-top: 80px;
		scrollbar-gutter: stable;
		@media (prefers-reduced-motion: no-preference) {
			scroll-behavior: smooth;
		}
		@media (min-width: 96rem) {
			font-size: 20px;
		}
	}
	body {
		timeline-scope: --app-hero;
		color: light-dark(var(--gray-900), var(--slate-300));
		background-color: var(--page-background);
		letter-spacing: -.025em;
		overflow-x: clip;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	h1, h2, h3, h4, h5, h6 {
		font-size: inherit;
		font-weight: inherit;
		text-wrap: balance;
	}
	p, li, dd, blockquote {
		text-wrap: pretty;
	}
	::selection {
		color: var(--primary-text);
		background-color: light-dark(var(--secondary-200), var(--secondary-800));
	}
	a {
		color: inherit;
		text-decoration: inherit;
	}
	hr {
		height: 0;
		color: inherit;
		border-top-width: 1px;
	}
	b, strong {
		font-weight: bolder;
	}
	code, kbd, samp, pre {
		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	}
	ol, ul, menu {
		list-style: none;
	}
	img, svg, video, canvas {
		display: block;
		vertical-align: middle;
	}
	img, video {
		height: auto;
		max-width: 100%;
	}
	button, input, select, optgroup, textarea {
		font: inherit;
		color: inherit;
		letter-spacing: inherit;
		background-color: transparent;
	}
	button, label[for] {
		cursor: pointer;
	}
	table {
		border-collapse: collapse;
	}
	@media (prefers-reduced-motion: no-preference) {
		@view-transition {
			navigation: auto;
		}
	}
	::view-transition-group(*.app-icon) {
		animation-duration: .4s;
	}
	[hidden] {
		display: none !important;
	}
}
@layer prose {
	@scope (.prose) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			width: 100%;
			max-width: 56rem;
			margin: 2rem auto 0;
			padding-inline: 1.5rem;
			font-size: 1.125rem;
			line-height: 1.7778;
			letter-spacing: 0;
			overflow-wrap: break-word;
			color: var(--body-text);
			@media (min-width: 64rem) {
				font-size: 1.25rem;
				line-height: 1.8;
			}
			:where(p) {
				margin: 1.3333em 0;
				@media (min-width: 64rem) {
					margin: 1.2em 0;
				}
			}
			:where(a) {
				color: light-dark(color-mix(in oklab, #000 75%, transparent), color-mix(in oklab, #fff 90%, transparent));
				font-weight: 500;
				text-decoration: underline;
				text-decoration-thickness: 2px;
				text-decoration-color: var(--primary-500);
				text-underline-offset: 4px;
				@media (hover: hover) {
					&:hover {
						color: #000;
						text-decoration-color: var(--primary-700);
					}
				}
				@media (prefers-color-scheme: dark) {
					text-decoration-color: var(--primary-400);
					@media (hover: hover) {
						&:hover {
							color: #fff;
							text-decoration-color: var(--primary-300);
						}
					}
				}
			}
			:where(strong) {
				color: var(--primary-text);
				font-weight: 600;
			}
			:where(a strong, blockquote strong, thead th strong, h1 strong, h2 strong, h3 strong, h4 strong) {
				color: inherit;
			}
			:where(h1, h2, h3, h4, h5, h6, th) {
				color: light-dark(var(--gray-900), var(--slate-300));
				font-weight: 700;
				letter-spacing: -.05em;
			}
			:where(h1) {
				margin: 0 0 .8333em;
				font-size: 2.6667em;
				line-height: 1;
				@media (min-width: 64rem) {
					margin-bottom: .8571em;
					font-size: 2.8em;
				}
			}
			:where(h2) {
				margin: 6rem 0 1.0667em;
				font-size: 1.6667em;
				line-height: 1.3333;
				@media (min-width: 64rem) {
					margin-bottom: .8889em;
					font-size: 1.8em;
					line-height: 1.1111;
				}
			}
			:where(h3) {
				margin: 1.6667em 0 .6667em;
				font-size: 1.3333em;
				line-height: 1.5;
				@media (min-width: 64rem) {
					margin: 1.6em 0 .6667em;
					font-size: 1.5em;
					line-height: 1.3333;
				}
			}
			:where(h4) {
				margin: 1.7778em 0 .4444em;
				line-height: 1.5556;
				letter-spacing: 0;
				@media (min-width: 64rem) {
					margin: 1.8em 0 .6em;
					line-height: 1.6;
				}
			}
			:where(h5, h6) {
				letter-spacing: 0;
			}
			:where(ul, ol) {
				margin: 1.3333em 0;
				padding-inline-start: 1.5556em;
				@media (min-width: 64rem) {
					margin: 1.2em 0;
					padding-inline-start: 1.6em;
				}
			}
			:where(ul) {
				list-style-type: disc;
			}
			:where(ol) {
				list-style-type: decimal;
			}
			:where(li) {
				margin: .6667em 0;
				padding-inline-start: .4444em;
				@media (min-width: 64rem) {
					margin: .6em 0;
					padding-inline-start: .4em;
				}
			}
			:where(ol > li)::marker {
				color: var(--gray-500);
			}
			:where(ul > li)::marker {
				color: light-dark(var(--gray-300), var(--gray-600));
			}
			:where(ul ul, ul ol, ol ul, ol ol) {
				margin: .8889em 0;
				@media (min-width: 64rem) {
					margin: .8em 0;
				}
			}
			:where(hr) {
				margin: 3.1111em 0;
				border-top: 1px solid currentColor;
				border-color: var(--separator);
				@media (min-width: 64rem) {
					margin: 2.8em 0;
				}
			}
			:where(blockquote) {
				margin: 1.6667em 0;
				padding-inline-start: 1em;
				border-left: .25rem solid;
				border-color: var(--separator);
				font-style: italic;
				font-weight: 500;
				color: light-dark(var(--gray-900), var(--gray-100));
				quotes: "\201C" "\201D" "\2018" "\2019";
				@media (min-width: 64rem) {
					margin: 1.6em 0;
					padding-inline-start: 1.0667em;
				}
			}
			:where(blockquote p:first-of-type)::before {
				content: open-quote;
			}
			:where(blockquote p:last-of-type)::after {
				content: close-quote;
			}
			:where(img, video, picture, figure) {
				margin: 1.7778em 0;
				@media (min-width: 64rem) {
					margin: 2em 0;
				}
			}
			:where(img) {
				border-radius: .375rem;
				box-shadow: 0 10px 15px -3px color-mix(in oklab, #000 10%, transparent), 0 4px 6px -4px color-mix(in oklab, #000 10%, transparent);
			}
			:where(figcaption) {
				margin-top: 1em;
				font-size: .8889em;
				line-height: 1.5;
				color: var(--gray-500);
			}
			:where(code) {
				font-size: .8889em;
				font-weight: 600;
				color: var(--primary-text);
				@media (min-width: 64rem) {
					font-size: .9em;
				}
			}
			:where(a code, h1 code, h2 code, h3 code, h4 code, blockquote code, thead th code) {
				color: inherit;
			}
			:where(pre) {
				margin: 2em 0;
				padding: 1em 1.5em;
				border-radius: .375rem;
				overflow-x: auto;
				font-size: .8889em;
				line-height: 1.75;
				font-weight: 400;
				color: var(--gray-200);
				background-color: light-dark(var(--gray-800), color-mix(in oklab, #000 50%, transparent));
				@media (min-width: 64rem) {
					padding: 1.1111em 1.3333em;
					border-radius: .5rem;
					font-size: .9em;
					line-height: 1.7778;
				}
			}
			:where(pre code) {
				padding: 0;
				font-size: inherit;
				font-weight: inherit;
				line-height: inherit;
				color: inherit;
				background-color: transparent;
			}
			:where(table) {
				width: 100%;
				margin: 2em 0;
				table-layout: auto;
				font-size: .8889em;
				line-height: 1.5;
				@media (min-width: 64rem) {
					font-size: .9em;
					line-height: 1.5556;
				}
			}
			:where(thead) {
				border-bottom: 1px solid currentColor;
				border-color: light-dark(var(--gray-300), var(--gray-600));
			}
			:where(thead th) {
				padding: 0 .75em .75em;
				vertical-align: bottom;
				font-weight: 600;
			}
			:where(tbody tr) {
				border-bottom: 1px solid currentColor;
				border-color: var(--separator);
				&:last-child {
					border-bottom-width: 0;
				}
			}
			:where(tbody td) {
				padding: .75em;
				vertical-align: baseline;
			}
			:where(th, td) {
				text-align: start;
			}
			:where(thead th:first-child, tbody td:first-child) {
				padding-inline-start: 0;
			}
			:where(thead th:last-child, tbody td:last-child) {
				padding-inline-end: 0;
			}
			table:not(:has(> thead, > tfoot)) {
				display: block;
				overflow-x: auto;
				& > tbody {
					display: table;
					width: 100%;
				}
			}
			:where(hr + *, h2 + *, h3 + *, h4 + *) {
				margin-top: 0;
			}
			& > :where(:first-child) {
				margin-top: 0;
			}
			& > :where(:last-child) {
				margin-bottom: 0;
			}
			.list-subtitle {
				display: block;
				font-size: 1rem;
				line-height: 1.375;
				opacity: .65;
				& + .list-description {
					margin-top: .5rem;
					font-size: .75rem;
					line-height: 1.3333;
				}
				@media (prefers-color-scheme: dark) {
					opacity: .6;
				}
			}
			.list-description {
				display: block;
				font-size: .875rem;
				line-height: 1.625;
				opacity: .65;
				@media (prefers-color-scheme: dark) {
					opacity: .6;
				}
			}
			kbd {
				font-family: inherit !important;
				font-size: .8em !important;
				background-color: light-dark(#f0f2f5, #252d3d) !important;
				color: light-dark(#2d3748, #c9d1e0) !important;
				border: 1px solid #c4cad4 !important;
				border-bottom-width: 3px !important;
				border-radius: 5px !important;
				padding: .1em .45em !important;
				margin-inline: .15em !important;
				@media (prefers-color-scheme: dark) {
					border-color: #3d4a5c !important;
					border-bottom-color: #111827 !important;
				}
			}
		}
	}
	@scope (.prose-article) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			max-width: 48rem;
			padding-bottom: 5rem;
			letter-spacing: inherit;
			font-feature-settings: 'liga' 1, 'kern' 1, 'onum' 1;
			text-rendering: optimizeLegibility;
			hyphens: auto;
			hanging-punctuation: first;
			&:has(> p:first-child > img) {
				margin-top: -16px;
			}
			:where(a) {
				color: var(--link);
				@media (hover: hover) {
					&:hover {
						color: var(--link);
						text-decoration-color: var(--primary-600);
						text-decoration-thickness: 4px;
					}
				}
			}
			:where(h4, h5, h6) {
				letter-spacing: -.05em;
			}
			:where(p) {
				text-wrap: pretty;
			}
		}
	}
	@scope (.prose-footnotes) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			margin-top: 100px !important;
		}
	}
	@scope (.prose-footnote-reference) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			padding-inline: 2px;
			font-weight: 600;
			color: var(--link);
			cursor: pointer;
			@media (hover: hover) {
				&:hover {
					text-decoration: underline;
				}
			}
			&:focus-visible {
				outline: 2px solid transparent;
				box-shadow: 0 0 0 2px var(--primary-500);
			}
		}
	}
	@scope (.prose-footnote-popover) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			max-width: min(24rem, calc(100vw - 2rem));
			padding: .75rem 1rem;
			border-radius: .75rem;
			border: 1px solid light-dark(color-mix(in oklab, #000 8%, transparent), color-mix(in oklab, #fff 10%, transparent));
			font-size: .9375rem;
			line-height: 1.5;
			text-align: start;
			color: var(--body-text);
			background-color: light-dark(#fff, var(--slate-900));
			box-shadow: 0 10px 15px -3px color-mix(in oklab, #000 10%, transparent), 0 4px 6px -4px color-mix(in oklab, #000 10%, transparent);
			@supports (position-area: top) {
				position-area: top;
				position-try-fallbacks: flip-block;
				inset: auto;
				margin: 8px;
			}
			& > :first-child {
				margin-top: 0;
			}
			& > :last-child {
				margin-bottom: 0;
			}
		}
	}
	@scope (.prose-code-block) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			position: relative;
			margin: 1.7778em 0;
			@media (min-width: 64rem) {
				margin: 1.8em 0;
			}
			& > pre {
				margin: 0;
			}
		}
	}
	@scope (.prose-code-block-bar) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			position: absolute;
			top: .375rem;
			inset-inline-end: .375rem;
			display: flex;
			align-items: center;
			gap: .375rem;
			font-size: .75rem;
			line-height: 1.5;
		}
	}
	@scope (.prose-code-block-language) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			padding-inline: .25rem;
			font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
			color: var(--gray-400);
			user-select: none;
		}
	}
	@scope (.prose-copy-button) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			display: grid;
			padding: .125rem .5rem;
			border-radius: .375rem;
			font-weight: 500;
			color: var(--gray-200);
			background-color: color-mix(in oklab, #fff 10%, transparent);
			opacity: 0;
			transition: opacity .15s, background-color .15s;
			& > span {
				grid-area: 1 / 1;
			}
			& > span:last-child {
				visibility: hidden;
			}
			&[data-state="copied"] {
				& > span:first-child {
					visibility: hidden;
				}
				& > span:last-child {
					visibility: visible;
				}
			}
			@media (hover: hover) {
				&:hover {
					background-color: color-mix(in oklab, #fff 20%, transparent);
				}
			}
			&:focus-visible {
				opacity: 1;
				outline: 2px solid transparent;
				box-shadow: 0 0 0 2px var(--primary-400);
			}
			.prose-code-block:hover &, .prose-code-block:focus-within &, &[data-state] {
				opacity: 1;
			}
			@media (hover: none) {
				opacity: 1;
			}
			@media (scripting: none) {
				display: none;
			}
		}
	}
	@scope (.prose-key-separator) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			font-size: .6em;
			font-weight: 600;
			color: var(--gray-400);
			user-select: none;
			vertical-align: middle;
		}
	}
	@scope (.prose-alert) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			margin: 1rem 0;
			padding: .5rem 1rem;
			border-inline-start: .25rem solid currentColor;
			border-radius: .5rem;
			& > * {
				margin: 0;
			}
			& > * + * {
				margin-top: .25rem;
			}
			a {
				text-decoration-color: var(--alert-color) !important;
			}
		}
	}
	@scope (.prose-alert-note) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			--alert-color: #60a5fa;
			border-color: color-mix(in oklab, #60a5fa 50%, transparent);
			background-color: light-dark(#f8faff, #0f172a);
			.prose-alert-title {
				color: #38bdf8;
			}
		}
	}
	@scope (.prose-alert-tip) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			--alert-color: #6ee7b7;
			border-color: color-mix(in oklab, #6ee7b7 50%, transparent);
			background-color: light-dark(#f8fdf9, #0a1a17);
			.prose-alert-title {
				color: #34d399;
			}
		}
	}
	@scope (.prose-alert-important) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			--alert-color: #c084fc;
			border-color: color-mix(in oklab, #c084fc 50%, transparent);
			background-color: light-dark(#fdf8ff, #1a0a2e);
			.prose-alert-title {
				color: #a78bfa;
			}
		}
	}
	@scope (.prose-alert-warning) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			--alert-color: #fbbf24;
			border-color: color-mix(in oklab, #fbbf24 50%, transparent);
			background-color: light-dark(#fffdf5, #1a1408);
			.prose-alert-title {
				color: #f59e0b;
			}
		}
	}
	@scope (.prose-alert-caution) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			--alert-color: #fb7185;
			border-color: color-mix(in oklab, #fb7185 50%, transparent);
			background-color: light-dark(#fef8f8, #1f0a0a);
			.prose-alert-title {
				color: #f43f5e;
			}
		}
	}
	@scope (.prose-alert-title) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			display: flex;
			align-items: center;
			gap: .5rem;
			font-weight: 600;
		}
	}
	@scope (.prose-alert-icon) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			width: 1rem;
			height: 1rem;
			fill: currentColor;
		}
	}
	@scope (.prose-collapsible-sections) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			display: flex;
			flex-direction: column;
			gap: .75rem;
			@media (width < 40rem) {
				gap: .2rem;
				margin-inline: -1.5rem;
			}
		}
	}
	@scope (.prose-collapsible-section) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			padding: 0;
			border-radius: .75rem;
			background-color: light-dark(color-mix(in oklab, #000 1.5%, transparent), color-mix(in oklab, #fff 2.5%, transparent));
			&[open] > .prose-collapsible-summary {
				box-shadow: inset 0 -1px 0 0 light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 7%));
			}
			@supports (interpolate-size: allow-keywords) {
				&::details-content {
					overflow: hidden;
					height: 0;
					transition: height .25s ease, content-visibility .25s ease allow-discrete;
				}
				&[open]::details-content {
					height: auto;
				}
			}
			@media (width < 40rem) {
				border-radius: 0;
			}
			&:target {
				animation: prose-target-highlight 2s ease-out;
			}
		}
	}
	@scope (.prose-collapsible-summary) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			display: flex;
			align-items: center;
			position: relative;
			padding: .75rem 1rem;
			border-radius: .75rem;
			font-size: inherit;
			font-weight: 600;
			list-style: none;
			cursor: pointer;
			user-select: none;
			background-color: light-dark(color-mix(in oklab, #000 1.5%, transparent), color-mix(in oklab, #fff 3.5%, transparent));
			transition: background-color .15s;
			@media (hover: hover) {
				&:hover {
					background-color: light-dark(color-mix(in oklab, #000 4%, transparent), color-mix(in oklab, #fff 6%, transparent));
				}
			}
			&::-webkit-details-marker {
				display: none;
			}
			a {
				font-size: inherit;
				font-weight: inherit;
			}
			@media (width < 40rem) {
				border-radius: 0;
			}
		}
	}
	@scope (.prose-collapsible-title) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			flex: 1;
			min-width: 0;
		}
	}
	@scope (.prose-collapsible-chevron) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			display: inline-flex;
			align-items: center;
			flex-shrink: 0;
			margin-inline-start: .5rem;
			&::after {
				content: "";
				width: .5rem;
				height: .5rem;
				border-inline-end: 2px solid var(--gray-400);
				border-bottom: 2px solid var(--gray-400);
				rotate: -45deg;
				transition: transform .2s, translate .2s, scale .2s, rotate .2s;
				@media (prefers-color-scheme: dark) {
					border-color: #6b7280;
				}
			}
			[open] > * > &::after {
				rotate: 45deg;
			}
		}
	}
	@scope (.prose-collapsible-content) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			padding: .75rem 1rem;
			& > :first-child {
				margin-top: 0;
			}
			& > :last-child {
				margin-bottom: 0;
			}
			p + p {
				margin-top: .5rem;
			}
			ul, ol {
				margin: .25rem 0;
				padding-inline-start: 1.25rem;
			}
			li + li {
				margin-top: .125rem;
			}
			li p {
				margin: 0;
			}
		}
	}
	@scope (.prose-collapsible-more-link) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			display: block;
			padding: .75rem 1rem;
			border-radius: .75rem;
			font-size: inherit;
			color: light-dark(color-mix(in oklab, #000 75%, transparent), color-mix(in oklab, #fff 90%, transparent));
			text-decoration: underline;
			text-decoration-color: var(--primary-500);
			text-decoration-thickness: 2px;
			text-underline-offset: 4px;
			transition: color .15s, text-decoration-color .15s;
			&::after {
				content: " →";
			}
			@media (hover: hover) {
				&:hover {
					color: light-dark(#000, #fff);
					text-decoration-color: var(--primary-700);
					@media (prefers-color-scheme: dark) {
						text-decoration-color: var(--primary-300);
					}
				}
			}
			@media (prefers-color-scheme: dark) {
				text-decoration-color: var(--primary-400);
			}
			@media (width < 40rem) {
				border-radius: 0;
			}
		}
	}
	@scope (.prose-anchored-heading) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			position: relative;
			&:target {
				animation: prose-target-highlight 2s ease-out;
			}
		}
	}
	@scope (.prose-heading-anchor) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			position: absolute;
			top: 0;
			bottom: 0;
			inset-inline-start: -28px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			opacity: 0;
			color: var(--gray-400);
			pointer-events: none;
			transform: translateZ(0);
			transition: opacity .15s ease, color .15s ease;
			&::before {
				content: "";
				position: absolute;
				inset: -8px;
			}
			@media (hover: hover) {
				:is(.prose-anchored-heading, .prose-collapsible-summary):hover > & {
					opacity: .6;
					pointer-events: auto;
				}
			}
			@media (hover: hover) {
				&:hover {
					opacity: 1 !important;
					color: var(--primary-500);
				}
			}
			&:focus-visible {
				opacity: 1 !important;
				pointer-events: auto;
				color: var(--primary-500);
			}
			&[data-state="copied"] {
				opacity: 1 !important;
				color: var(--primary-500) !important;
				pointer-events: none;
				.prose-heading-anchor-link-icon {
					display: none;
				}
				.prose-heading-anchor-check-icon {
					display: block;
				}
			}
			&[data-state="hidden"] {
				opacity: 0 !important;
				pointer-events: none;
			}
		}
	}
	@scope (.prose-heading-anchor-check-icon) to (:is(.prose-excluded, .not-prose)) {
		:scope {
			display: none;
		}
	}
	@keyframes prose-target-highlight {
		from {
			background-color: light-dark(var(--secondary-200), var(--secondary-800));
		}
	}
}
@layer content {
	.page-photo {
		width: 130px;
		margin-top: 30px;
		margin-inline-start: 30px;
		border-radius: 50%;
		@media (width < 40rem) {
			display: none;
		}
	}
	.title-emoji {
		padding-inline-start: .5rem;
	}
	.reward-price {
		position: relative;
		bottom: 2px;
		inset-inline-start: 2px;
		font-size: 14px;
		letter-spacing: 0;
	}
	.sponsor {
		display: inline-block;
		vertical-align: middle;
		padding: 20px 0;
		margin-inline-end: 40px;
		&:last-of-type {
			margin-inline-end: 0;
		}
		img {
			padding: 0;
			margin: 0;
			box-shadow: none;
		}
		@media (prefers-color-scheme: dark) {
			color: #000;
			background-color: #fff;
			border-radius: 5px;
			margin: 20px 0;
			padding: 20px;
			position: unset !important;
		}
	}
	.silver-sponsor .sponsor {
		display: block;
	}
	twitterwidget {
		width: unset !important;
	}
	:where(td:first-child:has(> kbd)) {
		white-space: nowrap;
	}
}
@layer components {
	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	.badge {
		display: inline-block;
		padding-inline: .375rem;
		border-radius: .5rem;
		font-size: var(--badge-font-size, 10px);
		font-weight: 700;
		color: light-dark(color-mix(in oklab, #000 70%, transparent), #000);
		@supports (text-box: trim-both cap alphabetic) {
			text-box: trim-both cap alphabetic;
			padding-block: calc((1lh - 1cap) / 2);
		}
	}
	.badge-standard {
		background-color: light-dark(color-mix(in oklab, var(--gray-200) 80%, transparent), var(--gray-200));
	}
	.badge-new {
		background-color: light-dark(var(--teal-100), var(--teal-200));
	}
	.badge-platform {
		background-color: light-dark(color-mix(in oklab, var(--sky-100) 90%, transparent), var(--sky-200));
	}
	.badge-archived {
		background-color: light-dark(var(--orange-100), var(--orange-200));
	}
}
