.progress {
	position: sticky;
	top: var(--chrome-height);
	z-index: 40;
	height: 0.4rem;
	transform-origin: 0 50%;
	background: var(--accent);
	animation: reading-progress linear;
	animation-timeline: scroll(root block);
}

@keyframes reading-progress {
	from {
		scale: 0 1;
	}

	to {
		scale: 1 1;
	}
}

.reading {
	position: relative;
	z-index: 1;
	width: min(78rem, calc(100vw - var(--space-6)));
	margin: var(--space-6) auto var(--space-9);
	padding: var(--space-8) var(--space-7);
	border-radius: var(--radius-m);
	background: var(--surface-reading);
	color: var(--text-on-reading);
	box-shadow: var(--surface-raised-shadow);
}

.reading ::selection {
	background: var(--selection-on-reading);
}

.reading-title {
	margin: 0;
	color: var(--text-on-reading);
	font-family: var(--font-display);
	font-size: var(--step-4);
	font-weight: 800;
	line-height: 1.25;
	view-transition-name: article-title;
}

.reading-title-mark {
	display: inline;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent,
		transparent calc(1.25em - 0.9rem),
		var(--selection-on-reading) calc(1.25em - 0.9rem),
		var(--selection-on-reading) 1.25em
	);
}

.post-dates {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-4) 0 var(--space-6);
}

.post-date {
	display: inline-flex;
	gap: var(--space-2);
	align-items: baseline;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--rule-on-reading);
	border-radius: var(--radius-pill);
	color: var(--text-on-reading-muted);
	font-family: var(--font-ui);
	font-size: var(--step--1);
	line-height: 1.8;
}

.post-date-updated {
	border-color: var(--accent-edge);
	background: var(--accent-wash);
	color: var(--accent-on-reading);
}

.post-body {
	font-family: var(--font-read);
	font-size: 2rem;
	line-height: 1.6;
}

.post-body p,
.post-body ul,
.post-body ol,
.post-body dl {
	margin: 0 0 var(--space-5);
}

.post-body li {
	margin-bottom: var(--space-2);
	list-style-type: square;
}

.post-body li::marker {
	color: var(--accent-on-reading);
}

.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
	margin: var(--space-7) 0 var(--space-3);
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.3;
}

.post-body h2 {
	font-size: var(--step-3);
}

.post-body h3 {
	font-size: var(--step-2);
}

.post-body h4,
.post-body h5,
.post-body h6 {
	font-size: var(--step-1);
}

.post-body > :first-child {
	margin-top: 0;
}

.post-body a {
	color: var(--accent-on-reading);
	text-underline-offset: 0.3rem;
}

.post-body a[href^="http"]::after {
	margin-left: 0.5rem;
	font-family: "Font Awesome 7 Free", sans-serif;
	font-size: 1.3rem;
	font-weight: 900;
	content: "\f08e";
}

.post-body code {
	padding: 0.1em 0.4em;
	border-radius: var(--radius-xs);
	background: rgb(var(--nm-black-rgb) / 0.05);
	font-family: var(--font-ui);
	font-size: 0.82em;
	word-wrap: break-word;
}

.post-body pre {
	position: relative;
	margin: 0 0 var(--space-5);
}

.post-body pre code {
	padding: 0;
	background: none;
	font-size: inherit;
}

.post-body pre:focus {
	outline: 0;
}

.post-body blockquote {
	margin: 0 0 var(--space-5);
	padding: var(--space-4) var(--space-5);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-xs);
	background: rgb(var(--nm-black-rgb) / 0.03);
	font-style: italic;
}

.post-body blockquote > :last-child {
	margin-bottom: 0;
}

.post-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-s);
}

.post-body hr {
	margin: var(--space-6) 0;
	border: 0;
	border-top: 1px solid var(--rule-on-reading);
}

.post-body table {
	display: block;
	width: max-content;
	max-width: 100%;
	margin: 0 0 var(--space-5);
	overflow-x: auto;
	border-collapse: collapse;
	font-family: var(--font-ui);
	font-size: var(--step-0);
}

