@property --kl-paper {
	syntax: '<color>';
	inherits: true;
	initial-value: #fffdf7;
}

@property --kl-oat {
	syntax: '<color>';
	inherits: true;
	initial-value: #f3f7ee;
}

@property --kl-ink {
	syntax: '<color>';
	inherits: true;
	initial-value: #17211c;
}

@property --kl-muted {
	syntax: '<color>';
	inherits: true;
	initial-value: #5d6d64;
}

@property --kl-leaf {
	syntax: '<color>';
	inherits: true;
	initial-value: #236548;
}

@property --kl-mint {
	syntax: '<color>';
	inherits: true;
	initial-value: #dfeee4;
}

@property --kl-tomato {
	syntax: '<color>';
	inherits: true;
	initial-value: #d75a2b;
}

@property --kl-tomato-readable {
	syntax: '<color>';
	inherits: true;
	initial-value: #bd4821;
}

@property --kl-blue {
	syntax: '<color>';
	inherits: true;
	initial-value: #315f7b;
}

@property --kl-lemon {
	syntax: '<color>';
	inherits: true;
	initial-value: #e7cf63;
}

@property --kl-lemon-readable {
	syntax: '<color>';
	inherits: true;
	initial-value: #8a730d;
}

@property --kl-surface {
	syntax: '<color>';
	inherits: true;
	initial-value: #ffffff;
}

@property --kl-surface-2 {
	syntax: '<color>';
	inherits: true;
	initial-value: #f7faf4;
}

@property --kl-button-text {
	syntax: '<color>';
	inherits: true;
	initial-value: #fffdf7;
}

@property --kl-tomato-text {
	syntax: '<color>';
	inherits: true;
	initial-value: #07120e;
}

@property --kl-lemon-text {
	syntax: '<color>';
	inherits: true;
	initial-value: #17211c;
}

@property --kl-border {
	syntax: '<color>';
	inherits: true;
	initial-value: rgb(23 33 28 / 13%);
}

@property --kl-border-strong {
	syntax: '<color>';
	inherits: true;
	initial-value: rgb(23 33 28 / 24%);
}

@property --kl-header-bg {
	syntax: '<color>';
	inherits: true;
	initial-value: rgb(255 253 247 / 94%);
}

@property --kl-radius {
	syntax: '<length>';
	inherits: true;
	initial-value: 8px;
}

@property --kl-radius-sm {
	syntax: '<length>';
	inherits: true;
	initial-value: 5px;
}

:root {
	color-scheme: light;
	--kl-paper: var(--wp--preset--color--paper);
	--kl-oat: var(--wp--preset--color--oat);
	--kl-ink: var(--wp--preset--color--ink);
	--kl-muted: var(--wp--preset--color--moss-text);
	--kl-leaf: var(--wp--preset--color--leaf);
	--kl-mint: var(--wp--preset--color--mint);
	--kl-tomato: var(--wp--preset--color--tomato);
	--kl-tomato-readable: #bd4821;
	--kl-blue: var(--wp--preset--color--blue-note);
	--kl-lemon: var(--wp--preset--color--lemon);
	--kl-lemon-readable: #8a730d;
	--kl-surface: #ffffff;
	--kl-surface-2: #f7faf4;
	--kl-button-text: var(--wp--preset--color--paper);
	--kl-tomato-text: #07120e;
	--kl-lemon-text: #17211c;
	--kl-border: rgb(23 33 28 / 13%);
	--kl-border-strong: rgb(23 33 28 / 24%);
	--kl-shadow-soft: 0 10px 26px rgb(23 33 28 / 7%);
	--kl-shadow-card: 0 16px 42px rgb(23 33 28 / 9%);
	--kl-shadow: 0 18px 55px rgb(23 33 28 / 10%);
	--kl-body-bg: linear-gradient(180deg, rgb(223 238 228 / 50%), rgb(255 253 247 / 0%) 23rem);
	--kl-header-bg: var(--kl-paper);
	--kl-start-bg: linear-gradient(135deg, rgb(223 238 228 / 92%), rgb(255 253 247 / 94%));
	--kl-radius: var(--wp--preset--border-radius--natural);
	--kl-radius-sm: var(--wp--preset--border-radius--small);
	--kl-max: 1180px;
}

