@layer remedy {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	* {
		/* outline: 1px solid var(--color-border); */
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		margin: 0;
		outline-offset: max(0.0625rem, 1px);
		padding: 0;
		text-decoration-thickness: from-font;
	}
	:root {
		color-scheme: light dark;
		font-family: system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif;
		font-kerning: normal;
		font-optical-sizing: auto;
		-webkit-font-smoothing: antialiased;
		font-synthesis: none;
		font-variant-ligatures: common-ligatures no-discretionary-ligatures
			no-historical-ligatures contextual;
		hanging-punctuation: first allow-end last;
		hyphenate-character: "‐"; /* Unambiguous hyphen U+2010 */
		hyphenate-limit-chars: auto 2 3;
		interpolate-size: allow-keywords;
		letter-spacing: 0;
		line-height: 1.125;
		margin: 0;
		orphans: 2;
		overflow-wrap: break-word;
		padding: 0;
		print-color-adjust: exact;
		tab-size: 2;
		text-align: start;
		text-decoration-skip-ink: auto;
		text-rendering: optimizeLegibility;
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		text-underline-position: from-font;
		text-wrap: balance;
		@media (prefers-reduced-motion: no-preference) {
			scroll-behavior: smooth;
		}
	}
	[hidden] {
		display: none;
	}
	body {
		inline-size: 100%;
		min-block-size: 100dvb;
	}
	address {
		font-style: normal;
	}
	ul:not([role="list"]) {
		list-style-type: disc;
	}
	:is(ol, ul):not([role="list"]) {
		padding-inline-start: 1em;
	}
	:is(ol, ul)[role="list"] {
		list-style-type: none;
	}
	b,
	strong {
		font-weight: bolder;
	}
	em,
	i,
	var {
		font-style: italic;
	}
	:is(em, i) > :is(em, i) {
		font-style: normal;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 1.05;
	}
	code,
	kbd,
	pre,
	samp {
		font-family: ui-monospace, monospace;
		hyphens: none;
		text-align: start;
		word-spacing: normal;
		word-wrap: normal;
	}
	pre:has(code) {
		max-inline-size: 100%;
		overflow-x: auto;
		overflow-inline: auto;
		inline-size: max-content;
	}
	abbr {
		font-variant-caps: all-small-caps;
		text-decoration: none;
	}
	hr {
		border-inline: 0;
		box-sizing: content-box;
		height: 0;
	}
	canvas,
	embed,
	figure,
	iframe,
	img,
	object,
	picture,
	svg,
	video {
		display: block;
		max-height: 100%;
		max-width: 100%;
		vertical-align: middle; /* If `display` value is overridden */
	}
	iframe {
		border: 0;
	}
	img {
		background-repeat: no-repeat; /* If providing low-res preview via `style` attribute */
		background-size: cover;
		height: auto;
		shape-margin: 1rem; /* If floated */
	}
	img[alt] {
		font-style: italic;
	}
	canvas,
	img,
	picture,
	svg,
	video {
		border-style: none;
		height: auto;
	}
	picture {
		display: contents;
	}
	source {
		display: none;
	}
	fieldset {
		border: 0;
		min-inline-size: 0;
	}
	input,
	textarea {
		hanging-punctuation: none;
	}
	input,
	button,
	textarea,
	select {
		touch-action: manipulation;
	}
	small {
		font-size: 85%;
	}
	math,
	td,
	time[datetime*=":"],
	var {
		font-variant-numeric: lining-nums slashed-zero tabular-nums;
	}
	sub {
		font-size: 100%;
		font-variant-position: sub;
		vertical-align: baseline;
	}
	sup {
		font-size: 100%;
		font-variant-position: super;
		vertical-align: baseline;
	}
}

@layer type {
	@font-face {
		font-display: swap;
		font-family: "Ottavio";
		font-style: normal;
		font-weight: 400;
		src: url(/fonts/ottavio.woff2);
	}
	@font-face {
		font-display: swap;
		font-family: "Triplicate";
		font-style: normal;
		font-weight: normal;
		src: url(/fonts/triplicate.woff);
	}
	@font-face {
		font-display: swap;
		font-family: "Triplicate";
		font-style: normal;
		font-weight: bold;
		src: url(/fonts/triplicate-bold.woff);
	}
	@font-face {
		font-display: swap;
		font-family: "Triplicate";
		font-style: italic;
		font-weight: normal;
		src: url(/fonts/triplicate-italic.woff);
	}
	@font-face {
		font-display: swap;
		font-family: "Forma DJR Mono";
		font-weight: 1 900;
		src: url(/fonts/forma-djr-mono.woff2);
	}
}

