body {
	.typo {
		color: var(--text-base-primary);
		font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
		font-family: var(--font-family-secondary), sans-serif;
		font-size: var(--font-size-body-sm);
		font-style: normal;
		font-weight: var(--font-weight-regular);
		line-height: var(--line-height-sm);
		letter-spacing: var(--letter-spacing-narrow);

		h1 {
			color: var(--text-base-primary);
			font-feature-settings: 'case' on, 'cpsp' on, 'dnom' on, 'ss03' on, 'ss05' on, 'ss10' on;
			font-family: var(--font-family-primary), sans-serif;
			font-size: var(--font-size-display-sm);
			font-style: normal;
			font-weight: var(--font-weight-semibold);
			line-height: var(--line-height-xl);
			letter-spacing: var(--letter-spacing-tight);
		}
		h2 {
			color: var(--text-base-primary);
			font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
			font-family: var(--font-family-secondary), sans-serif;
			font-size: var(--font-size-heading-lg);
			font-style: normal;
			font-weight: var(--font-weight-semibold);
			line-height: var(--line-height-l);
			letter-spacing: var(--letter-spacing-tight);
			scroll-margin-top: 128px;

			padding: 48px 0 8px 0;
		}
		h3 {
			color: var(--text-base-primary);
			font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
			font-family: var(--font-family-secondary), sans-serif;
			font-size: var(--font-size-heading-xs);
			font-style: normal;
			font-weight: var(--font-weight-semibold);
			line-height: var(--line-height-sm);
			letter-spacing: var(--letter-spacing-narrow);

			padding: 24px 0 8px 0;
		}
		h4 {
			color: var(--text-base-primary);
			font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
			font-family: var(--font-family-secondary), sans-serif;
			font-size: var(--font-size-body-md);
			font-style: normal;
			font-weight: var(--font-weight-semibold);
			line-height: var(--line-height-sm);
			letter-spacing: var(--letter-spacing-narrow);

			padding: 12px 0 8px 0
		}

		p {
			color: var(--text-base-primary);
			font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
			font-family: var(--font-family-secondary), sans-serif;
			font-size: var(--font-size-body-sm);
			font-style: normal;
			font-weight: var(--font-weight-regular);
			line-height: var(--line-height-sm);
			letter-spacing: var(--letter-spacing-narrow);

			padding: 12px 0 0 0;

			&:empty {
				display: none;
			}
		}
		b {
			color: var(--text-base-primary);
			font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
			font-family: var(--font-family-secondary), sans-serif;
			font-size: var(--font-size-body-sm);
			font-style: normal;
			font-weight: var(--font-weight-bold);
			line-height: var(--line-height-sm);
			letter-spacing: var(--letter-spacing-narrow);
		}
		em, i {
			color: var(--text-base-primary);
			font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
			font-family: var(--font-family-secondary), sans-serif;
			font-size: var(--font-size-body-sm);
			font-style: italic;
			font-weight: 400;
			line-height: var(--line-height-sm);
			letter-spacing: var(--letter-spacing-narrow);
		}
		u, a {
			color: var(--text-base-primary);
			font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
			font-family: var(--font-family-secondary), sans-serif;
			font-size: var(--font-size-body-sm);
			font-style: normal;
			font-weight: var(--font-weight-regular);
			line-height: var(--line-height-sm);
			letter-spacing: var(--letter-spacing-narrow);
			text-decoration-line: underline;
			text-decoration-style: solid;
			text-decoration-skip-ink: auto;
			text-decoration-color: var(--text-base-tertiatry);
			text-decoration-thickness: 8%;
			text-underline-offset: 12%;
			text-underline-position: from-font;
		}
		s {
			color: var(--text-base-primary);
			font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
			font-family: var(--font-family-secondary), sans-serif;
			font-size: var(--font-size-body-sm);
			font-style: normal;
			font-weight: var(--font-weight-regular);
			line-height: var(--line-height-sm);
			letter-spacing: var(--letter-spacing-narrow);
			text-decoration-line: line-through;
		}
		ul {
			list-style-type: none;
			padding: 8px 0 0 20px;

			li {
				position: relative;
				padding: 0 0 6px 26px;

				color: var(--text-base-primary);
				font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
				font-family: var(--font-family-secondary), sans-serif;
				font-size: var(--font-size-body-sm);
				font-style: normal;
				font-weight: var(--font-weight-regular);
				line-height: var(--line-height-sm);
				letter-spacing: var(--letter-spacing-narrow);

				&::before {
					content: '';
					position: absolute;
					left: 7px;
					top: 9px;
					display: block;
					background: var(--text-base-ghost);
					width: 6px;
					height: 6px;
					border-radius: 2px;
				}
			}
		}
		ol {
			padding: 8px 0 0 40px;

			li {
				padding: 0 0 6px 6px;

				color: var(--text-base-primary);
				font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
				font-family: var(--font-family-secondary), sans-serif;
				font-size: var(--font-size-body-sm);
				font-style: normal;
				font-weight: var(--font-weight-regular);
				line-height: var(--line-height-sm);
				letter-spacing: var(--letter-spacing-narrow);

				&::marker {
					color: var(--text-base-tertiatry);
				}
			}
		}
		a {
			&:hover {
				color: var(--text-base-tertiatry);
				&:visited {
					color: #644EA8;
				}
			}
			&:visited {
				color: rgba(100, 78, 168, 0.60);
			}
		}
		hr {
			border: none;
			height: 2px;
			background: var(--border-mid-high);
			margin: 10px 0;
		}
		code {
			display: inline-block;
			padding: 2px 6px;

			border-radius: 6px;
			border: 1px solid var(--base-greengrey-a-100);
			background: var(--base-greengrey-a-50);

			color: var(--text-base-primary, rgba(0, 0, 0, 0.93));
			font-feature-settings: 'case' on, 'cpsp' on;

			font-family: var(--font-family-mono), monospace;
			font-size: var(--font-size-body-sm);
			font-style: normal;
			font-weight: var(--font-weight-regular);
			line-height: var(--line-height-sm);
			letter-spacing: var(--letter-spacing-regular);
		}
		kbd {
			display: inline-flex;
			padding: 0 6px;
			justify-content: center;
			align-items: center;

			border-radius: 8px;
			border: 1px solid var(--base-greengrey-a-150);
			background: var(--base-greengrey-a-50);
			box-shadow: 0 1px 3px -1px var(--base-greengrey-a-200), 0 -4px 0 0 var(--base-greengrey-a-100) inset;

			color: var(--text-base-primary);
			font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
			font-family: var(--font-family-secondary), sans-serif;
			font-size: var(--font-size-body-sm);
			font-style: normal;
			font-weight: var(--font-weight-medium);
			line-height: var(--line-height-sm);
			letter-spacing: var(--letter-spacing-narrow);
		}
		blockquote {
			display: flex;
			padding: 0 0 0 32px;
			margin: 32px 0 20px 0;
			flex-direction: column;
			align-items: flex-start;
			gap: 12px;
			align-self: stretch;
			border-left: 2px solid var(--color-blue-500);
			box-sizing: border-box;

			color: var(--text-base-primary);
			font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on, 'cv11' on;
			font-family: var(--font-family-secondary), sans-serif;
			font-size: var(--font-size-heading-xs);
			font-style: normal;
			font-weight: var(--font-weight-medium);
			line-height: var(--line-height-m);
			letter-spacing: var(--letter-spacing-narrow);
		}
		caption, .caption {
			color: var(--text-base-tertiatry);
			font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;

			font-family: var(--font-family-secondary), sans-serif;
			font-size: var(--font-size-body-xs);
			font-style: normal;
			font-weight: var(--font-weight-regular);
			line-height: var(--line-height-s);
			letter-spacing: var(--letter-spacing-regular);
		}
		span.hnum {
			display: inline-flex;
			padding: 0 6px;
			margin: 0 2px 0 4px;
			min-width: 24px;
			box-sizing: border-box;
			justify-content: center;
			align-items: center;
			border-radius: 8px 8px 8px 2px;
			border: 2px solid var(--base-neutral-a-600);
			background: var(--base-greengrey-a-950);
			box-shadow: 0 0 10px 0 var(--text-base-invert-ghost) inset;
			color: var(--text-base-invert-primary);
			font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
			font-family: var(--font-family-secondary), sans-serif;
			font-size: var(--font-size-body-xs);
			font-style: normal;
			font-weight: var(--font-weight-medium);
			line-height: var(--line-height-s);
			letter-spacing: var(--letter-spacing-regular);
		}
		span.hkey {
			display: inline-flex;
			padding: 0 8px;
			justify-content: center;
			align-items: center;
			gap: 4px;
			border-radius: 8px;
			border: 1px solid var(--color-lime-900);
			background: var(--color-lime-600);
			color: var(--color-lime-950, #323702);
			font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
			font-family: var(--font-family-secondary), sans-serif;
			font-size: var(--font-size-body-xs);
			font-style: normal;
			font-weight: var(--font-weight-medium);
			line-height: var(--line-height-s);
			letter-spacing: var(--letter-spacing-regular);
		}
		span.hkey2 {
			display: inline-flex;
			padding: 0 8px;
			justify-content: center;
			align-items: center;
			gap: 4px;
			border-radius: 8px;
			border: 1px solid var(--color-blue-800);
			background: var(--color-blue-300);
			color: var(--color-blue-900);
			font-feature-settings: 'case' on, 'cpsp' on, 'cv05' on;
			font-family: var(--font-family-secondary), sans-serif;
			font-size: var(--font-size-body-xs);
			font-style: normal;
			font-weight: var(--font-weight-medium);
			line-height: var(--line-height-s);
			letter-spacing: var(--letter-spacing-regular);
		}

		img {
			border-radius: 8px;
			border: 1px solid var(--border-high);
			background: var(--bg-surf-0);
			max-width: 100%;
			height: auto;
			transition: all .3s cubic-bezier(.65, .05, .36, 1);

			&:hover {
				cursor: zoom-in;
				transform: translateY(-2px);
				box-shadow: 0 2px 2px -1px var(--base-slate-a-100), 0 6px 6px -3px var(--base-slate-a-100), 0 12px 12px -6px var(--base-slate-a-50);
			}
		}
	}
}

hr.typo_hr {
	border: none;
	height: 2px;
	background: var(--border-mid-high);
	margin: 10px 0;
}