:root[data-kl-theme='dark'] {
	color-scheme: dark;
	--kl-paper: #08120f;
	--kl-oat: #101c17;
	--kl-ink: #f6fbf4;
	--kl-muted: #b3c2b8;
	--kl-leaf: #78d99a;
	--kl-mint: #153225;
	--kl-tomato: #ff8a5c;
	--kl-tomato-readable: #ff8a5c;
	--kl-blue: #91c7e3;
	--kl-lemon: #f0d46b;
	--kl-lemon-readable: #f0d46b;
	--kl-surface: #0d1914;
	--kl-surface-2: #13221b;
	--kl-button-text: #07120e;
	--kl-tomato-text: #07120e;
	--kl-lemon-text: #07120e;
	--kl-border: rgb(246 251 244 / 13%);
	--kl-border-strong: rgb(246 251 244 / 24%);
	--kl-shadow-soft: 0 10px 26px rgb(0 0 0 / 16%);
	--kl-shadow-card: 0 16px 42px rgb(0 0 0 / 22%);
	--kl-shadow: 0 18px 55px rgb(0 0 0 / 28%);
	--kl-body-bg: linear-gradient(180deg, #0f1f18 0, rgb(8 18 15 / 0%) 24rem);
	--kl-header-bg: var(--kl-paper);
	--kl-start-bg: linear-gradient(135deg, rgb(21 50 37 / 92%), rgb(13 25 20 / 96%));
}

@media (prefers-color-scheme: dark) and (scripting: none) {
	:root {
		color-scheme: dark;
		background-color: #08120f;
		--kl-paper: #08120f;
		--kl-oat: #101c17;
		--kl-ink: #f6fbf4;
		--kl-muted: #b3c2b8;
		--kl-leaf: #78d99a;
		--kl-mint: #153225;
		--kl-tomato: #ff8a5c;
		--kl-tomato-readable: #ff8a5c;
		--kl-blue: #91c7e3;
		--kl-lemon: #f0d46b;
		--kl-lemon-readable: #f0d46b;
		--kl-surface: #0d1914;
		--kl-surface-2: #13221b;
		--kl-button-text: #07120e;
		--kl-tomato-text: #07120e;
		--kl-lemon-text: #07120e;
		--kl-border: rgb(246 251 244 / 13%);
		--kl-border-strong: rgb(246 251 244 / 24%);
		--kl-shadow-soft: 0 10px 26px rgb(0 0 0 / 16%);
		--kl-shadow-card: 0 16px 42px rgb(0 0 0 / 22%);
		--kl-shadow: 0 18px 55px rgb(0 0 0 / 28%);
		--kl-body-bg: linear-gradient(180deg, #0f1f18 0, rgb(8 18 15 / 0%) 24rem);
		--kl-header-bg: rgb(8 18 15 / 92%);
		--kl-start-bg: linear-gradient(135deg, rgb(21 50 37 / 92%), rgb(13 25 20 / 96%));
	}
}

.has-tomato-color {
	color: var(--kl-tomato-readable) !important;
}

.has-lemon-color {
	color: var(--kl-lemon-readable) !important;
}

:root[data-kl-theme='dark'] .has-ink-color {
	color: var(--kl-ink) !important;
}

:root[data-kl-theme='dark'] .has-moss-text-color {
	color: var(--kl-muted) !important;
}

:root[data-kl-theme='dark'] .has-paper-color {
	color: var(--kl-paper) !important;
}

:root[data-kl-theme='dark'] .has-oat-color {
	color: var(--kl-oat) !important;
}

:root[data-kl-theme='dark'] .has-leaf-color {
	color: var(--kl-leaf) !important;
}

:root[data-kl-theme='dark'] .has-mint-color {
	color: var(--kl-mint) !important;
}

:root[data-kl-theme='dark'] .has-tomato-color {
	color: var(--kl-tomato) !important;
}

:root[data-kl-theme='dark'] .has-blue-note-color {
	color: var(--kl-blue) !important;
}

:root[data-kl-theme='dark'] .has-lemon-color {
	color: var(--kl-lemon) !important;
}

:root[data-kl-theme='dark'] .has-ink-background-color {
	background-color: var(--kl-ink) !important;
}

:root[data-kl-theme='dark'] .has-moss-text-background-color {
	background-color: var(--kl-muted) !important;
}

:root[data-kl-theme='dark'] .has-paper-background-color {
	background-color: var(--kl-paper) !important;
}

:root[data-kl-theme='dark'] .has-oat-background-color {
	background-color: var(--kl-oat) !important;
}

:root[data-kl-theme='dark'] .has-mint-background-color {
	background-color: var(--kl-mint) !important;
}

:root[data-kl-theme='dark'] .has-leaf-background-color {
	background-color: var(--kl-leaf) !important;
}

:root[data-kl-theme='dark'] .has-tomato-background-color {
	background-color: var(--kl-tomato) !important;
}

:root[data-kl-theme='dark'] .has-blue-note-background-color {
	background-color: var(--kl-blue) !important;
}

:root[data-kl-theme='dark'] .has-lemon-background-color {
	background-color: var(--kl-lemon) !important;
}

@media (prefers-color-scheme: dark) and (scripting: none) {
	:root .has-ink-color {
		color: var(--kl-ink) !important;
	}

	:root .has-moss-text-color {
		color: var(--kl-muted) !important;
	}

	:root .has-paper-color {
		color: var(--kl-paper) !important;
	}

	:root .has-oat-color {
		color: var(--kl-oat) !important;
	}

	:root .has-leaf-color {
		color: var(--kl-leaf) !important;
	}

	:root .has-mint-color {
		color: var(--kl-mint) !important;
	}

	:root .has-tomato-color {
		color: var(--kl-tomato) !important;
	}

	:root .has-blue-note-color {
		color: var(--kl-blue) !important;
	}

	:root .has-lemon-color {
		color: var(--kl-lemon) !important;
	}

	:root .has-ink-background-color {
		background-color: var(--kl-ink) !important;
	}

	:root .has-moss-text-background-color {
		background-color: var(--kl-muted) !important;
	}

	:root .has-paper-background-color {
		background-color: var(--kl-paper) !important;
	}

	:root .has-oat-background-color {
		background-color: var(--kl-oat) !important;
	}

	:root .has-mint-background-color {
		background-color: var(--kl-mint) !important;
	}

	:root .has-leaf-background-color {
		background-color: var(--kl-leaf) !important;
	}

	:root .has-tomato-background-color {
		background-color: var(--kl-tomato) !important;
	}

	:root .has-blue-note-background-color {
		background-color: var(--kl-blue) !important;
	}

	:root .has-lemon-background-color {
		background-color: var(--kl-lemon) !important;
	}
}

.has-ink-background-color:not(.has-text-color),
.has-moss-text-background-color:not(.has-text-color) {
	color: var(--kl-paper);
}

.has-leaf-background-color:not(.has-text-color),
.has-blue-note-background-color:not(.has-text-color) {
	color: var(--kl-button-text);
}

.has-tomato-background-color:not(.has-text-color) {
	color: var(--kl-tomato-text);
}

.has-lemon-background-color:not(.has-text-color) {
	color: var(--kl-lemon-text);
}

.wp-block-group.is-style-kl-lab-note {
	background-color: var(--kl-oat);
	border-inline-start-color: var(--kl-leaf);
	color: var(--kl-ink);
}

@view-transition {
	navigation: auto;
}

::view-transition {
	background-color: var(--kl-paper);
}

.kl-brand {
	view-transition-name: kl-brand;
}

.kl-single-title {
	view-transition-name: kl-single-title;
}

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

html {
	background-color: var(--kl-paper);
	scroll-behavior: smooth;
}

body {
	background: var(--kl-body-bg), var(--kl-paper);
	background-color: var(--kl-paper);
	color: var(--kl-ink);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

:root[data-kl-theme='dark'] body {
	background: var(--kl-body-bg), var(--kl-paper);
	color: var(--kl-ink);
}

body,
button,
input,
select,
textarea {
	letter-spacing: 0;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--kl-leaf);
	text-underline-offset: 0.18em;
	transition:
		color 160ms ease,
		background-color 160ms ease,
		border-color 160ms ease;
}

a:hover {
	color: var(--kl-tomato);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--kl-tomato) 42%, transparent);
	outline-offset: 3px;
}