@layer base {
	* {
		font-feature-settings: "case" var(--ot-case, off);
	}

	:root {
		--font-body: Ottavio, system-ui, -apple-system, BlinkMacSystemFont, "Inter",
			"Segoe UI", "Helvetica Neue", sans-serif;
		--font-display: Ottavio, "Forma DJR", "IBM Plex Serif", "Source Serif Pro",
			ui-serif, serif;
		--font-mono: Triplicate, ui-monospace, SFMono-Regular, "SF Mono",
			"IBM Plex Mono", monospace;

		--hairline: max(0.0625rem, 1px);
		--rounded: calc(infinity * 1px);

		/* Colors */
		--color-bg: light-dark(oklch(98% 0.0108 234.81), oklch(20% 0.04 270));
		--color-fg: light-dark(oklch(20% 0.055 234.81), oklch(88% 0.015 270));
		--color-fg-2: light-dark(
			oklch(from var(--color-fg) 47.5% 0.015 h),
			oklch(from var(--color-fg) l c h / 55%)
		);

		--color-fg-2: oklch(from var(--color-fg) l c h / 55%);
		--color-accent: light-dark(oklch(68.5% 0.2 31), oklch(0.87 0.0877 60.68));
		--color-accent-warm: var(--color-accent);
		--color-accent-cool: oklch(0.93 0.1035 175.07);

		--color-bg-vibrant: oklch(from var(--color-bg) l c h / 94%);
		--color-border: light-dark(oklch(0% 0 0 / 6%), oklch(100% 0 0 / 15%));
		--color-selection: oklch(from var(--color-fg) l c h / 6%);

		/* Type scale */
		--ratio: 1.25;
		--s-6: calc(var(--s0) * pow(var(--ratio), -6));
		--s-5: calc(var(--s0) * pow(var(--ratio), -5));
		--s-4: calc(var(--s0) * pow(var(--ratio), -4));
		--s-3: calc(var(--s0) * pow(var(--ratio), -3));
		--s-2: calc(var(--s0) * pow(var(--ratio), -2));
		--s-1: calc(var(--s0) * pow(var(--ratio), -1));
		--s0: clamp(2rem, 1.7391rem + 2.5dvmin, 2.75rem);
		--s1: calc(var(--s0) * pow(var(--ratio), 1));
		--s2: calc(var(--s0) * pow(var(--ratio), 2));
		--s3: calc(var(--s0) * pow(var(--ratio), 3));
		--s4: calc(var(--s0) * pow(var(--ratio), 4));
		--s5: calc(var(--s0) * pow(var(--ratio), 5));
		--s6: calc(var(--s0) * pow(var(--ratio), 6));
		--s7: calc(var(--s0) * pow(var(--ratio), 7));
		--s8: calc(var(--s0) * pow(var(--ratio), 8));
		--s9: calc(var(--s0) * pow(var(--ratio), 9));
		--s10: calc(var(--s0) * pow(var(--ratio), 10));
		--s11: calc(var(--s0) * pow(var(--ratio), 11));

		/* Easing curves */
		--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
		--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
		--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
		--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
		--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
		--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
		--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
		--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
		--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
		--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
		--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
		--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
		--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
		--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
		--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
		--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
		--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);

		color-scheme: dark only;
		color: var(--color-fg);
		font-family: var(--font-body);
		font-size: 150%;
		overflow: hidden;
	}

	html {
		--noise-mask-color: oklch(from var(--color-bg) l c h / 97.5%);
		--noise-img: url("/assets/noise~light.png");
		background: linear-gradient(
				var(--noise-mask-color),
				var(--noise-mask-color)
			),
			var(--noise-img), linear-gradient(var(--color-bg), var(--color-bg));
		background-blend-mode: normal, light-dark(darken, lighten), normal;

		@media (prefers-color-scheme: dark) {
			--noise-img: url("/assets/noise~dark.png");
		}
	}

	::selection {
		background-color: transparent;
	}

	a {
		border-radius: 0.1875em;
		color: inherit;
		text-decoration-color: oklch(from var(--color-accent) l c h / 55%);
		transition: opacity 100ms ease;

		&:hover {
			opacity: 55%;
		}

		&:visited {
			text-decoration-color: oklch(from currentColor l c h / 55%);
		}
	}

	button {
		--ot-opsz: 8;
		background: none;
		border-radius: 0.5625em;
		border: max(0.0625em, 1px) solid var(--color-border);
		color: inherit;
		font-size: var(--s-3);
		font-weight: 450;
		padding-block: 0.31640625em;
		padding-inline: 0.75em;
		transition-duration: 100ms;
		transition-property: background-color, border-color, color, transform;
		transition-timing-function: ease ease ease var(--ease-out-cubic);

		&:hover {
			background-color: oklch(from currentColor l c h / 3%);
			color: oklch(from currentColor calc(l * 1.1) c h / 100%);
		}
		&:active {
			transform: scale(97%);
		}
	}

	code,
	kbd,
	pre,
	samp {
		font-family: var(--font-mono);
	}

	figure {
		display: grid;
		grid-template-areas: "--figure" "--caption";
		grid-template-rows: minmax(0, 1fr) minmax(0, auto);
		justify-content: center;
		place-items: center;
		row-gap: var(--s-2);
		figcaption {
			color: var(--color-fg-2);
			font-size: var(--s-1);
			grid-area: --caption;
		}
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--font-body);
	}

	h1 {
		font-size: var(--s3);
	}
	h2 {
		font-size: var(--s2);
	}
	h3 {
		font-size: var(--s1);
	}

	kbd {
		--ot-case: on;
		border-radius: 0.4em;
		border: 0.08em solid oklch(from currentcolor l c h / 12%);
		box-shadow: inset 0 -0.06em 0 0 oklch(from currentcolor l c h / 12%);
		padding-block: 0.15em;
		padding-inline: 0.3em;
		text-box-edge: cap alphabetic;
		text-box-trim: trim-both;
	}

	s {
		opacity: 55%;
		color: oklch(from currentColor l c h / calc(a * 55%));
	}

	small {
		font-size: 74%;
		opacity: 55%;
	}

	.indicator {
		aspect-ratio: 3 / 2;
		background-color: var(--color-accent);
		block-size: 12px;
		border: 1px solid oklch(100% 0 0 / 50%);
		border-radius: var(--rounded);
		inset-block-start: calc(env(safe-area-inset-left, 0) + var(--s1));
		inset-inline-start: calc(env(safe-area-inset-top, 0) + var(--s1));
		position: absolute;
		z-index: calc(infinity);
		opacity: 0;

		&[data-active="true"] {
			opacity: 30%;
		}
		&:not([data-active="true"]) {
			transition: opacity 500ms var(--ease-out-cubic);
		}
	}

	/*
   * A little rectangle in the bottom right corner used to regain focus from
   * iframes, and also as a resting place for mouse pointer.
   */
	.cursor-resting-area {
		background: transparent;
		block-size: 10vmin;
		cursor: none;
		inline-size: 10vmin;
		inset-block-end: 0;
		inset-inline-end: 0;
		position: absolute;
		z-index: calc(infinity);
	}

	.remote {
		&:not(:hover) {
			opacity: 0;
			transform: translateY(0.5em);
		}

		position: absolute;
		bottom: 0;
		right: 0;

		display: flex;
		font-size: var(--s-4);
		gap: 0.5625em;
		padding-bottom: max(env(safe-area-inset-bottom, 0), var(--s-2));
		padding-left: max(env(safe-area-inset-left, 0), var(--s2));
		padding-right: max(env(safe-area-inset-right, 0), var(--s2));
		padding-top: 1rem;
		transition-duration: 150ms;
		transition-property: opacity transform;
		transition-timing-function: linear var(--ease-out-quart);

		> button {
			aspect-ratio: 1;
			font-size: unset;
			padding: 0.421875em;

			&[disabled] {
				cursor: not-allowed;
				opacity: 55%;
			}

			> .lucide {
				height: 1em;
				width: 1em;
			}
		}
	}
}