.post-body th,
.post-body td {
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--rule-on-reading);
	text-align: left;
}

.copy-code-btn {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	display: flex;
	width: 2.8rem;
	height: 2.8rem;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--accent-edge);
	border-radius: var(--radius-xs);
	background: transparent;
	color: var(--accent-on-reading);
	font-size: 1.4rem;
	cursor: pointer;
	transition:
		color var(--dur-soft) var(--ease-soft),
		border-color var(--dur-soft) var(--ease-soft),
		background-color var(--dur-soft) var(--ease-soft),
		transform var(--dur-soft) var(--ease-soft);
}

.copy-code-btn::before {
	font-family: "Font Awesome 7 Free", sans-serif;
	font-weight: 400;
	content: "\f0c5";
}

.copy-code-btn.copied::before {
	font-weight: 900;
	content: "\f00c";
}

.copy-code-btn:hover {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--nm-paper);
}

.post-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-6);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid var(--rule-on-reading);
}

.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.post-tag {
	display: inline-flex;
	gap: var(--space-2);
	align-items: baseline;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--accent-edge);
	border-radius: var(--radius-pill);
	background: var(--accent-wash);
	color: var(--accent-on-reading);
	font-family: var(--font-ui);
	font-size: var(--step--1);
	line-height: 1.8;
	text-decoration: none;
	transition:
		color var(--dur-soft) var(--ease-soft),
		border-color var(--dur-soft) var(--ease-soft),
		background-color var(--dur-soft) var(--ease-soft),
		transform var(--dur-soft) var(--ease-soft);
}

.post-tag:active,
.copy-code-btn:active {
	transform: scale(0.97);
}

.post-tag:hover {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--nm-paper);
}

.claps {
	display: flex;
	gap: var(--space-4);
	align-items: center;
}

.clap-btn {
	position: relative;
	display: flex;
	width: 5.2rem;
	height: 5.2rem;
	flex: none;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--accent-edge);
	border-radius: var(--radius-circle);
	background: transparent;
	color: var(--accent-on-reading);
	font-size: 2rem;
	cursor: pointer;
	transition:
		color var(--dur-soft) var(--ease-soft),
		border-color var(--dur-soft) var(--ease-soft),
		background-color var(--dur-soft) var(--ease-soft),
		transform var(--dur-soft) var(--ease-soft);
}

.clap-btn:hover:enabled,
.clap-btn.clapped {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--nm-paper);
}

.clap-btn:active:enabled {
	transform: scale(0.95);
}

.clap-btn:disabled {
	opacity: 0.7;
	cursor: default;
}

.clap-btn i {
	display: block;
	pointer-events: none;
}

.clap-pop {
	animation: clap-pop 0.45s var(--ease-out);
}

.clap-count {
	color: var(--text-on-reading-muted);
	font-family: var(--font-ui);
	font-size: var(--step-0);
	font-variant-numeric: tabular-nums;
	transition: color var(--dur-soft) var(--ease-soft);
}

.clap-btn.clapped ~ .clap-count {
	color: var(--accent-on-reading);
}

.clap-bubble {
	position: absolute;
	bottom: calc(100% + var(--space-3));
	left: 50%;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-l);
	background: var(--nm-nord0);
	color: var(--nm-paper);
	font-family: var(--font-ui);
	font-size: var(--step--1);
	line-height: 1.8;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 0.6rem);
	transition:
		opacity var(--dur-soft) var(--ease-soft),
		transform var(--dur-soft) var(--ease-soft);
	pointer-events: none;
}

.clap-bubble::after {
	position: absolute;
	top: 100%;
	left: 50%;
	border: 0.5rem solid transparent;
	border-top-color: var(--nm-nord0);
	transform: translateX(-50%);
	content: "";
}

.claps.bubbling .clap-bubble {
	opacity: 1;
	transform: translate(-50%, 0);
}

.claps.clap-failed .clap-bubble {
	background: var(--nm-red);
	color: var(--nm-nord0);
}