button,
.wp-block-button__link,
.kl-theme-toggle,
.kl-header-cta,
.kl-header-search-toggle,
.kl-header-search .wp-block-search__button,
.kl-topic-card,
.kl-post-card,
.kl-start-list a,
.kl-start-step,
.kl-start-browse-grid a {
	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease,
		transform 180ms ease,
		box-shadow 180ms ease;
}

.wp-site-blocks {
	min-height: 100vh;
	min-height: 100dvh;
}

@supports (animation-timeline: scroll()) {
	@keyframes kl-scroll-progress {
		from {
			transform: scaleX(0);
		}

		to {
			transform: scaleX(1);
		}
	}

	body:not(.block-editor-iframe__body)::before {
		content: '';
		position: fixed;
		inset-block-start: 0;
		inset-inline-start: 0;
		z-index: 1000;
		width: 100%;
		height: 3px;
		background: linear-gradient(90deg, var(--kl-leaf), var(--kl-lemon), var(--kl-tomato), var(--kl-blue));
		pointer-events: none;
		transform: scaleX(0);
		transform-origin: 0 50%;
		animation: kl-scroll-progress linear both;
		animation-timeline: scroll(root block);
	}
}

.kl-single-content h2[id] {
	scroll-margin-block-start: 6rem;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	color: var(--kl-ink);
	text-wrap: balance;
}