@layer slides {
	main {
		&[aria-busy="true"] {
			opacity: 0;
		}
		transition: opacity 200ms ease;
	}

	:is(blockquote, code, h1, h2, h2, h3, h4, h5, h6, label, li, ol, p, q, ul) {
		max-inline-size: 17.5em;
		& + & {
			margin-block-start: var(--flow-space, 0.421875em);
		}
	}

	pre {
		font-size: var(--s-1);
		line-height: 1.45;
		flex: 1;
	}

	.slide {
		&:not([data-active="true"]) {
			opacity: 0;
			overflow: hidden;
			pointer-events: none;
		}

		&[data-active="true"] {
			pointer-events: auto;
			visibility: visible;
		}

		&:not(.full-bleed) {
			padding-bottom: calc(max(env(safe-area-inset-bottom), var(--s1)));
			padding-left: max(env(safe-area-inset-left), var(--s2));
			padding-right: max(env(safe-area-inset-right), var(--s2));
			padding-top: max(env(safe-area-inset-top), var(--s0));
		}

		position: absolute;
		inset: 0;

		block-size: 100dvb;
		display: flex;
		flex-direction: column;
		font-size: var(--s1);
		font-weight: 500;
		overflow: hidden;
		justify-content: center;
		align-items: start;

		ruby-position: under;
		text-align: start;
		text-wrap: balance;
	}

	li span:is(.dim) {
		font-size: 74%;
	}
}

