:root {
	--font-default: "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
	--font-ibm-plex-sans: "IBM Plex Sans", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
	--font-franklin: "Libre Franklin", "Franklin Gothic", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
	--font-garamond: "EB Garamond", "Adobe Garamond", "Garamond", "Times New Roman", serif;
	--font-source-serif: "Source Serif 4", "Georgia", serif;
	--font-times-new-roman: "Times New Roman", serif;
	--font-ibm-plex-mono: "IBM Plex Mono", monospace;
	--font-monospace: monospace;
	--font-XS: 0.75em;
	--font-S: 0.875em;
	--font-M: 1em;
	--font-L: 1.25em;
	--font-XL: 1.5em;
	--font-2XL: 2em;
	--default-font-size: 18px;
	--base-font-size: var(--default-font-size);
	--base-line-height: 1.5;
	--space-0: 0rem;
	--space-3XS: 0.125rem;
	--space-2XS: 0.25rem;
	--space-XS: 0.5rem;
	--space-S: 0.75rem;
	--space-M: 1.0rem;
	--space-L: 1.5rem;
	--space-XL: 2.0rem;
	--space-2XL: 2.5rem;
	--space-3XL: 3.0rem;
	--space-4XL: 4.0rem;
	--space-5XL: 5.0rem;
	--space-6XL: 6.0rem;
	--width-S: 480px;
	--width-M: 700px;
	--width-L: 900px;
	--width-XL: 1366px;
	--width-guestbook-canvas: 384px;
	--border-radius: 7px
}

body,
.pulse-post {
	--font-family: var(--font-default);
	--font-custom-body: var(--font-family);
	--font-custom-headlines: var(--font-custom-body);
	--font-custom-headlines-weight: 700;
	--font-custom-meta: var(--font-custom-body);
	--light-color-variable-bg: 255, 255, 255;
	--light-color-variable-txt: 30, 30, 30;
	--light-color-variable-primary: 37, 99, 235;
	--dark-color-variable-bg: 0, 0, 0;
	--dark-color-variable-txt: 215, 215, 215;
	--dark-color-variable-primary: 96, 165, 250;
	--danger-color-variable-txt: 236, 38, 17;
	--color-bg: rgba(var(--light-color-variable-bg), 1);
	--color-bg-input: rgba(var(--light-color-variable-txt), 0.025);
	--color-bg-light: rgba(var(--light-color-variable-txt), 0.05);
	--color-txt: rgba(var(--light-color-variable-txt), 1);
	--color-txt-light: rgba(var(--light-color-variable-txt), 0.65);
	--color-txt-lighter: rgba(var(--light-color-variable-txt), 0.4);
	--color-border: rgba(var(--light-color-variable-txt), 0.2);
	--color-txt-on-primary: rgba(var(--light-color-variable-bg), 1);
	--color-primary: rgba(var(--light-color-variable-primary), 1);
	--color-primary-light: rgba(var(--light-color-variable-primary), 0.1);
	--color-danger: rgba(var(--danger-color-variable-txt), 1);
	--color-txt-on-danger: rgba(var(--light-color-variable-bg), 1);
	--color-modal-backdrop: rgba(255, 255, 255, 0.8);
	--color-shadow: rgba(0, 0, 0, .05);
	--big-shadow: 0 4px 8px var(--color-shadow), 0 8px 32px var(--color-shadow), 0 32px 64px -8px var(--color-shadow);
	--lil-shadow: 0 1px 3px var(--color-shadow)
}

@media (prefers-color-scheme: dark) {

	body:not(.random-class-that-pushes-this-to-the-bottom-of-the-styles),
	.pulse-post:not(.random-class-that-pushes-this-to-the-bottom-of-the-styles) {
		--light-color-variable-bg: var(--dark-color-variable-bg);
		--light-color-variable-txt: var(--dark-color-variable-txt);
		--light-color-variable-primary: var(--dark-color-variable-primary);
		--color-bg-input: rgba(var(--dark-color-variable-txt), 0.05);
		--color-bg-light: rgba(var(--dark-color-variable-txt), 0.1);
		--color-primary-light: rgba(var(--light-color-variable-primary), 0.2);
		--color-modal-backdrop: rgba(50, 50, 50, 0.8);
		--color-shadow: rgba(0, 0, 0, 0.3)
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	overflow-wrap: break-word;
	scrollbar-width: thin;
	vertical-align: baseline;
	word-wrap: break-word
}

html {
	font-size: 18px;
	margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	-webkit-text-size-adjust: none;
	text-size-adjust: none
}

body {
	background-color: var(--color-bg);
	color: var(--color-txt);
	display: flex;
	flex-direction: column;
	font-family: var(--font-family);
	font-size: var(--font-M);
	line-height: var(--base-line-height);
	margin: auto;
	min-height: 100dvh;
	padding: 0
}

a,
.button-like-link {
	color: var(--color-primary);
	cursor: pointer;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px
}

@media (pointer: fine) {

	a:active,
	.button-like-link:active {
		transform: translateY(1px)
	}

	a:active:focus,
	.button-like-link:active:focus {
		outline: none
	}
}

a.underline-on-hover,
.button-like-link.underline-on-hover {
	text-decoration: none
}

@media (pointer: fine) {

	a.underline-on-hover:hover,
	a.underline-on-hover:focus,
	.button-like-link.underline-on-hover:hover,
	.button-like-link.underline-on-hover:focus {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 2px
	}
}

.site-view {
	font-family: var(--font-custom-body);
	font-size: var(--base-font-size);
	max-width: var(--width-M);
	padding-inline: var(--space-M);
	width: 100%
}

.site-view h1,
.site-view h2,
.site-view h3,
.site-view h4,
.site-view h5,
.site-view h6,
.site-view .h1,
.site-view .post-list-year-h2 {
	font-family: var(--font-custom-headlines);
	font-weight: var(--font-custom-headlines-weight)
}

h1,
.h1 {
	font-family: var(--font-family);
	font-size: var(--font-2XL);
	letter-spacing: -0.33px;
	line-height: calc(var(--base-line-height) * 0.8);
	margin-block: 0 0.8em
}

h1>a,
.h1>a {
	text-underline-offset: 3px
}

h2,
.h2 {
	font-family: var(--font-family);
	font-size: var(--font-XL);
	line-height: calc(var(--base-line-height) * 0.9)
}

h3 {
	font-family: var(--font-family);
	font-size: var(--font-L);
	line-height: calc(var(--base-line-height) * 0.95)
}

h4,
h5,
h6 {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit
}

h2,
h3,
h4,
h5,
h6 {
	margin-block: 1.5em 0.5em;
	position: relative
}

h2+*,
h3+*,
h4+*,
h5+*,
h6+* {
	margin-top: 0 !important
}

h2:target,
h3:target,
h4:target,
h5:target,
h6:target {
	background-color: var(--color-primary-light);
	border-radius: 2px;
	box-shadow: 0 0 0 var(--space-2XS) var(--color-primary-light)
}

h2 .anchor,
h3 .anchor,
h4 .anchor,
h5 .anchor,
h6 .anchor {
	opacity: 0;
	position: absolute;
	right: 100%;
	text-decoration: none;
	top: var(--space-2XS);
	transition: 0.1s
}

h2 .anchor:hover,
h2 .anchor:focus,
h3 .anchor:hover,
h3 .anchor:focus,
h4 .anchor:hover,
h4 .anchor:focus,
h5 .anchor:hover,
h5 .anchor:focus,
h6 .anchor:hover,
h6 .anchor:focus {
	opacity: 1;
	padding-right: var(--space-XS)
}

h2 .anchor::before,
h3 .anchor::before,
h4 .anchor::before,
h5 .anchor::before,
h6 .anchor::before {
	background-color: var(--color-txt);
	content: '';
	display: block;
	height: 1em;
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M580.3%20267.2c56.2-56.2%2056.2-147.3%200-203.5C526.8%2010.2%20440.9%207.3%20383.9%2057.2l-6.1%205.4c-10%208.7-11%2023.9-2.3%2033.9s23.9%2011%2033.9%202.3l6.1-5.4c38-33.2%2095.2-31.3%20130.9%204.4c37.4%2037.4%2037.4%2098.1%200%20135.6L433.1%20346.6c-37.4%2037.4-98.2%2037.4-135.6%200c-35.7-35.7-37.6-92.9-4.4-130.9l4.7-5.4c8.7-10%207.7-25.1-2.3-33.9s-25.1-7.7-33.9%202.3l-4.7%205.4c-49.8%2057-46.9%20142.9%206.6%20196.4c56.2%2056.2%20147.3%2056.2%20203.5%200L580.3%20267.2zM59.7%20244.8C3.5%20301%203.5%20392.1%2059.7%20448.2c53.6%2053.6%20139.5%2056.4%20196.5%206.5l6.1-5.4c10-8.7%2011-23.9%202.3-33.9s-23.9-11-33.9-2.3l-6.1%205.4c-38%2033.2-95.2%2031.3-130.9-4.4c-37.4-37.4-37.4-98.1%200-135.6L207%20165.4c37.4-37.4%2098.1-37.4%20135.6%200c35.7%2035.7%2037.6%2092.9%204.4%20130.9l-5.4%206.1c-8.7%2010-7.7%2025.1%202.3%2033.9s25.1%207.7%2033.9-2.3l5.4-6.1c49.9-57%2047-142.9-6.5-196.5c-56.2-56.2-147.3-56.2-203.5%200L59.7%20244.8z%22/%3E%3C/svg%3E");
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 100%;
	width: 1em
}

@media (max-width: 720px) {

	h2 .anchor,
	h3 .anchor,
	h4 .anchor,
	h5 .anchor,
	h6 .anchor {
		display: none
	}
}

h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
h6:hover .anchor {
	opacity: 1;
	padding-right: var(--space-XS)
}

p {
	margin-block: calc(var(--base-font-size) * var(--base-line-height))
}

ul,
ol {
	margin-block: calc(var(--base-font-size) * var(--base-line-height));
	padding-left: var(--space-XL)
}

ul ul,
ul ol,
ol ul,
ol ol {
	margin-block: 0
}

ul p:first-of-type,
ol p:first-of-type {
	margin-top: 0
}

ul p:last-of-type,
ol p:last-of-type {
	margin-bottom: 0
}

aside,
blockquote {
	backdrop-filter: blur(var(--space-S));
	background-color: var(--color-bg-light);
	border-radius: var(--border-radius);
	margin: calc(var(--base-font-size) * var(--base-line-height)) 0;
	padding: var(--space-L)
}

aside *,
blockquote * {
	backdrop-filter: none !important
}

aside p:first-child,
aside ol:first-child,
aside ul:first-child,
aside blockquote:first-child,
aside pre:first-child,
aside .attachment-gallery:first-child,
blockquote p:first-child,
blockquote ol:first-child,
blockquote ul:first-child,
blockquote blockquote:first-child,
blockquote pre:first-child,
blockquote .attachment-gallery:first-child {
	margin-top: 0
}

aside p:last-child,
aside ol:last-child,
aside ul:last-child,
aside blockquote:last-child,
aside pre:last-child,
aside .attachment-gallery:last-child,
blockquote p:last-child,
blockquote ol:last-child,
blockquote ul:last-child,
blockquote blockquote:last-child,
blockquote pre:last-child,
blockquote .attachment-gallery:last-child {
	margin-bottom: 0
}

aside.color-danger,
blockquote.color-danger {
	background-color: rgba(var(--danger-color-variable-txt), 0.1)
}

aside.color-danger a,
blockquote.color-danger a {
	color: inherit
}

dl dt {
	font-weight: 600;
	margin-top: 1em
}

dl dd {
	margin: 0;
	padding: 0
}

small {
	display: inline-block;
	font-size: var(--font-S);
	line-height: calc(var(--base-line-height) * 0.9)
}

sub {
	font-size: 75%;
	line-height: 0;
	vertical-align: sub
}

sup {
	font-size: 75%;
	line-height: 0;
	vertical-align: super
}

code {
	background-color: var(--color-bg-light);
	border-radius: var(--border-radius);
	font-family: var(--font-monospace);
	font-size: 0.875em;
	padding: var(--space-2XS)
}

small code {
	padding-block: var(--space-3XS)
}

.font-theme-monospace code {
	font-size: 1em
}

pre {
	backdrop-filter: blur(var(--space-S));
	background-color: var(--color-bg-light);
	border-radius: var(--border-radius);
	overflow: auto;
	padding: var(--space-L)
}

pre code {
	background-color: transparent;
	padding: 0
}

hr {
	background-color: var(--color-border);
	border: 0;
	height: 1px;
	margin: var(--space-XL) 0;
	width: 100%
}

img {
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: contain
}

audio {
	display: block;
	max-width: 100%;
	width: 100%
}

.ProseMirror-selectednode audio,
.has-focus audio {
	outline: 2px solid var(--color-primary)
}

i[class^="fa-"] {
	line-height: normal
}

iframe {
	background: transparent;
	border: 0;
	display: block;
	margin-block: calc(var(--base-font-size) * var(--base-line-height));
	max-width: 100% !important;
	width: 100%
}

iframe[src*="vimeo"],
iframe[src*="youtube"] {
	aspect-ratio: 16 / 9;
	background-color: black;
	height: 100%
}

iframe[src*="loom"] {
	aspect-ratio: 660 / 524;
	height: 100%
}

iframe.walkthrough-embed {
	aspect-ratio: 650 / 426;
	border-radius: var(--space-XS);
	margin: 0
}

.ProseMirror-selectednode iframe,
.has-focus iframe {
	outline: 2px solid var(--color-primary)
}

:focus {
	outline: 2px solid var(--color-primary)
}

@media (pointer: coarse) {
	* {
		outline: none !important
	}
}

.turbo-progress-bar {
	background-color: var(--color-primary) !important
}

.color-theme-default {
	--light-color-variable-bg: 255, 255, 255;
	--light-color-variable-txt: 30, 30, 30;
	--light-color-variable-primary: 37, 99, 235;
	--dark-color-variable-bg: 0, 0, 0;
	--dark-color-variable-txt: 215, 215, 215;
	--dark-color-variable-primary: 96, 165, 250
}

.color-theme-beach {
	--light-color-variable-bg: 255, 252, 245;
	--light-color-variable-txt: 40, 59, 67;
	--light-color-variable-primary: 4, 134, 162;
	--dark-color-variable-bg: 40, 59, 67;
	--dark-color-variable-txt: 255, 250, 240;
	--dark-color-variable-primary: 79, 201, 228
}

.color-theme-gameboy {
	--light-color-variable-bg: 228, 233, 226;
	--light-color-variable-txt: 31, 81, 56;
	--light-color-variable-primary: 31, 81, 56;
	--dark-color-variable-bg: 25, 28, 26;
	--dark-color-variable-txt: 199, 209, 205;
	--dark-color-variable-primary: 199, 209, 205
}

.color-theme-grayscale {
	--light-color-variable-bg: 243, 243, 243;
	--light-color-variable-txt: 60, 60, 60;
	--light-color-variable-primary: var(--light-color-variable-txt);
	--dark-color-variable-bg: 20, 20, 20;
	--dark-color-variable-txt: 215, 215, 215;
	--dark-color-variable-primary: var(--dark-color-variable-txt)
}

.color-theme-halloween {
	--light-color-variable-bg: 246, 238, 233;
	--light-color-variable-txt: 47, 47, 47;
	--light-color-variable-primary: 252, 92, 14;
	--dark-color-variable-bg: 10, 10, 10;
	--dark-color-variable-txt: 240, 240, 240;
	--dark-color-variable-primary: 252, 92, 14
}

.color-theme-notepad {
	--light-color-variable-bg: 253, 247, 237;
	--light-color-variable-txt: 58, 36, 18;
	--light-color-variable-primary: 210, 150, 0;
	--dark-color-variable-bg: 33, 19, 8;
	--dark-color-variable-txt: 241, 225, 205;
	--dark-color-variable-primary: 235, 170, 7
}

.color-theme-sonnet {
	--light-color-variable-bg: 255, 242, 240;
	--light-color-variable-txt: 62, 62, 62;
	--light-color-variable-primary: 224, 36, 0;
	--dark-color-variable-bg: 27, 6, 7;
	--dark-color-variable-txt: 215, 215, 215;
	--dark-color-variable-primary: 253, 98, 98
}

.font-theme-default {
	--font-custom-body: var(--font-default);
	--font-custom-headlines: var(--font-custom-body);
	--font-custom-headlines-weight: 700;
	--font-custom-meta: var(--font-custom-body)
}

.font-theme-barry {
	--font-custom-body: var(--font-source-serif);
	--font-custom-headlines: var(--font-default);
	--font-custom-headlines-weight: 800;
	--font-custom-meta: var(--font-custom-body)
}

.font-theme-franklin-gothic {
	--font-custom-body: var(--font-franklin);
	--font-custom-headlines: var(--font-custom-body);
	--font-custom-headlines-weight: 700;
	--font-custom-meta: var(--font-custom-body)
}

.font-theme-garamond {
	--font-custom-body: var(--font-garamond);
	--font-custom-headlines: var(--font-custom-body);
	--font-custom-headlines-weight: 800;
	--font-custom-meta: var(--font-custom-body);
	--base-font-size: 20px
}

.font-theme-ibm-plex {
	--font-custom-body: var(--font-ibm-plex-sans);
	--font-custom-headlines: var(--font-custom-body);
	--font-custom-headlines-weight: 700;
	--font-custom-meta: var(--font-custom-body)
}

.font-theme-monospace {
	--font-custom-body: var(--font-ibm-plex-mono);
	--font-custom-headlines: var(--font-custom-body);
	--font-custom-headlines-weight: 700;
	--font-custom-meta: var(--font-custom-body);
	--base-font-size: 16px
}

.font-theme-times-new-roman {
	--font-custom-body: var(--font-times-new-roman);
	--font-custom-headlines: var(--font-custom-body);
	--font-custom-headlines-weight: 800;
	--font-custom-meta: var(--font-custom-body);
	--base-font-size: 19px
}

.flexbox {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-XS)
}