.claps.clap-failed .clap-bubble::after {
	border-top-color: var(--nm-red);
}

.clap-burst {
	position: absolute;
	inset: 0;
	border-radius: var(--radius-circle);
	pointer-events: none;
}

.clap-burst::before {
	position: absolute;
	inset: -0.4rem;
	border: 2px solid var(--accent-glow);
	border-radius: var(--radius-circle);
	animation: clap-ring 0.7s var(--ease-out) forwards;
	content: "";
}

.clap-spark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5rem;
	height: 0.5rem;
	margin: -0.25rem 0 0 -0.25rem;
	border-radius: var(--radius-circle);
	background: var(--accent);
	animation: clap-spark 0.7s var(--ease-out) forwards;
}

@keyframes clap-pop {
	0% {
		transform: scale(1) rotate(0);
	}

	35% {
		transform: scale(1.35) rotate(-10deg);
	}

	100% {
		transform: scale(1) rotate(0);
	}
}

@keyframes clap-ring {
	from {
		opacity: 0.9;
		transform: scale(0.85);
	}

	to {
		opacity: 0;
		transform: scale(1.9);
	}
}

@keyframes clap-spark {
	from {
		opacity: 1;
		transform: rotate(var(--clap-spark-angle)) translateY(-1.4rem) scale(1);
	}

	to {
		opacity: 0;
		transform: rotate(var(--clap-spark-angle)) translateY(-3.6rem) scale(0.2);
	}
}

.post-continue {
	container-type: inline-size;
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--rule-on-reading);
}

.post-continue-label {
	margin: 0 0 var(--space-4);
	color: var(--text-on-reading-muted);
	font-family: var(--font-ui);
	font-size: var(--step--1);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.post-continue-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.post-continue-card {
	display: flex;
	flex: 1 1 24rem;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4);
	border: 1px solid var(--rule-on-reading);
	border-radius: var(--radius-s);
	text-decoration: none;
	transition: border-color var(--dur-soft) var(--ease-soft);
}

.post-continue-card:hover {
	border-color: var(--accent-edge);
}

.post-continue-card:only-child {
	flex-grow: 0;
}

.post-continue-card-next {
	text-align: right;
}

.post-continue-card-next:only-child {
	margin-left: auto;
}

@container (max-width: 49.4rem) {
	.post-continue-card-next {
		text-align: left;
	}
}

.post-continue-dir {
	color: var(--accent-on-reading);
	font-family: var(--font-ui);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.post-continue-title {
	color: var(--text-on-reading);
	font-family: var(--font-display);
	font-size: var(--step-0);
	font-weight: 800;
	line-height: 1.35;
}

.post-footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	align-items: baseline;
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--rule-on-reading);
	color: var(--text-on-reading-muted);
	font-family: var(--font-ui);
	font-size: var(--step--1);
}

.post-footer a {
	color: var(--text-on-reading-muted);
	text-decoration: none;
}

.post-footer a:hover {
	color: var(--accent-on-reading);
}

.edit-post-btn {
	position: fixed;
	right: var(--space-5);
	bottom: calc(var(--space-5) * 2 + 4.4rem);
	z-index: 60;
	display: flex;
	width: 4.8rem;
	height: 4.8rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-circle);
	background: var(--accent);
	color: var(--nm-paper);
	font-size: 1.8rem;
	text-decoration: none;
	box-shadow: 0 4px 16px var(--accent-glow);
	transition:
		color var(--dur-soft) var(--ease-soft),
		background-color var(--dur-soft) var(--ease-soft);
}

.edit-post-btn:hover {
	background: var(--nm-paper);
	color: var(--accent);
}

@media (max-width: 767px) {
	.reading {
		width: calc(100vw - var(--space-4));
		margin: var(--space-4) auto var(--space-7);
		padding: var(--space-5) var(--space-4);
	}

	.post-body {
		font-size: 1.8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.clap-burst {
		display: none;
	}

	.clap-pop {
		animation: none;
	}
}