@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/assets/root/fonts/jetbrains-mono-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/assets/root/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--bg: #0a0d0c;
	--panel: #0f1513;
	--line: #1c2822;
	--dim: #6d8479;
	--fg: #cfe0d6;
	--bright: #e9f5ee;
	--acc: #ffb838;
	--acc2: #7fd4ff;
	--mono: 'JetBrains Mono', ui-monospace, monospace;

	/* shiki css-variables theme, as the pages renderer names it: two accents only */
	--shiki-background: var(--panel);
	--shiki-foreground: var(--fg);
	--shiki-token-comment: var(--dim);
	--shiki-token-punctuation: var(--dim);
	--shiki-token-keyword: var(--acc2);
	--shiki-token-string: var(--acc);
	--shiki-token-string-expression: var(--acc);
	--shiki-token-link: var(--acc);
	--shiki-token-changed: var(--acc);
	--shiki-token-inserted: var(--acc2);
	--shiki-token-deleted: var(--dim);
	--shiki-token-constant: var(--fg);
	--shiki-token-parameter: var(--fg);
	--shiki-token-function: var(--bright);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	margin: 0;
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

/* theme: none leaves header, main and footer as direct children of body, so body is the shell */
body {
	margin: 0 auto;
	font-family: var(--mono);
	background: var(--bg);
	color: var(--fg);
	min-height: 100vh;
	padding: 36px 44px 60px;
	max-width: 1000px;
}

a {
	color: inherit;
	text-decoration: none;
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--acc);
	outline-offset: 3px;
}

::selection {
	background: rgba(255, 184, 56, 0.28);
}

@keyframes blink {
	0%,
	49% {
		opacity: 1;
	}
	50%,
	100% {
		opacity: 0;
	}
}

@keyframes bootIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* prompt bar */

.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: var(--dim);
	animation: bootIn 0.5s ease both;
}

.prompt-user {
	color: var(--acc);
}

.prompt-cwd {
	color: var(--acc2);
}

.cursor {
	display: inline-block;
	width: 8px;
	height: 15px;
	background: var(--acc);
	margin-left: 7px;
	vertical-align: -2px;
	animation: blink 1.1s step-end infinite;
}

.nav {
	display: flex;
	gap: 20px;
}

.nav a:hover {
	color: var(--acc);
}

/* name + bio */

.name {
	margin: 30px 0 0;
	font-size: clamp(40px, 6.4vw, 78px);
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.035em;
	color: var(--acc);
	animation: bootIn 0.6s ease 0.08s both;
}

.duo {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 44px;
	margin-top: 18px;
	animation: bootIn 0.6s ease 0.16s both;
}

.bio p {
	margin: 0;
	font-size: 15px;
	line-height: 1.85;
	color: var(--dim);
	max-width: 66ch;
}

.bio h2,
.bio h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fg);
}

.bio h2 + p,
.bio h3 + p,
.bio p + p {
	margin-top: 14px;
}

.bio a {
	color: var(--acc);
	border-bottom: 1px solid var(--acc);
}

.facts {
	font-size: 13px;
	line-height: 1.9;
	color: var(--dim);
}

.fact {
	display: grid;
	grid-template-columns: 8ch 1fr;
}

.fact-label {
	color: var(--acc2);
}

/* panels */

.panel {
	margin-top: 44px;
	border: 1px solid var(--line);
	border-radius: 5px;
	overflow: hidden;
	animation: bootIn 0.6s ease 0.24s both;
}

.panel-head {
	background: var(--panel);
	padding: 9px 16px;
	font-size: 12px;
	color: var(--dim);
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.hero {
	display: block;
	padding: 24px 18px 22px;
	border-top: 1px solid var(--line);
}

.hero:hover {
	background: var(--panel);
}

.hero-title {
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--bright);
}

.hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 12px;
	color: var(--dim);
	margin-top: 11px;
}

.hero-dek {
	font-size: 15px;
	line-height: 1.7;
	color: var(--dim);
	margin-top: 9px;
	max-width: 74ch;
}

.kind {
	color: var(--acc2);
}

.row {
	display: grid;
	grid-template-columns: 118px 1fr 128px;
	gap: 18px;
	padding: 14px 18px;
	border-top: 1px solid var(--line);
	align-items: baseline;
}

a.row:hover {
	background: var(--panel);
}

.row-kind {
	font-size: 12px;
	color: var(--acc2);
}

.row-num {
	font-size: 12px;
	font-weight: 700;
	color: var(--acc);
}

.row-title {
	font-size: 18px;
	line-height: 1.4;
	color: var(--bright);
}

.row-date {
	font-size: 12px;
	color: var(--dim);
	text-align: right;
}


.panel-foot {
	border-top: 1px solid var(--line);
	background: var(--panel);
	padding: 11px 18px;
	font-size: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.panel-foot a.accent {
	color: var(--acc);
}

.panel-foot a:not(.accent):hover {
	color: var(--acc);
}

/* colophon */

.colophon {
	margin-top: 40px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: space-between;
	font-size: 12px;
	color: var(--dim);
}

.colophon-links {
	display: flex;
	gap: 18px;
}

.colophon-links a {
	color: var(--acc2);
}

/* nav pages */

.page-title {
	margin: 30px 0 0;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--acc);
	animation: bootIn 0.6s ease 0.08s both;
}