.avatar {
	aspect-ratio: 1 / 1;
	border-radius: clamp(5px, 12%, 10px);
	display: inline-block;
	object-fit: cover;
	position: relative;
	vertical-align: middle
}

.avatar.transparent-avatar {
	border-radius: 0;
	object-fit: contain
}

#flash {
	pointer-events: none;
	position: sticky;
	text-align: center;
	top: calc(-1 * var(--space-XS));
	z-index: 1000
}

#flash:empty {
	display: none
}

#flash:has([class^="flash-"]) {
	margin-bottom: calc(-1 * var(--space-L))
}

#flash .flash-default {
	background-clip: padding-box;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	box-shadow: var(--lil-shadow);
	display: inline-flex;
	font-size: var(--font-S);
	gap: var(--space-XS);
	line-height: 1.3;
	margin: var(--space-S) var(--space-M) 0;
	max-width: var(--width-S);
	padding: var(--space-XS) var(--space-XS) var(--space-XS) var(--space-S);
	pointer-events: all;
	text-align: left
}

#flash .flash-default::before {
	flex-shrink: 0
}

#flash .flash-default.flash-alert::before {
	content: "⚠️"
}

#flash .flash-default.flash-awesome::before {
	content: "🙌"
}

#flash .flash-default.flash-success::before {
	content: "👍"
}

#flash .flash-default.flash-danger::before {
	content: "🤔"
}

#flash .flash-default.flash-welcome::before {
	content: "👋"
}

#flash .flash-dismiss {
	align-items: center;
	border: 1px solid var(--color-border);
	border-radius: 100px;
	color: var(--color-primary);
	display: flex;
	flex-shrink: 0;
	height: var(--space-L);
	justify-content: center;
	margin-block: calc(-1 * var(--space-2XS) + 1px) calc(-1 * var(--space-XS));
	margin-left: var(--space-3XS);
	outline-offset: -1px;
	width: var(--space-L)
}

.site-view #flash .flash-dismiss {
	display: none
}

#infinite-scroll {
	color: var(--color-txt-light);
	display: block;
	font-size: var(--font-S);
	margin-top: var(--space-L);
	text-align: center
}

#infinite-scroll i {
	animation: spin 0.5s infinite;
	color: var(--color-primary)
}

@media (prefers-reduced-motion) {
	#infinite-scroll i {
		animation: none
	}
}

@keyframes spin {
	from {
		rotate: 0deg
	}

	to {
		rotate: 360deg
	}
}

.pagy.nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2XS);
	justify-content: center;
	margin: var(--space-S) 0;
	text-transform: capitalize
}

.pagy.nav a {
	margin-inline: var(--space-2XS);
	padding-inline: var(--space-3XS)
}

.pagy.nav a[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.5;
	text-decoration: none
}

.pro-flag,
.sponsored-flag,
.blocked-flag,
.beta-flag,
.moderated-flag {
	align-items: baseline;
	background-color: var(--color-txt);
	border-radius: var(--border-radius);
	color: var(--color-bg);
	cursor: inherit;
	display: inline-flex;
	font-size: 11px;
	font-weight: 500;
	gap: var(--space-3XS);
	height: 18px;
	justify-content: center;
	letter-spacing: 0.33px;
	line-height: 16px;
	margin-left: var(--space-3XS);
	margin-top: -3px;
	padding: 1px var(--space-2XS) 0;
	text-transform: uppercase;
	user-select: none;
	vertical-align: middle
}

h1 .pro-flag,
h1 .sponsored-flag,
h1 .blocked-flag,
h1 .beta-flag,
h1 .moderated-flag {
	font-size: 16px;
	height: 24px;
	line-height: 22px;
	text-indent: 1px
}

.sponsored-flag,
.beta-flag {
	background-color: var(--color-primary);
	color: var(--color-txt-on-primary)
}

.blocked-flag,
.moderated-flag {
	background-color: var(--color-danger);
	color: var(--color-txt-on-danger)
}

.help-css-table {
	border-collapse: collapse;
	width: 100%
}

.help-css-table th,
.help-css-table td {
	padding: 0.2em 1em 0.5em 0;
	text-align: left
}

.help-css-table code {
	white-space: nowrap
}

@media (max-width: 768px) {
	.help-css-table thead {
		display: none
	}

	.help-css-table tr {
		display: block;
		margin-bottom: 1.25em
	}

	.help-css-table td {
		display: block;
		padding: 0.2em 0
	}

	.help-css-table td::before {
		color: #666;
		display: block;
		font-size: 0.8em;
		font-weight: bold
	}

	.help-css-table td:nth-child(1)::before {
		content: "Class Name"
	}

	.help-css-table td:nth-child(2)::before {
		content: "Element"
	}

	.help-css-table td:nth-child(3)::before {
		content: "Description"
	}
}

form {
	font-family: var(--font-family)
}

.site-view form {
	font-family: var(--font-custom-body)
}

fieldset,
legend {
	border: 0;
	margin: 0;
	padding: 0
}

.field {
	font-size: var(--default-font-size);
	margin-bottom: var(--space-L)
}

.field.submit {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-XS);
	margin-bottom: 0
}

.checkbox-radio-label {
	cursor: pointer;
	display: inline-flex;
	gap: var(--space-XS);
	line-height: 1.3;
	user-select: none
}

.checkbox-radio-label:has(input[disabled]) {
	color: var(--color-txt-light);
	cursor: not-allowed;
	opacity: 0.5
}

.checkbox-radio-label:has(input[disabled]) input {
	opacity: 1
}

.checkbox-radio-label:has(input[disabled]) .pro-flag {
	border-color: var(--color-txt-light)
}

.color-label {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: var(--space-XS);
	white-space: nowrap;
	width: min-content
}

.form-label {
	cursor: default;
	display: block;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: var(--space-2XS)
}

.form-label .helper-text {
	color: var(--color-txt-light);
	font-weight: 400
}

.checkbox-radio-label small,
.form-label small {
	color: var(--color-txt-light);
	font-weight: 400
}

.checkbox-radio-label small:not(.required),
.form-label small:not(.required) {
	display: block
}

.checkbox-radio-label small.required,
.form-label small.required {
	display: inline-block;
	font-size: var(--font-XS);
	margin-left: var(--space-3XS)
}

.inline-form {
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	padding: var(--space-L)
}

.inline-form.inline-form-primary {
	background-color: var(--color-primary-light);
	border-color: var(--color-primary)
}

.field-explanation {
	color: var(--color-txt-light);
	display: block;
	margin-top: var(--space-2XS)
}

.error-msg {
	color: var(--color-danger);
	font-size: var(--font-S);
	line-height: 1.4;
	padding-top: var(--space-3XS)
}

.field_with_errors {
	display: contents;
	width: 100%
}

.radio-toggle {
	border-radius: var(--border-radius);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2XS);
	white-space: nowrap
}

.radio-toggle input[type="radio"] {
	margin: 0
}

.radio-toggle input[type="radio"]:focus {
	outline: none
}

.radio-toggle label {
	align-items: center;
	backdrop-filter: blur(var(--space-S));
	background-clip: padding-box;
	background-color: var(--color-bg-input);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	cursor: pointer;
	display: flex;
	flex: 1;
	gap: var(--space-XS);
	height: var(--space-2XL);
	line-height: 1;
	padding: 0 var(--space-S);
	position: relative
}

.radio-toggle label:has(input:checked) {
	background-color: var(--color-primary-light);
	border-color: var(--color-primary);
	color: var(--color-txt);
	text-decoration: none
}

.radio-toggle label:has(input:focus) {
	outline: 2px solid var(--color-primary)
}

.radio-toggle label:first-child {
	border-bottom-left-radius: var(--border-radius);
	border-top-left-radius: var(--border-radius)
}

.radio-toggle label:last-child {
	border-bottom-right-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius)
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="file"],
textarea,
select {
	backdrop-filter: blur(var(--space-S));
	background-clip: padding-box;
	background-color: var(--color-bg-input);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	caret-color: var(--color-primary);
	color: var(--color-txt);
	display: block;
	font-family: inherit;
	height: var(--space-2XL);
	line-height: 1.1;
	outline-offset: -1px;
	padding: 0 var(--space-XS);
	width: 100%
}

input[type="text"][readonly],
input[type="text"][disabled],
input[type="email"][readonly],
input[type="email"][disabled],
input[type="url"][readonly],
input[type="url"][disabled],
input[type="password"][readonly],
input[type="password"][disabled],
input[type="search"][readonly],
input[type="search"][disabled],
input[type="date"][readonly],
input[type="date"][disabled],
input[type="datetime-local"][readonly],
input[type="datetime-local"][disabled],
input[type="file"][readonly],
input[type="file"][disabled],
textarea[readonly],
textarea[disabled],
select[readonly],
select[disabled] {
	background-color: var(--color-bg-light)
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="date"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="file"]::placeholder,
textarea::placeholder,
select::placeholder {
	color: var(--color-txt-light);
	opacity: 0.8
}

input.input-S[type="text"],
input.input-S[type="email"],
input.input-S[type="url"],
input.input-S[type="password"],
input.input-S[type="search"],
input.input-S[type="date"],
input.input-S[type="datetime-local"],
input.input-S[type="file"],
textarea.input-S,
select.input-S {
	font-size: var(--font-S);
	height: var(--space-XL)
}

.select-wrapper {
	position: relative
}

.select-wrapper select {
	appearance: none;
	cursor: pointer;
	padding-right: var(--space-XL)
}

.select-wrapper .fa-chevron-down {
	align-items: center;
	display: flex;
	font-size: var(--font-XS);
	height: 100%;
	justify-content: center;
	pointer-events: none;
	position: absolute;
	right: var(--space-XS);
	top: 0;
	user-select: none;
	z-index: 1
}

.select-wrapper:has([disabled]) .fa-chevron-down {
	color: var(--color-txt-light);
	opacity: 0.5
}