.kl-shell {
	width: min(100%, var(--kl-max));
	margin-inline: auto;
}

.kl-main {
	margin-block-start: 0;
}

.kl-page-content > *,
.kl-single-content > * {
	max-width: 760px;
}

.kl-page-content,
.kl-single-content .wp-block-post-content {
	overflow-wrap: anywhere;
}

.kl-actions {
	margin-block-start: 1.6rem;
}

.kl-actions .wp-block-button__link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--kl-leaf);
	border-radius: 999px;
	background: var(--kl-leaf);
	font-weight: 850;
	line-height: 1.1;
	box-shadow: none;
	color: var(--kl-button-text);
}

.kl-actions .wp-block-button__link:hover {
	background: var(--kl-tomato);
	border-color: var(--kl-tomato);
	color: var(--kl-tomato-text);
	transform: translateY(-1px);
}

.kl-actions .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--kl-border-strong);
	color: var(--kl-ink);
}

.kl-actions .is-style-outline .wp-block-button__link:hover {
	background: transparent;
	border-color: var(--kl-tomato);
	color: var(--kl-tomato);
}

.kl-band {
	padding-block: clamp(2.4rem, 5vw, 5rem);
}

.kl-section-head {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(240px, 0.48fr);
	gap: clamp(1.2rem, 4vw, 4rem);
	align-items: end;
	margin-block-end: clamp(1.3rem, 3vw, 2rem);
}

.kl-section-head h2,
.kl-archive-title,
.kl-page-title {
	margin: 0;
	font-size: clamp(2.1rem, 4vw, 4rem);
}

.kl-section-head p {
	margin: 0;
	color: var(--kl-muted);
	line-height: 1.55;
}