/* entry pages: the header template emits .entry right before <main>, so the body needs no wrapper */

.entry .page-title {
	margin: 0;
}

.entry {
	margin-top: 30px;
	animation: bootIn 0.6s ease 0.08s both;
}

.entry-title {
	margin: 0;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--bright);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 12px;
	color: var(--dim);
	margin-top: 11px;
}

.entry-dek {
	font-size: 15px;
	line-height: 1.7;
	color: var(--dim);
	margin-top: 9px;
	max-width: 74ch;
}

.entry + main {
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-size: 15px;
	line-height: 1.85;
	color: var(--dim);
	max-width: 74ch;
}

.entry + main h2,
.entry + main h3 {
	color: var(--bright);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	margin: 34px 0 0;
}

.entry + main p {
	margin: 16px 0 0;
}

.entry + main ul,
.entry + main ol {
	margin: 16px 0 0;
	padding-left: 22px;
}

.entry + main ul ul,
.entry + main ol ol {
	margin-top: 4px;
}

.entry + main li {
	margin-top: 4px;
}

.entry + main strong {
	color: var(--bright);
	font-weight: 700;
}

.entry + main a {
	color: var(--acc);
	border-bottom: 1px solid var(--acc);
}

.entry + main table {
	margin: 16px 0 0;
	border-collapse: collapse;
	font-size: 13px;
}

.entry + main th,
.entry + main td {
	border: 1px solid var(--line);
	padding: 6px 10px;
	text-align: left;
}

.entry + main th {
	color: var(--bright);
	background: var(--panel);
}

/* A plate at the full measure: what a screenshot needs to be readable at all. */
.entry + main img {
	display: block;
	width: 100%;
	margin: 16px 0;
	border: 1px solid var(--line);
	border-radius: 5px;
}

/* `![alt](src "float")`: the renderer passes the marker through as a title attribute. */
.entry + main img[title='float'] {
	display: inline;
	float: left;
	width: 200px;
	max-width: 40%;
	margin: 4px 20px 12px 0;
}

.entry + main::after {
	content: '';
	display: block;
	clear: both;
}

.entry + main code {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--bright);
	overflow-wrap: break-word;
}

.keys {
	white-space: nowrap;
}

.key {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--fg);
	background: var(--panel);
	border: 1px solid var(--line);
	border-bottom-width: 2px;
	border-radius: 5px;
	padding: 1px 6px;
}

.key-plus {
	color: var(--dim);
	font-size: 12px;
	padding: 0 3px;
}

.entry + main pre {
	margin: 16px 0 0;
	background: var(--panel) !important;
	border: 1px solid var(--line);
	border-radius: 5px;
	padding: 16px 18px;
	font-size: 13px;
	line-height: 1.7;
	tab-size: 2;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.entry + main pre code {
	color: inherit;
}

.code {
	position: relative;
}

.copy {
	position: absolute;
	top: 9px;
	right: 9px;
	opacity: 0;
	padding: 3px 8px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: var(--panel);
	color: var(--dim);
	font-family: var(--mono);
	font-size: 11px;
	cursor: pointer;
}

.code:hover .copy,
.copy:focus-visible {
	opacity: 1;
}

.copy:hover {
	color: var(--acc);
	border-color: var(--acc);
}

@media (hover: none) {
	.copy {
		opacity: 1;
	}
}

.entry + main blockquote {
	margin: 16px 0 0;
	padding-left: 18px;
	border-left: 1px solid var(--line);
}

.mermaid-figure {
	margin: 16px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: var(--panel);
	overflow-x: auto;
}

.mermaid-figure svg {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.series {
	color: var(--acc);
}

.series:hover {
	border-bottom: 1px solid var(--acc);
}

.toc {
	margin-top: 26px;
	animation: none;
}

.row-current {
	background: var(--panel);
}

.row-current .row-title {
	color: var(--dim);
}

.series-nav {
	display: flex;
	gap: 24px;
	margin-top: 34px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.series-next {
	margin-left: auto;
	text-align: right;
}

.series-dir {
	display: block;
	font-size: 12px;
	color: var(--dim);
}

.series-title {
	display: block;
	margin-top: 5px;
	font-size: 15px;
	color: var(--fg);
	max-width: 34ch;
}

.series-nav a:hover .series-dir,
.series-nav a:hover .series-title {
	color: var(--acc);
}

.back {
	font-size: 12px;
	color: var(--dim);
	margin-top: 30px;
	display: flex;
	gap: 20px;
}

.back a:hover {
	color: var(--acc);
}

@media (max-width: 820px) {
	body {
		padding: 24px 20px 40px;
	}

	.row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.row-date {
		text-align: left;
	}

	.name {
		font-size: 40px;
	}

	.entry + main img[title='float'] {
		display: block;
		float: none;
		width: 160px;
		max-width: 100%;
		margin: 0 0 4px;
	}

	.hero-title,
	.entry-title,
	.page-title {
		font-size: 30px;
	}

	.duo {
		grid-template-columns: minmax(0, 1fr);
	}

	.topbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.series-nav {
		flex-direction: column;
		gap: 20px;
	}

	.series-next {
		margin-left: 0;
		text-align: left;
	}
}