option {
	background-color: var(--color-bg)
}

input[type="date"],
input[type="datetime-local"] {
	appearance: none;
	display: flex
}

input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
	text-align: left
}

input[type="file"] {
	cursor: pointer;
	padding-left: 0
}

textarea {
	height: auto;
	line-height: var(--base-line-height);
	min-height: calc(var(--base-line-height) * 4em);
	padding-block: calc(var(--space-XS) - 1px);
	resize: vertical
}

textarea[data-controller="auto-expanding-textarea"] {
	overflow: hidden;
	resize: none
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--color-primary);
	aspect-ratio: 1 / 1;
	cursor: pointer;
	display: inline-block;
	flex-shrink: 0;
	height: var(--font-S);
	margin: 0.2em 0 0;
	padding: 0;
	vertical-align: top;
	width: var(--font-S)
}

input[type="radio"] {
	border-radius: 100px
}

input.checkbox-switch[type="checkbox"] {
	appearance: none;
	aspect-ratio: unset;
	background-color: var(--color-border);
	border: 1px solid var(--color-border);
	border-radius: 100px;
	height: var(--space-M);
	margin-top: 0.175em;
	position: relative;
	transition: background-color 0.1s, border-color 0.1s;
	width: var(--space-L)
}

input.checkbox-switch[type="checkbox"]::after {
	background-clip: padding-box;
	background-color: var(--color-bg);
	border: 1px solid var(--color-bg-light);
	border-radius: 100px;
	content: "";
	height: calc(var(--space-M) - 4px);
	left: 1px;
	position: absolute;
	top: 1px;
	transition: 0.1s;
	width: calc(var(--space-M) - 4px)
}

@media (prefers-color-scheme: dark) {
	input.checkbox-switch[type="checkbox"]::after {
		background-color: var(--color-txt)
	}
}

input.checkbox-switch[type="checkbox"]:checked {
	background-color: var(--color-primary)
}

input.checkbox-switch[type="checkbox"]:checked::after {
	background-color: var(--color-bg);
	left: 10px
}

input.checkbox-switch[type="checkbox"]:focus {
	outline-offset: 1px
}

input[type="color"] {
	backdrop-filter: blur(var(--space-S));
	background-clip: padding-box;
	background-color: var(--color-bg-input);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	cursor: pointer;
	height: var(--space-2XL);
	outline-offset: -1px;
	overflow: hidden;
	padding: 2px;
	width: var(--space-2XL)
}

input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0
}

input[type="color"]::-webkit-color-swatch {
	border: 0;
	border-radius: calc(var(--border-radius) - 2px)
}

input[type="submit"],
button {
	appearance: none;
	background-color: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	margin: 0;
	padding: 0
}

@media (pointer: fine) {

	input[type="submit"]:active,
	button:active {
		transform: translateY(1px)
	}

	input[type="submit"]:active:focus,
	button:active:focus {
		outline: none
	}
}

.button,
input.button[type="submit"] {
	align-items: center;
	background-color: var(--color-primary);
	background-image: none;
	border-radius: 100px;
	color: var(--color-txt-on-primary);
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	font-family: inherit;
	font-weight: 600;
	gap: var(--space-2XS);
	height: var(--space-2XL);
	justify-content: center;
	line-height: 1;
	outline-offset: -1px;
	padding: 0 var(--space-L);
	text-decoration: none !important;
	white-space: nowrap
}

@media (max-width: 479px) {

	.button,
	input.button[type="submit"] {
		display: flex;
		width: 100%
	}
}

@container (max-width: 479px) {

	.button,
	input.button[type="submit"] {
		width: 100%
	}
}

.button.button-full,
input.button.button-full[type="submit"] {
	width: 100% !important
}

.button.button-no-full,
input.button.button-no-full[type="submit"] {
	display: inline-flex;
	max-width: 100% !important;
	width: auto !important
}

.button:focus:not(.button-quiet),
input.button[type="submit"]:focus:not(.button-quiet) {
	outline-offset: 1px
}

.button.button-quiet,
input.button.button-quiet[type="submit"] {
	backdrop-filter: blur(var(--space-S));
	background-color: var(--color-bg-input);
	background-image: none;
	border: 1px solid var(--color-border);
	color: var(--color-txt);
	font-weight: 400
}

.button.button-danger,
input.button.button-danger[type="submit"] {
	background-color: var(--color-danger);
	background-image: none;
	color: var(--color-txt-on-danger)
}

.button.button-S,
input.button.button-S[type="submit"] {
	font-size: var(--font-S);
	height: var(--space-XL);
	padding-inline: var(--space-M)
}

.button.button-XS,
input.button.button-XS[type="submit"] {
	font-size: var(--font-XS);
	height: calc(var(--space-XL) - var(--space-2XS));
	padding-inline: var(--space-S)
}

.button>i,
input.button[type="submit"]>i {
	line-height: inherit !important
}

::file-selector-button,
::-webkit-file-upload-button {
	background-color: var(--color-bg-light);
	border: 0;
	border-radius: 0;
	border-right: 1px solid var(--color-border);
	color: var(--color-txt);
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	height: 100%;
	line-height: 1;
	margin-right: var(--space-S);
	padding: 0 var(--space-M);
	pointer-events: none;
	position: relative;
	z-index: 1
}

:disabled,
[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
	text-decoration: none !important
}

.modal {
	align-items: flex-start;
	backdrop-filter: blur(var(--space-2XS));
	background-color: var(--color-modal-backdrop);
	border: 0;
	color: inherit;
	display: none;
	height: 100%;
	left: 0;
	overflow: auto;
	padding: var(--space-XS);
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1
}

.modal-content {
	background-clip: padding-box;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--space-XS);
	box-shadow: var(--big-shadow);
	margin: 5% auto;
	max-width: var(--width-S);
	padding: var(--space-L);
	position: relative;
	width: 100%
}

.modal-close {
	background-color: var(--color-bg);
	border-radius: 1000px;
	color: var(--color-primary);
	font-size: var(--font-XL);
	outline-offset: 1px;
	position: absolute;
	right: calc(-1 * var(--space-XS));
	top: calc(-1 * var(--space-XS))
}

.modal-close>i {
	display: block
}

.popover {
	display: inline-flex;
	padding: 0;
	position: relative
}

.popover summary:not(.button) {
	cursor: pointer;
	display: inline-flex;
	margin: 0
}

.popover summary::-webkit-details-marker,
.popover summary::marker {
	display: none;
	font-size: 0;
	margin: 0;
	opacity: 0;
	padding: 0
}

.popover summary:active {
	transform: translateY(1px)
}

.popover-dialog {
	background-clip: padding-box;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	box-shadow: var(--big-shadow);
	color: var(--color-txt);
	display: flex;
	flex-direction: column;
	font-size: var(--font-M);
	justify-content: flex-start;
	max-height: 30rem;
	max-width: 20rem;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--space-S) var(--space-M);
	position: absolute;
	text-align: left;
	top: calc(100% + var(--space-2XS));
	z-index: 3
}

.popover-dialog.popover-dialog__left {
	left: 0
}

.popover-dialog.popover-dialog__right {
	right: 0
}

.popover-dialog__list {
	margin: calc(-1 * var(--space-2XS)) calc(-1 * var(--space-S))
}

.popover-dialog__list hr {
	margin-inline: calc(-1 * var(--space-2XS));
	width: auto
}

.popover-dialog__list .popover-link,
.popover-dialog__list button,
.popover-dialog__list a {
	align-items: center;
	border-radius: var(--border-radius);
	color: inherit;
	display: flex;
	font-weight: 400;
	gap: var(--space-XS);
	line-height: 1.3;
	overflow-x: hidden;
	padding-block: var(--space-XS);
	padding-inline: var(--space-S) var(--space-L);
	text-decoration: none;
	user-select: none;
	white-space: nowrap;
	width: 100%
}

@media (pointer: fine) {

	.popover-dialog__list .popover-link:not([disabled]):hover,
	.popover-dialog__list button:not([disabled]):hover,
	.popover-dialog__list a:not([disabled]):hover {
		background-color: var(--color-primary);
		color: var(--color-txt-on-primary)
	}
}

.popover-dialog__list .popover-link.red-link,
.popover-dialog__list button.red-link,
.popover-dialog__list a.red-link {
	color: var(--color-danger)
}

@media (pointer: fine) {

	.popover-dialog__list .popover-link.red-link:hover,
	.popover-dialog__list button.red-link:hover,
	.popover-dialog__list a.red-link:hover {
		background-color: var(--color-danger);
		color: var(--color-txt-on-danger)
	}
}

.popover-dialog__list .popover-link>i,
.popover-dialog__list button>i,
.popover-dialog__list a>i {
	flex-shrink: 0
}

.popover-dialog__list form.button_to button {
	width: 100%
}

.popover-editor summary {
	padding-inline: 0;
	width: var(--space-2XL)
}

.tagify {
	--tags-border-color: var(--color-border);
	--tags-border-radius: var(--border-radius);
	--tags-hover-border-color: var(--color-border);
	--tags-focus-border-color: var(--color-primary);
	--tag-bg: var(--color-bg-light);
	--tag-hover: var(--color-primary-light);
	--tag-text-color: var(--color-txt);
	--tag-text-color--edit: var(--color-txt);
	--tag-remove-bg: var(--color-border);
	--tag-remove-btn-color: var(--color-txt);
	--tag-remove-btn-bg--hover: var(--color-primary);
	backdrop-filter: blur(var(--space-S));
	background-clip: padding-box;
	background-color: var(--color-bg-input);
	border-radius: var(--border-radius);
	display: flex;
	font-family: inherit;
	outline-offset: -1px;
	width: 100%
}

.tagify.tagify--focus:has(.tagify__input:focus) {
	outline: 2px solid var(--color-primary)
}

.tagify__tag {
	background-color: var(--color-bg-light);
	border-radius: var(--border-radius);
	cursor: pointer;
	outline-offset: -1px;
	transition: none !important
}

@media (pointer: fine) {
	.tagify__tag:hover {
		background-color: var(--color-primary-light)
	}
}

.tagify__tag>div {
	color: inherit
}

.tagify__tag>div>* {
	transition: none !important
}

.tagify__tag>div::before {
	content: none
}

.tagify__tag:has(.tagify__tag__removeBtn:hover) {
	background-color: var(--color-primary-light)
}

.tagify__tag:has(.tagify__tag__removeBtn:hover)>div>span {
	opacity: 1
}

.tagify__dropdown {
	--tagify-dd-color-primary: var(--color-primary);
	--tagify-dd-text-color: var(--color-txt);
	--tagify-dd-bg-color: var(--color-bg);
	background-clip: border-box;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	box-shadow: var(--big-shadow);
	padding: var(--space-3XS);
	transform: translateY(0)
}

.tagify__dropdown__wrapper {
	border: 0
}

.tagify__dropdown__item {
	border-radius: var(--border-radius)
}

.tagify__dropdown__item.tagify__dropdown__item--active {
	color: var(--color-txt-on-primary)
}

main {
	flex: 1;
	width: 100%
}

main>*:first-child {
	margin-top: 0
}

main>*:last-child {
	margin-bottom: 0
}

.wrapper-S,
.wrapper-M,
.wrapper-L,
.wrapper-XL,
.wrapper-2XL {
	margin: var(--space-2XL) auto var(--space-4XL);
	padding-inline: var(--space-M);
	width: 100%
}

.wrapper-S {
	max-width: var(--width-S)
}

.wrapper-M {
	max-width: var(--width-M)
}

.wrapper-L {
	max-width: var(--width-L)
}

.wrapper-XL {
	max-width: var(--width-XL)
}

.header {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	font-family: var(--font-family);
	gap: var(--space-2XS);
	justify-content: space-between;
	line-height: 1.3;
	margin: var(--space-M) var(--space-M) 0
}

.title {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-XS)
}

.title .title-logo {
	align-items: center;
	color: inherit;
	font-weight: 700;
	gap: var(--space-2XS);
	text-decoration: none;
	text-transform: uppercase
}

.title .title-logo img {
	display: inline;
	margin: -2em var(--space-3XS) -1.8em 0;
	vertical-align: middle;
	width: 1.5em
}

.title .title-blog-link {
	text-decoration: none
}

.title .title-blog-link>img {
	margin: -2em var(--space-3XS) -1.8em 0;
	width: 1.5em
}

.title .title-blog-link>span {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px
}

.navigation ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0
}

.navigation ul li:not(:last-of-type) {
	margin-right: var(--space-S)
}

.footer {
	align-items: flex-start;
	color: var(--color-txt-light);
	display: flex;
	flex-direction: row;
	flex-shrink: 0;
	flex-wrap: wrap;
	font-size: var(--font-S);
	gap: var(--space-2XS);
	justify-content: space-between;
	padding: var(--space-M)
}

.footer ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0
}

.footer ul li {
	margin-right: var(--space-S)
}

.safe-area-div {
	padding-bottom: env(safe-area-inset-bottom)
}

:root {
	--color-syntax-bg: #161616;
	--color-syntax-txt-1: #d7d7d7;
	--color-syntax-txt-2: #616161;
	--color-syntax-hue-1: darkcyan;
	--color-syntax-hue-2: skyblue;
	--color-syntax-hue-3: mediumslateblue;
	--color-syntax-hue-4: mediumaquamarine;
	--color-syntax-hue-5: hotpink;
	--color-syntax-hue-6: orange;
	--color-syntax-hue-7: orangered
}

.trix-content pre.hljs-highlight {
	background-color: var(--color-syntax-bg);
	caret-color: var(--color-syntax-txt-1);
	color: var(--color-syntax-txt-1);
	scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0)
}

.trix-content pre.hljs-highlight .hljs-comment,
.trix-content pre.hljs-highlight .hljs-quote {
	color: var(--color-syntax-txt-2);
	font-style: italic
}

.trix-content pre.hljs-highlight .hljs-literal {
	color: var(--color-syntax-hue-1)
}