.kl-post-terms,
.kl-single-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.35rem;
	color: var(--kl-leaf);
	font-size: 0.78rem;
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
}

.kl-post-terms a,
.kl-single-terms a {
	min-height: 1.65rem;
	display: inline-flex;
	align-items: center;
	padding: 0.18rem 0.48rem;
	border: 1px solid color-mix(in srgb, var(--kl-leaf) 26%, var(--kl-border));
	border-radius: 999px;
	background: color-mix(in srgb, var(--kl-mint) 42%, transparent);
	color: inherit;
	text-decoration: none;
}

.kl-post-terms a:hover,
.kl-single-terms a:hover {
	border-color: color-mix(in srgb, var(--kl-tomato) 42%, var(--kl-border));
	background: color-mix(in srgb, var(--kl-tomato) 10%, var(--kl-surface));
	color: var(--kl-tomato);
}

.kl-page-hero,
.kl-archive-hero,
.kl-start-page-hero {
	padding-block: clamp(2.6rem, 6vw, 5.6rem) clamp(1.7rem, 4vw, 3rem);
}

.kl-page-title,
.kl-archive-title {
	max-width: 900px;
}

.kl-breadcrumbs-wrap {
	margin: 0 0 1rem;
}

.kl-breadcrumbs-wrap .rank-math-breadcrumb,
.kl-breadcrumbs-wrap .wp-block-breadcrumbs {
	color: var(--kl-muted);
	font-size: 0.82rem;
	font-weight: 850;
	line-height: 1.35;
}

.kl-breadcrumbs-wrap .rank-math-breadcrumb p,
.kl-breadcrumbs-wrap .wp-block-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.32rem;
	align-items: center;
	margin: 0;
}

.kl-breadcrumbs-wrap .wp-block-breadcrumbs li {
	margin: 0;
}

.kl-breadcrumbs-wrap .rank-math-breadcrumb a,
.kl-breadcrumbs-wrap .wp-block-breadcrumbs a {
	min-height: 30px;
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.kl-breadcrumbs-wrap .rank-math-breadcrumb a:hover,
.kl-breadcrumbs-wrap .wp-block-breadcrumbs a:hover {
	color: var(--kl-leaf);
}

.kl-breadcrumbs-wrap .rank-math-breadcrumb a:first-of-type,
.kl-breadcrumbs-wrap .wp-block-breadcrumbs li:first-child a {
	width: 1.45rem;
	overflow: hidden;
	justify-content: center;
	font-size: 0;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	position: relative;
}

.kl-breadcrumbs-wrap .rank-math-breadcrumb a:first-of-type::before,
.kl-breadcrumbs-wrap .wp-block-breadcrumbs li:first-child a::before {
	content: '';
	position: absolute;
	inset: 50% auto auto 50%;
	width: 0.62rem;
	height: 0.62rem;
	border-top: 2px solid currentColor;
	border-inline-start: 2px solid currentColor;
	transform: translate(-42%, -50%) rotate(-45deg);
}

.kl-breadcrumbs-wrap .rank-math-breadcrumb .separator,
.kl-breadcrumbs-wrap .wp-block-breadcrumbs li:not(:last-child)::after {
	color: color-mix(in srgb, var(--kl-muted) 66%, transparent);
	margin-inline: 0.32rem;
	opacity: 1;
}

.kl-breadcrumbs-wrap .rank-math-breadcrumb .last,
.kl-breadcrumbs-wrap .wp-block-breadcrumbs [aria-current='page'] {
	color: var(--kl-muted);
}

.kl-page-content > .alignwide,
.kl-single-content > .alignwide {
	max-width: var(--kl-max);
}

.kl-page-content h2,
.kl-page-content h3,
.kl-single-content h2,
.kl-single-content h3 {
	margin-block-start: 1.8em;
}

.kl-no-results {
	padding: 1.2rem;
	border: 1px dashed var(--kl-border-strong);
	border-radius: var(--kl-radius);
	color: var(--kl-muted);
	background: var(--kl-oat);
}