@layer slide-templates {
	.slide:not(.custom-template) {
		/* Single figure */
		&:has(
				> :not(style):first-of-type:last-of-type:is(
						canvas,
						embed,
						figure,
						iframe,
						img,
						object,
						picture,
						video
					)
			) {
			figure {
				inline-size: 100%;
				block-size: calc(100% - var(--s0));
			}
			:is(canvas, embed, iframe, img, object, video) {
				object-fit: contain;
				object-position: center;
			}
		}

		/* Two figures */
		&:has(
				> :not(style):nth-of-type(2):last-of-type:is(
						canvas,
						embed,
						figure,
						iframe,
						img,
						object,
						picture,
						video
					)
			) {
			display: grid;
			gap: var(--s0);
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		/* Heading and figure */
		&:has(> :not(style):first-of-type:is(h1, h2, h3, h4, h5, h6)):has(
				> :not(style):last-of-type:is(
						canvas,
						embed,
						figure,
						iframe,
						img,
						object,
						picture,
						video
					)
			) {
			display: grid;
			gap: var(--s-6);
			grid-template-rows: minmax(0, auto) minmax(0, 1fr);
		}

		/* Major heading and bullets */
		&:has(> :not(style):first-of-type:is(h2, h3)):has(
				> :not(style):last-of-type:is(ol, ul)
			) {
			align-items: stretch;
			display: grid;
			gap: var(--s0);
			grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
			justify-items: stretch;
			text-align: start;

			> :is(h2, h3) {
				font-size: unset;
				line-height: unset;
			}

			> :is(ul, ol) {
				margin-block-start: 0;
			}
		}

		/* Minor heading and bullets */
		&:has(> :not(style):first-of-type:is(h4, h5, h6)):has(
				> :not(style):last-of-type:is(ol, ul)
			) {
			align-items: stretch;
			text-align: start;
		}
	}
}

@layer slide-transitions {
	.slide {
		transition-behavior: allow-discrete;
	}

	.transition-simple {
		transition-property: opacity, transform, visibility;
		transition-timing-function: linear, var(--ease-out-quart), linear;

		&:not([data-active="true"]) {
			transform: translateY(0.5em);
			transition-duration: 200ms linear;
			transition-property: opacity, visibility;
		}

		&[data-active="true"] {
			transform: translateY(0);
			transition-duration: 400ms;
		}
	}
}

@layer utility {
	.attribution {
		color: var(--color-fg-2);
		font-size: var(--s-3);
		inline-size: 100%;
		text-align: end;

		&::before {
			content: "";
			display: inline-block;
			border-block-end: 0.04em solid currentColor;
			inline-size: var(--s5);
			translate: 0 -0.5ex;
			opacity: 55%;
		}
	}

	.color-definition {
		align-self: center;
		display: flex;
		gap: 1.5ch;
		--ot-opsz: 10;

		:where(code, span)::before,
		:where(code, span)::after {
			color: var(--color-fg-2);
		}

		rt {
			--ot-opsz: 8;
			color: var(--color-fg-2);
			font-size: 0.421875em;
			font-weight: 500;
		}
	}

	.grayscalable {
		transition: filter 300ms ease;
	}

	.grayscale {
		filter: grayscale();
	}

	.dim {
		opacity: 50%;
	}

	.phantom {
		visibility: hidden;
	}

	.swatch {
		border-radius: var(--s-3);
		inline-size: 100%;
		block-size: var(--s4);

		& + p {
			align-self: end;
			font-size: var(--s-2);
			margin-block-start: var(--s-6);
		}
	}

	.visually-hidden:not(:focus, :active) {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

@layer syntax-highlight {
	.token.warm {
		color: var(--color-accent-warm);
	}
	.token.cool {
		color: var(--color-accent-cool);
	}
	.token.deemph {
		color: var(--color-fg-2);
	}
	.token.keyword {
		color: var(--color-fg-2);
		font-weight: bold;
	}
	.token.func {
		font-style: italic;
	}
}