.trix-content pre.hljs-highlight .hljs-symbol,
.trix-content pre.hljs-highlight .hljs-bullet,
.trix-content pre.hljs-highlight .hljs-link,
.trix-content pre.hljs-highlight .hljs-meta,
.trix-content pre.hljs-highlight .hljs-selector-id,
.trix-content pre.hljs-highlight .hljs-title {
	color: var(--color-syntax-hue-2)
}

.trix-content pre.hljs-highlight .hljs-doctag,
.trix-content pre.hljs-highlight .hljs-keyword,
.trix-content pre.hljs-highlight .hljs-formula {
	color: var(--color-syntax-hue-3)
}

.trix-content pre.hljs-highlight .hljs-string,
.trix-content pre.hljs-highlight .hljs-regexp,
.trix-content pre.hljs-highlight .hljs-addition,
.trix-content pre.hljs-highlight .hljs-attribute,
.trix-content pre.hljs-highlight .hljs-meta,
.trix-content pre.hljs-highlight .hljs-string {
	color: var(--color-syntax-hue-4)
}

.trix-content pre.hljs-highlight .hljs-section,
.trix-content pre.hljs-highlight .hljs-name,
.trix-content pre.hljs-highlight .hljs-selector-tag,
.trix-content pre.hljs-highlight .hljs-deletion,
.trix-content pre.hljs-highlight .hljs-subst {
	color: var(--color-syntax-hue-5)
}

.trix-content pre.hljs-highlight .hljs-attr,
.trix-content pre.hljs-highlight .hljs-variable,
.trix-content pre.hljs-highlight .hljs-template-variable,
.trix-content pre.hljs-highlight .hljs-type,
.trix-content pre.hljs-highlight .hljs-selector-class,
.trix-content pre.hljs-highlight .hljs-selector-attr,
.trix-content pre.hljs-highlight .hljs-selector-pseudo,
.trix-content pre.hljs-highlight .hljs-number {
	color: var(--color-syntax-hue-6)
}

.trix-content pre.hljs-highlight .hljs-built_in,
.trix-content pre.hljs-highlight .hljs-title.class_,
.trix-content pre.hljs-highlight .hljs-class,
.trix-content pre.hljs-highlight .hljs-title {
	color: var(--color-syntax-hue-7)
}

.trix-content pre.hljs-highlight .hljs-emphasis {
	font-style: italic
}

.trix-content pre.hljs-highlight .hljs-strong {
	font-weight: bold
}

.trix-content pre.hljs-highlight .hljs-link {
	text-decoration: underline
}

.admin-header {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-L);
	justify-content: space-between
}

.admin-stats-table {
	display: flex;
	gap: var(--space-2XS);
	justify-content: space-between;
	line-height: 1.3;
	width: 100%
}

.admin-stats-table h2 {
	margin: 0
}

@media (min-width: 800px) {
	.admin-stats-table {
		gap: var(--space-XL);
		text-align: center;
		width: auto
	}
}

.admin-table {
	max-width: 100%;
	overflow: auto
}

.admin-table table {
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	text-align: left;
	width: 100%
}

@media (max-width: 799px) {
	.admin-table table {
		font-size: var(--font-S)
	}
}

.admin-table table th,
.admin-table table td {
	padding: var(--space-XS)
}

.admin-table table th.main-column,
.admin-table table td.main-column {
	width: 50%
}

.admin-table table th:not(:last-of-type),
.admin-table table td:not(:last-of-type) {
	padding-right: var(--space-M)
}

.admin-table table th {
	white-space: nowrap
}

.admin-table table th a,
.admin-table table th .button-like-link {
	color: inherit;
	text-decoration: none
}

@media (pointer: fine) {

	.admin-table table th a:hover,
	.admin-table table th .button-like-link:hover {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 2px
	}
}

.admin-table table th .fa-regular {
	color: var(--color-primary)
}

.admin-table table tr:nth-child(odd) td {
	background-color: var(--color-bg-light)
}

@media (pointer: fine) {
	.admin-table table tbody tr:hover {
		outline: 2px solid var(--color-primary)
	}

	.admin-table table tbody tr:hover td {
		background-color: var(--color-primary-light)
	}
}

@media (min-width: 800px) {
	.admin-user-meta {
		column-count: 2
	}
}

.dashboard-nav {
	align-items: flex-start;
	box-shadow: inset 0 -1px 0 var(--color-border);
	margin-bottom: var(--space-L);
	overflow-x: auto;
	overflow-y: hidden;
	position: relative
}

.dashboard-nav ul {
	display: flex;
	gap: var(--space-M);
	list-style: none;
	margin: 0;
	padding: 0
}

.dashboard-nav li {
	margin: 0
}

@media (pointer: fine) {
	.dashboard-nav li:has(a:hover) {
		border-color: var(--color-primary)
	}
}

.dashboard-nav h1,
.dashboard-nav h2 {
	border-bottom: 3px solid var(--color-txt);
	display: inline-block;
	margin: 0;
	padding-bottom: var(--space-XS);
	white-space: nowrap
}

.dashboard-nav .h1,
.dashboard-nav .h2 {
	border-bottom: 3px solid transparent;
	color: var(--color-txt-lighter);
	display: inline-block;
	font-weight: 400;
	margin: 0;
	outline-offset: -2px;
	padding-bottom: var(--space-XS);
	text-decoration: none;
	white-space: nowrap
}

@media (pointer: fine) {

	.dashboard-nav .h1:hover,
	.dashboard-nav .h2:hover {
		border-color: var(--color-primary);
		color: var(--color-primary)
	}
}

.dashboard-button {
	display: flex;
	flex: 1;
	position: relative
}

.dashboard-button-with-actions {
	display: flex
}

.dashboard-button-with-actions .popover summary.button {
	margin-left: var(--space-3XS);
	padding-inline: 0;
	width: var(--space-2XL)
}

.list-of-posts,
.list-of-draft-posts,
.list-of-scheduled-posts,
.list-of-pages,
.list-of-pages-in-nav,
.list-of-subscribers,
.list-of-tags,
.site-list-of-posts,
.feed-list-of-posts {
	display: grid;
	gap: var(--space-S);
	grid-template-columns: 1fr min-content;
	list-style: none;
	padding: 0
}

.list-of-posts li,
.list-of-draft-posts li,
.list-of-scheduled-posts li,
.list-of-pages li,
.list-of-pages-in-nav li,
.list-of-subscribers li,
.list-of-tags li,
.site-list-of-posts li,
.feed-list-of-posts li {
	align-items: baseline;
	display: grid;
	gap: var(--space-M);
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	line-height: calc(var(--base-line-height) * 0.9)
}

.list-of-posts time,
.list-of-draft-posts time,
.list-of-scheduled-posts time,
.list-of-pages time,
.list-of-pages-in-nav time,
.list-of-subscribers time,
.list-of-tags time,
.site-list-of-posts time,
.feed-list-of-posts time {
	color: var(--color-txt-light);
	margin-right: var(--space-S);
	white-space: nowrap
}

.list-of-posts .post-link a,
.list-of-posts .page-link a,
.list-of-draft-posts .post-link a,
.list-of-draft-posts .page-link a,
.list-of-scheduled-posts .post-link a,
.list-of-scheduled-posts .page-link a,
.list-of-pages .post-link a,
.list-of-pages .page-link a,
.list-of-pages-in-nav .post-link a,
.list-of-pages-in-nav .page-link a,
.list-of-subscribers .post-link a,
.list-of-subscribers .page-link a,
.list-of-tags .post-link a,
.list-of-tags .page-link a,
.site-list-of-posts .post-link a,
.site-list-of-posts .page-link a,
.feed-list-of-posts .post-link a,
.feed-list-of-posts .page-link a {
	word-break: break-word
}

.list-of-posts {
	grid-template-columns: min-content 1fr min-content
}

.list-of-draft-posts,
.list-of-scheduled-posts {
	grid-template-columns: min-content 1fr
}

.list-of-pages,
.list-of-subscribers {
	grid-template-columns: 1fr min-content min-content
}

.list-of-pages-in-nav {
	grid-template-columns: min-content 1fr min-content min-content
}

.list-of-pages-in-nav li {
	background-color: var(--color-bg)
}

.list-of-pages-in-nav .handle {
	color: var(--color-txt);
	cursor: move
}

.list-of-pages-in-nav:has([draggable="true"]) .handle {
	cursor: default
}

.list-of-pages-in-nav:not(.has-pages) {
	display: none
}

.list-of-pages-in-nav:not(.has-pages)+.list-headline {
	display: none
}

.list-of-tags {
	grid-template-columns: 1fr min-content min-content
}

.list-of-tags turbo-frame {
	align-items: baseline;
	display: grid;
	gap: var(--space-M);
	grid-column: 1 / -1
}

.list-of-tags turbo-frame:not(:has(.inline-form)) {
	grid-template-columns: subgrid
}

.site-list-of-posts {
	grid-template-columns: min-content 1fr
}

.feed-list-of-posts .avatar {
	margin-top: calc(-1 * var(--space-2XS))
}

.post-list-year-h2 {
	font-family: var(--font-family);
	font-size: var(--font-XL);
	font-weight: var(--font-custom-headlines-weight);
	grid-template-columns: 1fr !important;
	line-height: calc(var(--base-line-height) * 0.9);
	list-style: none
}

.post-list-year-h2:not(:first-of-type) {
	margin-top: var(--space-S)
}

.post-list-tags .tag {
	background-color: var(--color-bg-light);
	border-radius: var(--border-radius);
	color: inherit;
	display: inline-block;
	font-size: var(--font-XS);
	margin-block: -1px;
	padding: var(--space-3XS) var(--space-2XS);
	text-decoration: none;
	transform: translateY(-1px)
}

.list-headline {
	line-height: calc(var(--base-line-height) * 0.95);
	margin-block: var(--space-L);
	position: relative;
	text-align: center
}

.list-headline::after {
	border-bottom: 1px dashed var(--color-border);
	content: "";
	height: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 51%;
	z-index: -1
}

.list-headline>h3 {
	background-color: var(--color-bg);
	display: inline;
	font-size: var(--font-S);
	font-weight: 600;
	padding-inline: var(--space-XS)
}

.list-headline:has(+.list-of-pages-in-nav:not(.has-pages)) {
	display: none
}

.publish-celebrate {
	background-clip: padding-box;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--space-XS);
	box-shadow: var(--big-shadow);
	gap: var(--space-XS);
	justify-content: center;
	line-height: calc(var(--base-line-height) * 0.9);
	margin-block: calc(-1 * var(--space-M)) var(--space-L);
	padding: var(--space-L);
	position: relative;
	text-align: center
}

@media (prefers-color-scheme: dark) {
	.publish-celebrate {
		background-color: var(--color-bg-light)
	}
}

.publish-celebrate img {
	margin-inline: auto;
	width: 140px
}

.publish-celebrate .publish-celebrate-msg {
	font-size: var(--font-L);
	margin: var(--space-XS) auto;
	max-width: 20em
}

.publish-celebrate .dismiss-publish-celebrate {
	font-size: var(--font-L);
	position: absolute;
	right: var(--space-XS);
	top: var(--space-2XS)
}

.guestbook-entry-drawing {
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	overflow: hidden
}

.custom-css-textarea {
	font-family: monospace;
	font-size: var(--font-S);
	overflow: auto !important;
	overflow-scroll: contain !important
}

.theme-example {
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	cursor: pointer;
	display: grid;
	font-family: var(--font-custom-body);
	font-size: calc(var(--base-font-size) * 0.9);
	margin-bottom: var(--space-XS);
	overflow: hidden;
	position: relative;
	z-index: 1
}

@media (min-width: 600px) {
	.theme-example {
		grid-template-columns: 50% 50%
	}
}

.theme-example>input[type="radio"] {
	font-size: var(--font-L);
	left: var(--space-XS);
	margin: 0;
	outline: none;
	position: absolute;
	top: var(--space-XS)
}

.theme-example:has(input[type="radio"]:checked) {
	border-color: var(--color-primary)
}

.theme-example:has(input[type="radio"]:focus) {
	outline: 1px solid var(--color-primary)
}

.theme-example>div {
	background-color: var(--preview-color-bg);
	color: var(--preview-color-txt);
	padding: var(--space-L)
}

.theme-example>div.in-light-mode {
	--preview-color-bg: rgba(var(--light-color-variable-bg), 1);
	--preview-color-txt: rgba(var(--light-color-variable-txt), 1);
	--preview-color-primary: rgba(var(--light-color-variable-primary))
}

.theme-example>div.in-dark-mode {
	--preview-color-bg: rgba(var(--dark-color-variable-bg), 1);
	--preview-color-txt: rgba(var(--dark-color-variable-txt), 1);
	--preview-color-primary: rgba(var(--dark-color-variable-primary))
}

.theme-example>div>* {
	pointer-events: none;
	user-select: none
}

.theme-example>div>*:first-child {
	margin-top: 0
}

.theme-example>div>*:last-child {
	margin-bottom: 0
}

.theme-example h3 {
	color: var(--preview-color-txt);
	font-family: var(--font-custom-headlines);
	font-size: var(--font-L);
	font-weight: var(--font-custom-headlines-weight)
}

.theme-example a {
	color: var(--preview-color-primary)
}

.color-custom-picker .color-theme-custom-pickers {
	background-color: var(--color-bg-light);
	border-radius: 0 0 var(--space-XS) var(--space-XS);
	display: none;
	margin-bottom: var(--space-S)
}

.color-custom-picker .color-theme-custom-pickers>div {
	padding: var(--space-L)
}

.color-custom-picker .color-theme-custom-pickers>div+div {
	box-shadow: 0 -1px 0 0 var(--color-border) !important
}

@media (min-width: 600px) {
	.color-custom-picker .color-theme-custom-pickers {
		grid-template-columns: 50% 50%
	}

	.color-custom-picker .color-theme-custom-pickers>div+div {
		box-shadow: -1px 0 0 0 var(--color-border) !important
	}

	.color-custom-picker .color-theme-custom-pickers .background-image-section {
		box-shadow: 0 -1px 0 0 var(--color-border) !important;
		grid-column: 1 / -1
	}
}

.color-custom-picker .theme-example h3 {
	color: inherit
}

.color-custom-picker.wants-custom .theme-example {
	margin-bottom: calc(-1 * var(--space-XS))
}

.color-custom-picker.wants-custom .color-theme-custom-pickers {
	display: grid
}

.color-custom-picker.wants-custom .background-image-preview {
	max-height: 100px;
	max-width: 100px
}

.labs-feature {
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	margin-bottom: var(--space-M);
	padding: var(--space-M)
}

.guestbook-grid {
	font-size: var(--font-S);
	line-height: calc(var(--base-line-height) * 0.9);
	margin: var(--space-4XL) 0 var(--space-2XL);
	width: 100%
}

@media (min-width: 600px) {
	.guestbook-grid {
		column-gap: 4%;
		columns: 2
	}
}

@media (min-width: 1020px) {
	.guestbook-grid:has(.guestbook-entry:nth-of-type(3)) {
		column-gap: 2%;
		columns: 3;
		margin-left: -25%;
		width: 150%
	}
}

.guestbook-grid.guestbook-admin-grid .guestbook-entry {
	padding-bottom: var(--space-2XL)
}

.guestbook-grid .guestbook-entry {
	break-inside: avoid;
	padding-bottom: var(--space-L);
	position: relative;
	width: 100%
}

.guestbook-grid .guestbook-entry .guestbook-new-flag {
	align-items: center;
	background-color: var(--color-txt);
	border-radius: 100px;
	color: var(--color-bg);
	display: flex;
	font-size: var(--font-XS);
	height: var(--space-M);
	justify-content: center;
	left: 0;
	line-height: 0;
	list-style: none;
	padding-inline: var(--space-XS);
	position: absolute;
	top: 0;
	transform: translateX(1em) translateY(calc(-1 * var(--space-XS)));
	width: min-content;
	z-index: 1
}

@media (prefers-color-scheme: dark) {
	.guestbook-grid .guestbook-entry .guestbook-new-flag {
		background-color: var(--color-primary);
		color: var(--color-txt-on-primary)
	}
}

.guestbook-grid .guestbook-entry .guestbook-content {
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	overflow: hidden;
	padding: 0
}

.guestbook-grid .guestbook-entry .guestbook-content p {
	margin: 1em
}

.guestbook-grid .guestbook-entry .guestbook-content img {
	aspect-ratio: 1 / 1;
	margin: auto;
	max-width: var(--width-guestbook-canvas);
	width: 100%
}

.guestbook-grid .guestbook-entry .guestbook-meta {
	margin-top: var(--space-2XS);
	text-align: center
}

.guestbook-grid .guestbook-entry .guestbook-meta-admin {
	margin-left: 1em;
	margin-top: var(--space-2XS)
}

.guestbook-grid .guestbook-entry .guestbook-meta-admin>strong>a {
	color: inherit
}

.guestbook-grid .guestbook-entry .guestbook-meta-admin .warning>strong>a {
	color: var(--color-danger)
}

.guestbook-entry-form {
	margin-inline: auto;
	max-width: var(--width-guestbook-canvas)
}

.guestbook-entry-form h1 {
	text-align: center
}

.guestbook-entry-form .field:not(.submit) {
	font-size: var(--font-S)
}

.guestbook-entry-form .guestbook-toggle label {
	height: var(--space-XL);
	justify-content: center
}

.guestbook-entry-form .guestbook-toggle label input {
	display: none
}

@media (max-width: 440px) {
	.paper {
		background-color: transparent
	}
}

.paper .content {
	margin-inline: auto;
	max-width: var(--width-guestbook-canvas)
}

.paper .content #controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: var(--space-2XS);
	touch-action: manipulation
}

.paper .content #controls>div {
	display: flex;
	gap: var(--space-2XS)
}

.paper .content #controls button {
	align-items: center;
	appearance: none;
	backdrop-filter: blur(var(--space-S));
	background-color: var(--color-bg-input);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	color: var(--color-txt);
	cursor: pointer;
	display: flex;
	font: inherit;
	height: var(--space-L);
	justify-content: center;
	outline-offset: -1px;
	touch-action: manipulation;
	width: var(--space-L)
}

@media (pointer: fine) {
	.paper .content #controls button:active {
		transform: translateY(1px)
	}
}

.paper .content #controls button.selected {
	background-color: var(--color-primary-light);
	border-color: var(--color-primary)
}

.paper .content #controls i {
	display: block;
	font-size: inherit;
	margin: 0;
	touch-action: manipulation
}

.paper .content .artboard {
	position: relative
}

.paper .content canvas {
	aspect-ratio: 1 / 1;
	background-color: white;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	box-sizing: border-box;
	cursor: none;
	display: block;
	max-height: var(--width-guestbook-canvas);
	max-width: var(--width-guestbook-canvas);
	touch-action: none;
	width: 100%
}

#mouseCircle {
	background-color: #ddd;
	border: 1px solid #777;
	border-radius: 50%;
	display: none;
	height: 6px;
	margin: -2px 0 0 -2px;
	opacity: 50%;
	pointer-events: none !important;
	position: absolute;
	width: 6px;
	z-index: 100
}

.artboard:hover+#mouseCircle {
	display: block
}

.editor-form {
	display: flex;
	flex: 1;
	flex-direction: column
}

.editor-form .headline-field,
.editor-form .editor-field {
	font-size: var(--base-font-size)
}

.wrapper-editor {
	margin-top: var(--space-L);
	order: 2
}

@media (min-width: 700px) {
	.wrapper-editor {
		margin-top: calc(var(--space-4XL) + var(--space-4XL))
	}
}

.editor-form-submit {
	align-items: center;
	background-clip: padding-box;
	background-color: var(--color-bg);
	display: flex;
	flex-direction: column;
	gap: var(--space-XS);
	margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	order: 1;
	padding: var(--space-S);
	z-index: 4
}

.editor-form-submit>div {
	align-items: center;
	display: flex;
	gap: var(--space-XS);
	width: 100%
}

.editor-form-submit .editor-form-submit-newsletter .checkbox-radio-label {
	margin: calc(-1 * var(--space-2XS));
	padding: var(--space-2XS)
}

@media (max-width: 699px) {
	.editor-form-submit .button {
		flex: 1
	}
}

@media (min-width: 700px) {
	.editor-form-submit {
		align-items: center;
		flex-direction: row;
		height: var(--space-4XL);
		padding-block: 0
	}

	.editor-form-submit .editor-form-submit-left {
		margin-right: auto;
		order: 1;
		width: auto
	}

	.editor-form-submit .editor-form-submit-newsletter {
		min-width: 0;
		order: 2;
		width: auto
	}

	.editor-form-submit .editor-form-submit-right {
		order: 3;
		width: auto
	}
}

@media (min-width: 700px) {
	.editor-form-submit {
		background: transparent;
		left: 0;
		position: fixed;
		right: 0;
		top: 0
	}
}

.prompt-field {
	backdrop-filter: blur(var(--space-S));
	background-color: var(--color-bg-input);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	line-height: 1.4;
	margin-bottom: var(--space-M);
	padding: var(--space-M);
	padding-right: var(--space-2XL);
	position: relative
}

.prompt-field .prompt {
	animation: prompt-sparkle 2.5s ease-in-out forwards;
	display: inline-block
}

.prompt-field .prompt-buttons {
	position: absolute;
	right: var(--space-M);
	top: var(--space-M)
}

.prompt-field .prompt-button {
	color: var(--color-txt-light);
	font-size: var(--font-XS);
	padding: var(--space-2XS)
}

.prompt-field .prompt-button:focus {
	outline: none
}

@media (pointer: fine) {
	.prompt-field .prompt-button:hover {
		color: var(--color-txt)
	}
}

.prompt-field .prompt-output {
	display: block;
	padding-right: var(--space-2XL)
}

@keyframes prompt-sparkle {
	0% {
		background: linear-gradient(90deg, var(--color-txt) 0%, var(--color-txt) 25%, hotpink 55%, skyblue 70%, #98fb98 85%, plum 100%);
		background-clip: text;
		-webkit-background-clip: text;
		background-position: 100% center;
		background-size: 400% auto;
		-webkit-font-smoothing: antialiased;
		-webkit-text-fill-color: transparent
	}

	85% {
		background-position: 0% center;
		-webkit-text-fill-color: var(--color-txt)
	}

	100% {
		background-position: 0% center;
		-webkit-text-fill-color: var(--color-txt)
	}
}

textarea.headline-input {
	backdrop-filter: blur(0);
	background: transparent;
	border-radius: 0;
	border-width: 0;
	caret-color: var(--color-primary);
	font-family: var(--font-custom-headlines);
	font-size: var(--font-2XL);
	font-weight: var(--font-custom-headlines-weight);
	height: auto;
	letter-spacing: -0.33px;
	line-height: calc(var(--base-line-height) * 0.8);
	min-height: calc(var(--base-line-height) * 2rem);
	outline: none;
	overflow: hidden;
	padding-inline: 0;
	resize: none
}

body:has(.prosemirror-dropcursor-block) .rhino-editor,
body:has(.prosemirror-dropcursor-inline) .rhino-editor {
	background-color: var(--color-primary-light) !important;
	outline: var(--space-3XS) dashed var(--color-primary) !important
}

body:has(.prosemirror-dropcursor-block) .prosemirror-dropcursor-block,
body:has(.prosemirror-dropcursor-block) .prosemirror-dropcursor-inline,
body:has(.prosemirror-dropcursor-inline) .prosemirror-dropcursor-block,
body:has(.prosemirror-dropcursor-inline) .prosemirror-dropcursor-inline {
	background-color: var(--color-primary) !important
}

.rhino-editor {
	background-color: var(--color-bg-input);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	outline-offset: 1px
}

.rhino-editor:focus-within {
	outline: 2px solid var(--color-primary)
}

.rhino-editor .trix-content {
	font-size: var(--base-font-size);
	min-height: 10rem;
	padding: var(--space-XS)
}

.rhino-editor a {
	cursor: inherit
}

.rhino-editor .has-focus {
	caret-color: var(--color-primary)
}

.rhino-editor::part(main__toolbar) {
	background-color: var(--color-bg);
	border: 0;
	border-bottom: 1px solid var(--color-border);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	overflow: hidden;
	padding: 0;
	position: sticky;
	top: 0;
	z-index: 4
}

.rhino-editor::part(main__toolbar__base) {
	background-color: var(--color-bg-input);
	border: 0;
	gap: var(--space-3XS);
	overflow: auto;
	padding: var(--space-3XS);
	scrollbar-gutter: stable;
	scrollbar-width: thin
}

.rhino-editor::part(bubble-menu__toolbar__base) {
	background-clip: padding-box;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	box-shadow: var(--big-shadow);
	gap: var(--space-3XS);
	margin-top: var(--space-3XS);
	padding: var(--space-3XS)
}

.wrapper-editor .rhino-editor {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	outline: none
}

.wrapper-editor .rhino-editor .trix-content {
	padding-inline: 0
}

.wrapper-editor .rhino-editor::part(main__toolbar) {
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	border-top: 1px solid var(--color-border);
	margin-inline: calc(-1 * var(--space-M))
}

.wrapper-editor .rhino-editor::part(main__toolbar__base) {
	padding-inline: var(--space-M)
}

@media (min-width: 700px) {
	.wrapper-editor .rhino-editor .trix-content {
		padding-block: 0
	}

	.wrapper-editor .rhino-editor::part(main__toolbar) {
		background-color: transparent;
		border-width: 0;
		margin: 0;
		opacity: 0.3;
		pointer-events: none;
		position: fixed;
		top: calc(var(--space-4XL) + var(--space-2XS));
		width: calc(var(--width-M) - var(--space-M) - var(--space-M))
	}

	.wrapper-editor .rhino-editor:is(:focus-within)::part(main__toolbar) {
		opacity: 1;
		pointer-events: all
	}

	.wrapper-editor .rhino-editor::part(main__toolbar__base) {
		background-color: transparent;
		border: 0;
		padding: 1px 0
	}

	.wrapper-editor::before {
		background-color: var(--color-bg);
		content: "";
		height: calc(var(--space-4XL) + var(--space-2XL) - 1px);
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		width: 100%;
		z-index: 2
	}

	.wrapper-editor::after {
		background-color: var(--color-bg-input);
		border-bottom: 1px solid var(--color-border);
		border-top: 1px solid var(--color-border);
		content: "";
		height: var(--space-2XL);
		left: 0;
		position: fixed;
		right: 0;
		top: var(--space-4XL);
		width: 100%;
		z-index: 3
	}
}

.rhino-editor::part(toolbar__button),
.rhino-toolbar-button {
	--rhino-toolbar-icon-size: 24px;
	align-items: center;
	appearance: none;
	aspect-ratio: 1 / 1;
	background-color: transparent;
	border: 0;
	border-radius: var(--border-radius);
	color: var(--color-txt-light);
	display: flex;
	font-family: var(--font-family);
	font-size: inherit;
	justify-content: center;
	line-height: normal;
	outline-offset: -1px;
	padding: var(--space-2XS)
}

@media (pointer: fine) {

	.rhino-editor::part(toolbar__button):hover,
	.rhino-editor::part(toolbar__button):focus,
	.rhino-toolbar-button:hover,
	.rhino-toolbar-button:focus {
		box-shadow: none;
		outline: 1px solid var(--color-primary)
	}
}

.rhino-editor::part(toolbar__button):active,
.rhino-toolbar-button:active {
	outline: 1px solid var(--color-primary) !important;
	transform: translateY(1px)
}

.rhino-editor:is(:focus-within)::part(toolbar__button--disabled) {
	opacity: 0.3
}

@media (pointer: fine) {

	.rhino-editor:is(:focus-within)::part(toolbar__button--disabled):hover,
	.rhino-editor:is(:focus-within)::part(toolbar__button--disabled):focus {
		outline: none
	}
}

.rhino-toolbar-button-svg {
	height: var(--rhino-toolbar-icon-size);
	max-height: var(--rhino-toolbar-icon-size);
	max-width: var(--rhino-toolbar-icon-size);
	min-height: var(--rhino-toolbar-icon-size);
	min-width: var(--rhino-toolbar-icon-size);
	pointer-events: none;
	width: var(--rhino-toolbar-icon-size)
}

.rhino-editor::part(toolbar__button--active),
.rhino-toolbar-button.toolbar__button--active {
	background-color: var(--color-primary-light);
	color: var(--color-primary)
}

.rhino-editor::part(toolbar__button--link),
.rhino-editor::part(toolbar__button--increase-indentation),
.rhino-editor::part(toolbar__button--attach-files) {
	margin-inline-end: 0
}

.rhino-editor::part(toolbar__button--attach-files) {
	margin-inline-start: 0.25rem
}

.rhino-editor::part(toolbar__button--undo) {
	margin-inline-start: auto
}

.rhino-editor::part(toolbar__button--code) {
	display: none
}

.rhino-editor::part(toolbar__tooltip),
.toolbar__tooltip {
	font-family: var(--font-family);
	font-size: 15px;
	line-height: 1.1
}

.rhino-editor::part(toolbar__tooltip),
.toolbar__tooltip::part(anchored-region) {
	--background: var(--color-txt);
	--border-color: var(--color-txt);
	--__background: var(--color-txt);
	--__border-color: var(--color-txt);
	color: var(--color-bg)
}

.toolbar__tooltip::part(popover) {
	padding: 0.4em 0.6em
}

.rhino-editor::part(link-dialog) {
	background-clip: padding-box;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	box-shadow: var(--big-shadow);
	display: flex;
	font-size: 1rem;
	height: min-content;
	margin-top: var(--space-3XS);
	max-width: var(--width-S);
	padding: var(--space-XS)
}

@media (prefers-color-scheme: dark) {
	.rhino-editor::part(link-dialog) {
		background-clip: border-box
	}
}

.rhino-editor::part(link-dialog__container) {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	display: flex;
	gap: var(--space-2XS);
	max-width: var(--width-S);
	padding: 0;
	width: 100%
}

.rhino-editor::part(link-dialog__input) {
	background-color: var(--color-bg-input);
	border-color: var(--color-border);
	border-radius: var(--border-radius);
	color: var(--color-txt);
	font-size: var(--font-S);
	height: var(--space-XL);
	outline-offset: -1px;
	padding: 0 var(--space-XS);
	width: 100%
}

.rhino-editor::part(link-dialog__input):is(:focus) {
	border-color: inherit;
	outline: 2px solid var(--color-primary)
}

.rhino-editor::part(link-dialog__input--invalid) {
	border-color: var(--color-danger) !important
}

.rhino-editor::part(link-dialog__input--invalid):is(:focus) {
	border-color: inherit;
	outline: 2px solid var(--color-danger)
}

.rhino-editor::part(link-dialog__buttons) {
	display: flex;
	gap: var(--space-2XS);
	margin: 0
}

.rhino-editor::part(link-dialog__button) {
	align-items: center;
	background-color: var(--color-bg-input);
	border-color: var(--color-border);
	border-radius: 100px;
	color: var(--color-txt);
	display: inline-grid;
	font-size: var(--font-S);
	height: var(--space-XL);
	outline-offset: -1px;
	padding: 0 var(--space-S)
}

.rhino-editor::part(link-dialog__button):is(:hover) {
	box-shadow: none
}

.rhino-editor::part(link-dialog__button):is(:focus) {
	border-color: inherit;
	box-shadow: none;
	outline: 2px solid var(--color-primary)
}

.rhino-attachment-editor::part(delete-button) {
	align-items: center;
	background-color: var(--color-primary);
	border: 0;
	bottom: auto;
	box-shadow: var(--big-shadow);
	color: var(--color-txt-on-primary);
	display: flex;
	height: var(--space-L);
	justify-content: center;
	left: 50%;
	padding: 0;
	right: auto;
	top: 0;
	transform: translateX(-50%) translateY(-50%);
	width: var(--space-L)
}

.rhino-attachment-editor::part(alt-text-button) {
	align-items: center;
	background-color: var(--color-primary);
	border: 0;
	border-radius: 100px;
	box-shadow: var(--big-shadow);
	color: var(--color-txt-on-primary);
	display: flex;
	font-family: var(--font-family);
	font-size: var(--font-XS);
	font-weight: 500;
	justify-content: center;
	left: 50%;
	line-height: 1;
	padding: var(--space-2XS) var(--space-XS);
	right: auto;
	top: var(--space-M);
	transform: translateX(-50%)
}

.rhino-attachment-editor::part(dialog) {
	background-color: var(--color-bg);
	border: 0;
	border-radius: var(--space-XS);
	box-shadow: var(--big-shadow);
	color: var(--color-txt);
	padding: var(--space-L)
}

.rhino-attachment-editor::part(dialog):focus {
	outline: 2px solid var(--color-primary)
}

@media (max-width: 499px) {
	.rhino-attachment-editor::part(dialog) {
		max-width: 100vw;
		width: 100vw
	}
}

.rhino-attachment-editor::part(dialog-heading-wrapper) {
	align-items: flex-start;
	margin-bottom: var(--space-S)
}

.rhino-attachment-editor::part(dialog-heading) {
	font-size: var(--font-L);
	line-height: calc(var(--base-line-height) * 0.9)
}

.rhino-attachment-editor::part(dialog-close-button) {
	background-color: transparent;
	border: 0;
	color: inherit
}

.rhino-attachment-editor::part(dialog-close-button):focus {
	outline: 2px solid var(--color-primary)
}

.rhino-attachment-editor::part(alt-text-image) {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	max-width: 100%;
	width: auto
}

.rhino-attachment-editor::part(alt-text-editor-label) {
	flex-wrap: wrap;
	font-size: var(--font-M)
}

.rhino-attachment-editor::part(alt-text-editor) {
	background-color: var(--color-bg-input);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	color: inherit;
	font-family: inherit;
	font-size: var(--font-M)
}

.rhino-attachment-editor::part(alt-text-editor):focus {
	outline: 2px solid var(--color-primary);
	outline-offset: -1px
}

.rhino-attachment-editor::part(alt-text-save-button) {
	align-items: center;
	background-color: var(--color-primary);
	background-image: none;
	border: 0;
	border-radius: 100px;
	color: var(--color-txt-on-primary);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--font-family);
	font-size: var(--font-M);
	font-weight: 600;
	gap: var(--space-2XS);
	height: var(--space-2XL);
	justify-content: center;
	line-height: var(--base-line-height);
	margin-inline: auto;
	padding: 0 var(--space-L);
	width: auto
}

.rhino-attachment-editor::part(alt-text-save-button):focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px
}

.rhino-attachment-editor[aria-disabled="true"]::part(alt-text-save-button) {
	opacity: 0.5
}

.rhino-attachment-editor::part(file-metadata) {
	display: none
}

.rhino-attachment-editor::part(file-progress) {
	background-clip: padding-box;
	border-color: var(--color-border);
	--progress-value-color: var(--color-primary)
}

.code-block-container {
	margin: calc(var(--base-font-size) * var(--base-line-height)) 0;
	position: relative
}

.code-block-container .select-wrapper {
	position: absolute;
	right: var(--space-2XS);
	top: var(--space-2XS);
	z-index: 1
}

.language-selector {
	background-clip: padding-box;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	color: var(--color-txt);
	font-size: var(--font-S);
	height: auto;
	padding: 0 var(--space-L) 0 var(--space-XS);
	width: auto
}

.trix-content {
	color: var(--color-txt);
	font-family: var(--font-custom-body);
	outline: none;
	--rhino-fake-selection-color: rgb(220, 220, 220)
}

.trix-content h1,
.trix-content h2,
.trix-content h3,
.trix-content h4,
.trix-content h5,
.trix-content h6 {
	font-family: var(--font-custom-headlines);
	position: relative
}

.trix-content a {
	word-break: break-word
}

.trix-content>*:first-child {
	margin-top: 0
}

.trix-content>*:last-child {
	margin-bottom: 0
}

.trix-content .post-excerpt {
	align-items: center;
	display: flex;
	font-size: var(--font-S);
	gap: var(--space-XS)
}

.trix-content .post-excerpt::before,
.trix-content .post-excerpt::after {
	border-bottom: 1px dashed rgba(var(--light-color-variable-txt), 1);
	content: '';
	flex: 1
}

.trix-content .post-excerpt.has-focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px
}

.site-post .trix-content .post-excerpt {
	display: none
}

.trix-content .footnote-backref {
	text-decoration: none
}

.trix-content .rhino-selection {
	background: none
}

.trix-content .rhino-insertion-placeholder {
	display: none;
	user-select: none
}

[link-dialog-expanded]:where(.rhino-editor):focus-within .rhino-selection {
	background-color: Highlight;
	padding-block: 2px
}

[link-dialog-expanded]:where(.rhino-editor):focus-within .rhino-insertion-placeholder {
	border-left: 1px solid var(--color-primary);
	display: inline;
	margin-left: -1px
}

.is-editor-empty:first-child::before {
	color: var(--color-txt-light);
	content: attr(data-placeholder);
	opacity: 0.8;
	pointer-events: none;
	position: absolute;
	user-select: none
}

.is-editor-empty[style*="center"]:first-child::before {
	transform: translateX(-50%)
}

.is-editor-empty[style*="right"]:first-child::before {
	transform: translateX(-100%)
}

.ProseMirror-separator {
	border: none !important;
	display: inline !important;
	height: 0 !important;
	margin: 0 !important;
	width: 0 !important
}

action-text-attachment {
	margin: 0 auto;
	max-width: 100%
}

.attachment {
	flex: 1 0 100%;
	margin: calc(var(--base-font-size) * var(--base-line-height)) auto;
	max-width: 100%;
	padding: 0;
	position: relative;
	white-space: normal
}

.attachment img {
	margin: auto
}

.attachment.has-focus img {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px
}

.attachment.has-focus .attachment__caption.is-empty::before {
	left: 50%;
	opacity: 0.5;
	position: absolute;
	transform: translateX(-50%)
}

.attachment__caption {
	color: var(--color-txt-light);
	display: block;
	font-family: var(--font-custom-headlines);
	font-size: var(--font-S);
	line-height: calc(var(--base-line-height) * 0.9);
	padding-top: var(--space-XS);
	text-align: center
}

.attachment__caption:has(.attachment__name) {
	display: none
}

.attachment__caption.is-empty::before {
	content: attr(data-placeholder);
	pointer-events: none;
	user-select: none
}

.attachment__caption .attachment__name,
.attachment__caption .attachment__size {
	display: none
}

.attachment-gallery {
	margin: calc(var(--base-font-size) * var(--base-line-height)) auto;
	padding: 0
}

.attachment-gallery .attachment {
	margin-block: 0
}

.attachment-gallery.has-focus {
	outline: 1px solid var(--color-border);
	outline-offset: 1px
}

.attachment-gallery p,
.attachment-gallery ol,
.attachment-gallery ul,
.attachment-gallery blockquote {
	flex-basis: 100%;
	margin: 0
}

.attachment-gallery .ProseMirror-gapcursor {
	display: none
}

.rhino-editor .attachment-gallery:has(.attachment:nth-of-type(2)),
[class*="attachment-gallery--"] {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	justify-content: space-around
}

.rhino-editor .attachment-gallery:has(.attachment:nth-of-type(2))>:is(.attachment, action-text-attachment),
[class*="attachment-gallery--"]>:is(.attachment, action-text-attachment) {
	display: inline-block;
	flex: auto;
	max-width: calc(50% - (1.5em / 2));
	vertical-align: top
}

.site-header {
	align-items: center;
	display: flex;
	gap: var(--space-M);
	margin-top: var(--space-2XL)
}

.site-header .site-header-avatar-link {
	align-self: flex-start;
	border-radius: clamp(5px, 12%, 10px);
	flex-shrink: 0
}

.site-header h2 {
	line-height: calc(var(--base-line-height) * 0.8)
}

.site-header h2>a {
	color: inherit;
	text-decoration: none
}

.site-nav a {
	color: var(--color-primary);
	font-family: var(--font-custom-meta);
	margin-right: var(--space-XS)
}

.site-main {
	padding-bottom: var(--space-4XL)
}

.site-password-form .site-main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--space-L)
}

.site-stream-of-posts h1 a,
.site-stream-of-posts .site-meta a {
	color: inherit;
	text-decoration: none
}

.site-stream-of-posts h1 {
	font-size: var(--font-XL);
	line-height: calc(var(--base-line-height) * 0.9)
}

.site-stream-of-posts h2 {
	font-size: var(--font-L);
	line-height: calc(var(--base-line-height) * 0.95)
}

.site-stream-of-posts h3 {
	font-size: inherit;
	line-height: inherit
}

.site-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-XS);
	margin-bottom: var(--space-M)
}

.site-tags>a {
	backdrop-filter: blur(var(--space-S));
	background-color: var(--color-bg-light);
	border-radius: var(--border-radius);
	color: var(--color-txt);
	outline-offset: -1px;
	padding: var(--space-2XS) var(--space-XS);
	text-decoration: none
}

.site-meta {
	font-family: var(--font-custom-meta);
	font-size: var(--font-S);
	margin-top: var(--space-XL)
}

.meta-svg {
	align-items: center;
	display: inline-flex;
	text-align: left;
	text-rendering: auto;
	vertical-align: middle;
	width: var(--space-L)
}

.meta-svg>svg {
	margin-top: calc(-1 * var(--space-3XS))
}

.site-email-subscribe {
	backdrop-filter: blur(var(--space-S));
	background-color: var(--color-bg-light);
	border-radius: var(--border-radius);
	padding: var(--space-L);
	text-align: center
}

.site-email-subscribe input {
	backdrop-filter: unset;
	background-color: var(--color-bg);
	max-width: 270px
}

.trix-content .site-email-subscribe {
	margin-block: calc(var(--base-font-size) * var(--base-line-height))
}

.pika-branding {
	color: var(--color-txt);
	font-family: var(--font-custom-meta);
	font-weight: 700;
	padding: var(--space-M);
	text-align: center
}

.pika-branding>a {
	color: inherit;
	text-decoration: none
}

.homepage-button {
	font-size: var(--font-L);
	font-weight: 500;
	height: auto;
	line-height: 1.3;
	padding: var(--space-M) var(--space-XL)
}

.homepage-intro {
	margin-block: var(--space-4XL)
}

@media (max-width: 479px) {
	.homepage-intro .flexbox {
		justify-content: center;
		text-align: center
	}
}

@media (min-width: 480px) {
	.homepage-intro {
		margin-bottom: var(--space-6XL)
	}
}

.homepage-ad-callout {
	--angle: 0deg;
	animation: 10s rotate linear infinite;
	border: var(--space-XS) solid;
	border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
	margin-bottom: var(--space-L);
	padding: var(--space-L)
}

.homepage-ad-callout p {
	font-size: var(--font-M);
	line-height: calc(var(--base-line-height) * 0.9);
	margin: 0
}

@media (min-width: 900px) {
	.homepage-ad-callout p {
		font-size: var(--font-L)
	}
}

.illustration-with-quotes {
	border: 2px solid var(--color-txt);
	overflow: hidden
}

.illustration-with-quotes img {
	border-bottom: 2px solid var(--color-txt);
	border-top: 2px solid var(--color-txt)
}

.testimonial-marquee-container {
	overflow: hidden;
	padding: var(--space-XS) 0;
	position: relative;
	width: 100%
}

.testimonial-marquee-container .testimonial-marquee {
	animation: marquee 50s linear infinite;
	display: flex;
	gap: var(--space-S);
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content
}

.testimonial-marquee-container .testimonial-marquee--reverse {
	animation-direction: reverse
}

@media (pointer: fine) {
	.testimonial-marquee-container .testimonial-marquee:hover {
		animation-play-state: paused
	}
}

.testimonial-marquee-container .testimonial-marquee li {
	flex: 0 0 auto
}

.testimonial-marquee-container .testimonial-marquee li blockquote {
	background-color: inherit;
	display: inline;
	font-weight: 700;
	margin: 0;
	padding: 0 var(--space-S)
}

.testimonial-marquee-container .testimonial-marquee li blockquote cite {
	display: inline;
	font-style: italic;
	font-weight: 400;
	margin-top: var(--space-S)
}

@keyframes marquee {
	0% {
		transform: translateX(0)
	}

	100% {
		transform: translateX(-50%)
	}
}

@keyframes rotate {
	to {
		--angle: 360deg
	}
}

@property --angle {
	inherits: false;
	initial-value: 0deg;
	syntax: '<angle>'
}

.shimmer {
	animation-delay: 0.5s;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-name: shimmer;
	background: linear-gradient(90deg, red, yellow 20%, lime 40%, aqua 60%, blue 80%, magenta 90%, var(--color-primary));
	background-clip: text;
	color: rgba(255, 255, 255, 0.1);
	text-align: center
}

@keyframes shimmer {
	0% {
		background-position: top left
	}

	100% {
		background-position: top right;
		color: var(--color-primary)
	}
}

.homepage-story {
	margin-block: var(--space-4XL)
}

.homepage-story p {
	font-size: var(--font-L);
	line-height: calc(var(--base-line-height) * 0.9)
}

@media (min-width: 900px) {
	.homepage-story p {
		font-size: var(--font-XL)
	}
}

ol.homepage-features {
	display: flex;
	flex-direction: column;
	font-size: var(--font-L);
	gap: var(--space-XL);
	line-height: calc(var(--base-line-height) * 0.9);
	list-style: none;
	margin: 0;
	padding: 0
}

@media (min-width: 800px) {
	ol.homepage-features {
		flex-direction: row;
		gap: 0;
		justify-content: space-between
	}

	ol.homepage-features li {
		width: 31%
	}
}

ol.homepage-features figure {
	background-color: var(--color-bg-light);
	margin: 0;
	padding: 0
}

ol.homepage-features figure>a {
	display: block
}

@media (min-width: 480px) and (max-width: 799px) {
	ol.homepage-features figure {
		align-items: center;
		display: flex
	}

	ol.homepage-features figure>a {
		width: 40%
	}

	ol.homepage-features figure figcaption {
		width: 60%
	}
}

ol.homepage-features figcaption {
	padding: var(--space-L)
}

.homepage-pricing {
	background-color: #e6f2e7;
	margin-inline: calc(-1 * var(--space-M));
	padding: var(--space-2XL) var(--space-M)
}

@media (prefers-color-scheme: dark) {
	.homepage-pricing {
		background-color: #032f06
	}
}

@media (min-width: 480px) {
	.homepage-pricing {
		margin-inline: auto;
		padding-inline: var(--space-L)
	}
}

@media (min-width: 700px) {
	.homepage-pricing {
		padding: var(--space-3XL)
	}
}

@media (min-width: 480px) {
	.homepage-pricing-inner {
		font-size: var(--font-L);
		line-height: calc(var(--base-line-height) * 0.9)
	}
}

.homepage-pricing-inner h2 {
	font-size: var(--font-XL);
	line-height: calc(var(--base-line-height) * 0.8);
	margin-block: 0 var(--space-XL);
	text-align: center
}

.homepage-pricing-table {
	margin: var(--space-3XL) 0 0;
	overflow: auto
}

.homepage-pricing-table table {
	border-bottom: 1px solid var(--color-border);
	width: 100%
}

.homepage-pricing-table th,
.homepage-pricing-table td {
	line-height: calc(var(--base-line-height) * 0.8);
	text-align: center;
	vertical-align: middle
}

.homepage-pricing-table th:nth-of-type(2),
.homepage-pricing-table td:nth-of-type(2) {
	padding-inline: var(--space-XS)
}

.homepage-pricing-table th:first-of-type {
	font-weight: 400;
	text-align: left
}

.homepage-pricing-table thead th {
	font-size: var(--font-XL);
	vertical-align: middle;
	white-space: nowrap
}

.homepage-pricing-table thead tr.price-row td {
	padding-block: var(--space-3XS) var(--space-XS)
}

.homepage-pricing-table thead tr.button-row td {
	padding-bottom: var(--space-S)
}

.homepage-pricing-table tbody th,
.homepage-pricing-table tbody td {
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-S)
}

.homepage-pricing-table .fa-check {
	color: #1b7d1f
}

.homepage-factoid {
	font-family: Georgia, serif;
	font-style: italic;
	padding-block: var(--space-M);
	position: relative;
	text-align: center
}

@media (min-width: 480px) {
	.homepage-factoid {
		font-size: var(--font-L);
		line-height: calc(var(--base-line-height) * 0.9)
	}
}

.homepage-factoid::before {
	background: url(/assets/PIKA-factoid-46e30e22b9a512bd853706d621df8660b5afce9bcfbd01f9f5792dc95b6ba659.png) no-repeat center center;
	background-size: 160px;
	bottom: 0;
	content: "";
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	user-select: none;
	z-index: -1
}

@media (prefers-color-scheme: dark) {
	.homepage-factoid::before {
		filter: invert(100%)
	}
}

.homepage-outro {
	margin-bottom: var(--space-6XL)
}

.homepage-outro .flexbox {
	align-items: center;
	justify-content: space-between;
	margin-top: var(--space-2XL)
}

@media (min-width: 480px) {
	.homepage-outro p {
		font-size: var(--font-L);
		line-height: calc(var(--base-line-height) * 0.9)
	}
}

.svg-squiggly {
	fill: none;
	stroke: var(--color-txt);
	stroke-miterlimit: 10
}

.hr-squiggly {
	display: block;
	height: 9px;
	margin: var(--space-2XL) auto
}

.pulse-header {
	text-align: center
}

.pulse-header h1 {
	margin: 0
}

.pulse-header h1 a {
	color: inherit;
	display: block;
	padding-inline: var(--space-L);
	text-decoration: none
}

.pulse-header h1 svg {
	display: block;
	height: auto;
	margin: 0 auto;
	width: 100%
}

@media (min-width: 600px) {
	.pulse-header h1 svg {
		max-width: 80%
	}
}

.pulse-post {
	background-clip: content-box;
	background-color: var(--color-bg);
	color: var(--color-txt);
	font-family: var(--font-custom-body);
	font-size: var(--base-font-size)
}

.pulse-post .wrapper-M {
	margin-block: 0;
	padding-block: var(--space-4XL)
}

.pulse-post .pulse-post-blog-title img {
	margin: -2em var(--space-XS) -1.8em 0;
	width: 1.5em
}

.pulse-post h1,
.pulse-post h2,
.pulse-post h3,
.pulse-post h4,
.pulse-post h5,
.pulse-post h6 {
	font-family: var(--font-custom-headlines);
	font-weight: var(--font-custom-headlines-weight)
}

.pulse-post h1 .anchor,
.pulse-post h2 .anchor,
.pulse-post h3 .anchor,
.pulse-post h4 .anchor,
.pulse-post h5 .anchor,
.pulse-post h6 .anchor {
	display: none
}

.pulse-post h1 {
	font-size: var(--font-XL);
	margin-top: var(--space-L)
}

.pulse-post h1 a {
	color: inherit;
	text-decoration: none
}

.pulse-post .pulse-meta {
	font-family: var(--font-custom-meta);
	font-size: var(--font-S)
}

.pulse-post .pulse-meta a {
	color: inherit;
	text-decoration: none
}

.pulse-footer {
	text-align: center
}

.pulse-random-button a {
	--_a: pulse_rotate 5s linear infinite;
	animation: var(--_a), var(--_a) paused;
	animation-composition: add;
	cursor: help;
	display: block;
	height: 130px;
	margin: 0 auto;
	outline: none;
	width: 130px
}

.pulse-random-button a img {
	width: 100%
}

@media (pointer: fine) {
	.pulse-random-button a:hover {
		animation-play-state: running
	}
}

@keyframes pulse_rotate {
	to {
		rotate: 1turn
	}
}

.random-nourishment-button {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	margin-block: calc(var(--base-font-size) * var(--base-line-height));
	width: 100%
}

.random-nourishment {
	animation: cloudReveal 2s forwards;
	border-radius: var(--border-radius);
	font-weight: bold;
	opacity: 0;
	padding: var(--space-XS);
	position: relative
}

@media (prefers-color-scheme: dark) {
	.random-nourishment {
		color: var(--color-txt-on-primary)
	}
}

.random-nourishment::before {
	animation: borderDance 4s ease infinite;
	background: linear-gradient(45deg, hotpink, skyblue, #98fb98, plum);
	border-radius: 12px;
	bottom: -3px;
	content: '';
	left: -3px;
	position: absolute;
	right: -3px;
	top: -3px;
	z-index: -1
}

@keyframes cloudReveal {
	0% {
		filter: blur(10px);
		opacity: 0;
		transform: scale(0.8) translateY(10px)
	}

	50% {
		filter: blur(5px);
		opacity: 0.5
	}

	100% {
		filter: blur(0);
		opacity: 1;
		transform: scale(1) translateY(0)
	}
}

@keyframes borderDance {
	0% {
		border-image: linear-gradient(45deg, hotpink, skyblue, #98fb98, plum) 1
	}

	50% {
		border-image: linear-gradient(180deg, #98fb98, plum, hotpink, skyblue) 1
	}

	100% {
		border-image: linear-gradient(45deg, hotpink, skyblue, #98fb98, plum) 1
	}
}

img[data-action="zoom"] {
	cursor: zoom-in
}

img[data-action="zoom-out"] {
	cursor: zoom-out
}

.zoom-img,
.zoom-img-wrap {
	position: relative;
	transition: all 300ms;
	z-index: 666
}

.zoom-overlay {
	background: var(--color-bg);
	bottom: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	right: 0;
	top: 0;
	transition: opacity 300ms;
	z-index: 665
}

.zoom-overlay-open .zoom-overlay {
	opacity: 0.9
}

.zoom-overlay-open,
.zoom-overlay-transitioning {
	cursor: default
}

.inline {
	display: inline !important
}

.block {
	display: block !important
}

.text-center {
	text-align: center !important
}

.text-left {
	text-align: left !important
}

.text-right {
	text-align: right !important
}

.color-light {
	color: var(--color-txt-light) !important
}

.color-default {
	color: var(--color-txt) !important
}

.color-primary {
	color: var(--color-primary) !important
}

.color-danger {
	color: var(--color-danger) !important
}

.text-underline {
	text-decoration: underline !important
}

.font-XS {
	font-size: var(--font-XS) !important
}

.font-S {
	font-size: var(--font-S) !important
}

.font-M {
	font-size: var(--font-M) !important
}

.font-L {
	font-size: var(--font-L) !important
}

.font-400 {
	font-weight: 400 !important
}

.font-500 {
	font-weight: 500 !important
}

.font-600 {
	font-weight: 600 !important
}

.relative {
	position: relative !important
}

.justify-center {
	justify-content: center !important
}

.justify-flex-end {
	justify-content: flex-end !important
}

.justify-space-between {
	justify-content: space-between !important
}

.align-baseline {
	align-items: baseline !important
}

.align-start {
	align-items: flex-start !important
}

.flex-wrap {
	flex-wrap: wrap !important
}

.no-flex-wrap {
	flex-wrap: nowrap !important
}

.ml-auto {
	margin-left: auto !important
}

.mr-auto {
	margin-right: auto !important
}

.nowrap:not(.flexbox) {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important
}

.nowrap.flexbox {
	flex-wrap: nowrap !important;
	white-space: nowrap !important
}

.hidden,
[hidden] {
	display: none !important
}

@media (max-width: 599px) {
	.hidden-on-mobile {
		display: none !important
	}
}

@media (min-width: 600px) {
	.hidden-on-desktop {
		display: none !important
	}
}

.m-0 {
	margin: var(--space-0) !important
}

.mx-0 {
	margin-inline: var(--space-0) !important
}

.my-0 {
	margin-block: var(--space-0) !important
}

.mt-0 {
	margin-top: var(--space-0) !important
}

.mr-0 {
	margin-right: var(--space-0) !important
}

.mb-0 {
	margin-bottom: var(--space-0) !important
}

.ml-0 {
	margin-left: var(--space-0) !important
}

.m-3XS {
	margin: var(--space-3XS) !important
}

.mx-3XS {
	margin-inline: var(--space-3XS) !important
}

.my-3XS {
	margin-block: var(--space-3XS) !important
}

.mt-3XS {
	margin-top: var(--space-3XS) !important
}

.mr-3XS {
	margin-right: var(--space-3XS) !important
}

.mb-3XS {
	margin-bottom: var(--space-3XS) !important
}

.ml-3XS {
	margin-left: var(--space-3XS) !important
}

.m-2XS {
	margin: var(--space-2XS) !important
}

.mx-2XS {
	margin-inline: var(--space-2XS) !important
}

.my-2XS {
	margin-block: var(--space-2XS) !important
}

.mt-2XS {
	margin-top: var(--space-2XS) !important
}

.mr-2XS {
	margin-right: var(--space-2XS) !important
}

.mb-2XS {
	margin-bottom: var(--space-2XS) !important
}

.ml-2XS {
	margin-left: var(--space-2XS) !important
}

.m-23XS {
	margin: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.mx-23XS {
	margin-inline: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.my-23XS {
	margin-block: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.mt-23XS {
	margin-top: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.mr-23XS {
	margin-right: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.mb-23XS {
	margin-bottom: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.ml-23XS {
	margin-left: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.m-XS {
	margin: var(--space-XS) !important
}

.mx-XS {
	margin-inline: var(--space-XS) !important
}

.my-XS {
	margin-block: var(--space-XS) !important
}

.mt-XS {
	margin-top: var(--space-XS) !important
}

.mr-XS {
	margin-right: var(--space-XS) !important
}

.mb-XS {
	margin-bottom: var(--space-XS) !important
}

.ml-XS {
	margin-left: var(--space-XS) !important
}

.m-S {
	margin: var(--space-S) !important
}

.mx-S {
	margin-inline: var(--space-S) !important
}

.my-S {
	margin-block: var(--space-S) !important
}

.mt-S {
	margin-top: var(--space-S) !important
}

.mr-S {
	margin-right: var(--space-S) !important
}

.mb-S {
	margin-bottom: var(--space-S) !important
}

.ml-S {
	margin-left: var(--space-S) !important
}

.m-M {
	margin: var(--space-M) !important
}

.mx-M {
	margin-inline: var(--space-M) !important
}

.my-M {
	margin-block: var(--space-M) !important
}

.mt-M {
	margin-top: var(--space-M) !important
}

.mr-M {
	margin-right: var(--space-M) !important
}

.mb-M {
	margin-bottom: var(--space-M) !important
}

.ml-M {
	margin-left: var(--space-M) !important
}

.m-L {
	margin: var(--space-L) !important
}

.mx-L {
	margin-inline: var(--space-L) !important
}

.my-L {
	margin-block: var(--space-L) !important
}

.mt-L {
	margin-top: var(--space-L) !important
}

.mr-L {
	margin-right: var(--space-L) !important
}

.mb-L {
	margin-bottom: var(--space-L) !important
}

.ml-L {
	margin-left: var(--space-L) !important
}

.m-XL {
	margin: var(--space-XL) !important
}

.mx-XL {
	margin-inline: var(--space-XL) !important
}

.my-XL {
	margin-block: var(--space-XL) !important
}

.mt-XL {
	margin-top: var(--space-XL) !important
}

.mr-XL {
	margin-right: var(--space-XL) !important
}

.mb-XL {
	margin-bottom: var(--space-XL) !important
}

.ml-XL {
	margin-left: var(--space-XL) !important
}

.m-2XL {
	margin: var(--space-2XL) !important
}

.mx-2XL {
	margin-inline: var(--space-2XL) !important
}

.my-2XL {
	margin-block: var(--space-2XL) !important
}

.mt-2XL {
	margin-top: var(--space-2XL) !important
}

.mr-2XL {
	margin-right: var(--space-2XL) !important
}

.mb-2XL {
	margin-bottom: var(--space-2XL) !important
}

.ml-2XL {
	margin-left: var(--space-2XL) !important
}

.m-3XL {
	margin: var(--space-3XL) !important
}

.mx-3XL {
	margin-inline: var(--space-3XL) !important
}

.my-3XL {
	margin-block: var(--space-3XL) !important
}

.mt-3XL {
	margin-top: var(--space-3XL) !important
}

.mr-3XL {
	margin-right: var(--space-3XL) !important
}

.mb-3XL {
	margin-bottom: var(--space-3XL) !important
}

.ml-3XL {
	margin-left: var(--space-3XL) !important
}

.m-4XL {
	margin: var(--space-4XL) !important
}

.mx-4XL {
	margin-inline: var(--space-4XL) !important
}

.my-4XL {
	margin-block: var(--space-4XL) !important
}

.mt-4XL {
	margin-top: var(--space-4XL) !important
}

.mr-4XL {
	margin-right: var(--space-4XL) !important
}

.mb-4XL {
	margin-bottom: var(--space-4XL) !important
}

.ml-4XL {
	margin-left: var(--space-4XL) !important
}

.m-5XL {
	margin: var(--space-5XL) !important
}

.mx-5XL {
	margin-inline: var(--space-5XL) !important
}

.my-5XL {
	margin-block: var(--space-5XL) !important
}

.mt-5XL {
	margin-top: var(--space-5XL) !important
}

.mr-5XL {
	margin-right: var(--space-5XL) !important
}

.mb-5XL {
	margin-bottom: var(--space-5XL) !important
}

.ml-5XL {
	margin-left: var(--space-5XL) !important
}

.m-6XL {
	margin: var(--space-6XL) !important
}

.mx-6XL {
	margin-inline: var(--space-6XL) !important
}

.my-6XL {
	margin-block: var(--space-6XL) !important
}

.mt-6XL {
	margin-top: var(--space-6XL) !important
}

.mr-6XL {
	margin-right: var(--space-6XL) !important
}

.mb-6XL {
	margin-bottom: var(--space-6XL) !important
}

.ml-6XL {
	margin-left: var(--space-6XL) !important
}

.p-0 {
	padding: var(--space-0) !important
}

.px-0 {
	padding-inline: var(--space-0) !important
}

.py-0 {
	padding-block: var(--space-0) !important
}

.pt-0 {
	padding-top: var(--space-0) !important
}

.pr-0 {
	padding-right: var(--space-0) !important
}

.pb-0 {
	padding-bottom: var(--space-0) !important
}

.pl-0 {
	padding-left: var(--space-0) !important
}

.p-3XS {
	padding: var(--space-3XS) !important
}

.px-3XS {
	padding-inline: var(--space-3XS) !important
}

.py-3XS {
	padding-block: var(--space-3XS) !important
}

.pt-3XS {
	padding-top: var(--space-3XS) !important
}

.pr-3XS {
	padding-right: var(--space-3XS) !important
}

.pb-3XS {
	padding-bottom: var(--space-3XS) !important
}

.pl-3XS {
	padding-left: var(--space-3XS) !important
}

.p-2XS {
	padding: var(--space-2XS) !important
}

.px-2XS {
	padding-inline: var(--space-2XS) !important
}

.py-2XS {
	padding-block: var(--space-2XS) !important
}

.pt-2XS {
	padding-top: var(--space-2XS) !important
}

.pr-2XS {
	padding-right: var(--space-2XS) !important
}

.pb-2XS {
	padding-bottom: var(--space-2XS) !important
}

.pl-2XS {
	padding-left: var(--space-2XS) !important
}

.p-23XS {
	padding: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.px-23XS {
	padding-inline: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.py-23XS {
	padding-block: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.pt-23XS {
	padding-top: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.pr-23XS {
	padding-right: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.pb-23XS {
	padding-bottom: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.pl-23XS {
	padding-left: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.p-XS {
	padding: var(--space-XS) !important
}

.px-XS {
	padding-inline: var(--space-XS) !important
}

.py-XS {
	padding-block: var(--space-XS) !important
}

.pt-XS {
	padding-top: var(--space-XS) !important
}

.pr-XS {
	padding-right: var(--space-XS) !important
}

.pb-XS {
	padding-bottom: var(--space-XS) !important
}

.pl-XS {
	padding-left: var(--space-XS) !important
}

.p-S {
	padding: var(--space-S) !important
}

.px-S {
	padding-inline: var(--space-S) !important
}

.py-S {
	padding-block: var(--space-S) !important
}

.pt-S {
	padding-top: var(--space-S) !important
}

.pr-S {
	padding-right: var(--space-S) !important
}

.pb-S {
	padding-bottom: var(--space-S) !important
}

.pl-S {
	padding-left: var(--space-S) !important
}

.p-M {
	padding: var(--space-M) !important
}

.px-M {
	padding-inline: var(--space-M) !important
}

.py-M {
	padding-block: var(--space-M) !important
}

.pt-M {
	padding-top: var(--space-M) !important
}

.pr-M {
	padding-right: var(--space-M) !important
}

.pb-M {
	padding-bottom: var(--space-M) !important
}

.pl-M {
	padding-left: var(--space-M) !important
}

.p-L {
	padding: var(--space-L) !important
}

.px-L {
	padding-inline: var(--space-L) !important
}

.py-L {
	padding-block: var(--space-L) !important
}

.pt-L {
	padding-top: var(--space-L) !important
}

.pr-L {
	padding-right: var(--space-L) !important
}

.pb-L {
	padding-bottom: var(--space-L) !important
}

.pl-L {
	padding-left: var(--space-L) !important
}

.p-XL {
	padding: var(--space-XL) !important
}

.px-XL {
	padding-inline: var(--space-XL) !important
}

.py-XL {
	padding-block: var(--space-XL) !important
}

.pt-XL {
	padding-top: var(--space-XL) !important
}

.pr-XL {
	padding-right: var(--space-XL) !important
}

.pb-XL {
	padding-bottom: var(--space-XL) !important
}

.pl-XL {
	padding-left: var(--space-XL) !important
}

.p-2XL {
	padding: var(--space-2XL) !important
}

.px-2XL {
	padding-inline: var(--space-2XL) !important
}

.py-2XL {
	padding-block: var(--space-2XL) !important
}

.pt-2XL {
	padding-top: var(--space-2XL) !important
}

.pr-2XL {
	padding-right: var(--space-2XL) !important
}

.pb-2XL {
	padding-bottom: var(--space-2XL) !important
}

.pl-2XL {
	padding-left: var(--space-2XL) !important
}

.p-3XL {
	padding: var(--space-3XL) !important
}

.px-3XL {
	padding-inline: var(--space-3XL) !important
}

.py-3XL {
	padding-block: var(--space-3XL) !important
}

.pt-3XL {
	padding-top: var(--space-3XL) !important
}

.pr-3XL {
	padding-right: var(--space-3XL) !important
}

.pb-3XL {
	padding-bottom: var(--space-3XL) !important
}

.pl-3XL {
	padding-left: var(--space-3XL) !important
}

.p-4XL {
	padding: var(--space-4XL) !important
}

.px-4XL {
	padding-inline: var(--space-4XL) !important
}

.py-4XL {
	padding-block: var(--space-4XL) !important
}

.pt-4XL {
	padding-top: var(--space-4XL) !important
}

.pr-4XL {
	padding-right: var(--space-4XL) !important
}

.pb-4XL {
	padding-bottom: var(--space-4XL) !important
}

.pl-4XL {
	padding-left: var(--space-4XL) !important
}

.p-5XL {
	padding: var(--space-5XL) !important
}

.px-5XL {
	padding-inline: var(--space-5XL) !important
}

.py-5XL {
	padding-block: var(--space-5XL) !important
}

.pt-5XL {
	padding-top: var(--space-5XL) !important
}

.pr-5XL {
	padding-right: var(--space-5XL) !important
}

.pb-5XL {
	padding-bottom: var(--space-5XL) !important
}

.pl-5XL {
	padding-left: var(--space-5XL) !important
}

.p-6XL {
	padding: var(--space-6XL) !important
}

.px-6XL {
	padding-inline: var(--space-6XL) !important
}

.py-6XL {
	padding-block: var(--space-6XL) !important
}

.pt-6XL {
	padding-top: var(--space-6XL) !important
}

.pr-6XL {
	padding-right: var(--space-6XL) !important
}

.pb-6XL {
	padding-bottom: var(--space-6XL) !important
}

.pl-6XL {
	padding-left: var(--space-6XL) !important
}

.gap-0 {
	gap: var(--space-0) !important
}

.gap-3XS {
	gap: var(--space-3XS) !important
}

.gap-2XS {
	gap: var(--space-2XS) !important
}

.gap-23XS {
	gap: calc(var(--space-2XS) + var(--space-3XS) - 1px) !important
}

.gap-XS {
	gap: var(--space-XS) !important
}

.gap-S {
	gap: var(--space-S) !important
}

.gap-M {
	gap: var(--space-M) !important
}

.gap-L {
	gap: var(--space-L) !important
}

.gap-XL {
	gap: var(--space-XL) !important
}

.gap-2XL {
	gap: var(--space-2XL) !important
}

.gap-3XL {
	gap: var(--space-3XL) !important
}

.gap-4XL {
	gap: var(--space-4XL) !important
}

.gap-5XL {
	gap: var(--space-5XL) !important
}

.gap-6XL {
	gap: var(--space-6XL) !important
}