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

body,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
	margin: 0;
}

ul[class],
ol[class] {
	padding: 0;
	list-style: none;
}

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

/*! Adapted from normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/* Duplicated monospace avoids browser font scaling. */
pre,
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

b,
strong {
	font-weight: bolder;
}

small {
	font-size: 80%;
}

sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	top: -0.5em;
}

button,
input,
select,
textarea {
	font: inherit;
	line-height: 1.15;
	margin: 0;
}

button,
input[type="submit"] {
	-webkit-appearance: button;
}

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

legend {
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		/* A nonzero duration creates transitions even on otherwise static elements. */
		transition-duration: 0s !important;
		scroll-behavior: auto !important;
	}
}

/* Design tokens */
:root {
	--purple-400: oklch(0.714 0.203 305.504);
	--purple-500: oklch(0.627 0.265 303.9);
	--purple-800: oklch(0.438 0.218 303.724);
	--gray-100: oklch(0.967 0.003 264.542);
	--gray-300: oklch(0.872 0.01 258.338);
	--gray-400: oklch(0.707 0.022 261.325);
	--gray-500: oklch(0.551 0.027 264.364);
	--gray-700: oklch(0.373 0.034 259.733);
	--gray-800: oklch(0.278 0.033 256.848);
	--gray-900: oklch(0.21 0.034 264.665);
	--gray-950: oklch(0.13 0.028 261.692);
	--stone-50: oklch(0.985 0.001 106.423);
	--stone-100: oklch(0.97 0.001 106.424);
	--stone-200: oklch(0.923 0.003 48.717);
	--stone-300: oklch(0.869 0.005 56.366);
	--stone-400: oklch(0.709 0.01 56.259);
	--stone-500: oklch(0.553 0.013 58.071);
	--stone-600: oklch(0.444 0.011 73.639);
	--stone-700: oklch(0.374 0.01 67.558);
	--stone-800: oklch(0.268 0.007 34.298);
	--stone-900: oklch(0.216 0.006 56.043);
	--stone-950: oklch(0.147 0.004 49.25);
	--black: #000;
	--white: #fff;

	/* Sizing */
	--space-half: 0.125rem;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 2.5rem;
	--space-8: 3rem;
	--space-9: 4rem;
	--radius-small: 0.25rem;
	--radius-medium: 0.5rem;
	--radius-large: 1rem;
	--radius-pill: 9999px;
	--radius-circle: 50%;
	--border-width-thin: 1px;
	--border-width-thick: 2px;
	--border-width-accent: 0.5rem;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-size-xsmall: 0.75rem;
	--font-size-small: 0.875rem;
	--font-size-medium: 1rem;
	--font-size-large: 1.5rem;
	--font-size-xlarge: 2rem;
	--font-size-xxlarge: 2.5rem;
	--font-size-display: 3rem;
	--font-size-display-large: 4rem;
	--font-size-display-xlarge: 6rem;
	--font-size-display-xxlarge: 8rem;
	--line-height-solid: 1;
	--line-height-tight: 1.2;
	--line-height-normal: 1.5;
	--letter-spacing-normal: normal;
	--letter-spacing-label: 0.04em;
	--type-body-size: calc(7rem / 6); /* 14pt at the default root size. */
	--type-body-line-height: var(--line-height-normal);
	--type-ui-size: var(--font-size-medium);
	--type-ui-line-height: var(--line-height-normal);
	--type-caption-size: 0.9rem;
	--type-callout-size: 1.3rem;
	--type-title-size: var(--font-size-display);
	--type-section-size: var(--font-size-xlarge);
	--type-subsection-size: var(--font-size-large);
	--type-code-size: 1em;
	--type-chart-label-size: 11px; /* SVG labels use CSS pixels. */
	--type-chart-axis-size: 12px;
	--type-chart-legend-size: 0.6875rem;
	--layout-page-gutter: var(--space-4);
	--layout-section-gap: var(--space-6);
	--layout-prose-padding: 0.8rem;
	--layout-prose-gap: calc(2 * var(--layout-prose-padding));
	--layout-reading-measure: 65ch;
	--layout-panel-max-width: 480px;
	--control-min-height-small: 2rem;
	--control-min-height: 2.5rem;
	--control-min-width: 3rem;
	--control-min-height-large: 2.75rem;
	--control-min-height-xlarge: 3rem;
	--control-padding-block: var(--space-2);
	--control-padding-inline: var(--space-3);
	--icon-size-small: 1rem;
	--icon-size-medium: 1.5rem;
	--icon-size-large: 2rem;
	--icon-size-xlarge: 3rem;
	--control-icon-size: 1em;
	--control-gap: 0.35rem;
	--control-target-min-size: 24px;
	--radius-control: 8px; /* Legacy control geometry stays in pixels. */
	--focus-ring-width: var(--border-width-thick);
	--focus-ring-width-strong: 3px;
	--focus-ring-offset: 2px;
	--focus-ring-offset-wide: 3px;
	--layer-sticky: 1;
	--layer-floating: 10;
	--layer-overlay: 100;
	--layer-skip-link: 1000;
	--opacity-disabled: 0.5;

	/* Brand anchors (theme-independent) */
	--reference-palette-orange: #e69f00;
	--reference-palette-blue: #56b4e9;
	--reference-palette-green: #009e73;
	--reference-palette-yellow: #f0e442;
	--reference-palette-dark-blue: #0072b2;
	--reference-palette-red: #d55e00;
	--reference-palette-pink: #cc79a7;
	--reference-palette-grey: #2e3440;

	--reference-text-muted-dark: color-mix(in oklch, var(--stone-400) 80%, var(--stone-500));
	--reference-syntax-comment-light: #69696b;
	--reference-syntax-red-dark: #ff6757;

	--font-family-code: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
		"DejaVu Sans Mono", monospace;

	--font-family-heading: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052,
		serif;

	--font-family-body: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
		source-sans-pro, sans-serif;

	--motion-duration-press: 120ms;
	--motion-duration-state: 160ms;
	--motion-duration-move: 220ms;
	--motion-duration-playful: 300ms;
	--motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--motion-ease-bounce: cubic-bezier(0.34, 2.2, 0.64, 1);

	--palette-orange: var(--reference-palette-orange);
	--palette-blue: var(--reference-palette-blue);
	--palette-green: var(--reference-palette-green);
	--palette-yellow: var(--reference-palette-yellow);
	--palette-dark-blue: var(--reference-palette-dark-blue);
	--palette-red: var(--reference-palette-red);
	--palette-pink: var(--reference-palette-pink);
	--palette-grey: var(--reference-palette-grey);

	--color-data-fill-orange: var(--palette-orange);
	--color-data-fill-blue: var(--palette-blue);
	--color-data-fill-green: var(--palette-green);
	--color-data-fill-yellow: var(--palette-yellow);
	--color-data-fill-dark-blue: var(--palette-dark-blue);
	--color-data-fill-red: var(--palette-red);
	--color-data-fill-pink: var(--palette-pink);
	--color-data-fill-grey: var(--palette-grey);

	/* Flag artwork preserves its authored colours; foregrounds are readable text shades. */
	--color-flag-pride-red: #e40303;
	--color-flag-pride-orange: #ff8c00;
	--color-flag-pride-yellow: #ffed00;
	--color-flag-pride-green: #008026;
	--color-flag-pride-blue: #004dff;
	--color-flag-pride-violet: #750787;
	--color-flag-trans-blue: #5bcefa;
	--color-flag-trans-pink: #f5a9b8;
	--color-flag-trans-white: var(--white);
	--color-flag-pride-red-foreground: oklch(0.52426029 0.21506315 29.1378);
	--color-flag-pride-orange-foreground: oklch(0.50795607 0.12122173 58.2827);
	--color-flag-pride-yellow-foreground: oklch(0.4981505 0.10517956 103.967);
	--color-flag-pride-green-foreground: oklch(0.48697462 0.14921064 145.901);
	--color-flag-pride-blue-foreground: oklch(0.51942867 0.26756826 263.209);
	--color-flag-pride-violet-foreground: oklch(0.410335 0.190939 320.839);
	--color-flag-trans-blue-foreground: oklch(0.49472222 0.09506384 226.513);
	--color-flag-trans-pink-foreground: oklch(0.50960948 0.091182 6.32342);

	--color-palette-orange-solid: oklch(0.5379 0.112071 76.7682);
	--color-palette-orange-solid-hover: oklch(0.5647 0.117660 76.7682);
	--color-palette-orange-on-solid: var(--white);
	--color-palette-blue-solid: oklch(0.5290 0.113537 236.1773);
	--color-palette-blue-solid-hover: oklch(0.5554 0.116786 236.1773);
	--color-palette-blue-on-solid: var(--white);
	--color-palette-green-solid: oklch(0.5203 0.108179 165.4589);
	--color-palette-green-solid-hover: oklch(0.5462 0.113575 165.4589);
	--color-palette-green-on-solid: var(--white);
	--color-palette-yellow-solid: oklch(0.5300 0.110000 105.0401);
	--color-palette-yellow-solid-hover: oklch(0.5550 0.115000 105.0401);
	--color-palette-yellow-on-solid: var(--white);
	--color-palette-dark-blue-solid: var(--palette-dark-blue);
	--color-palette-dark-blue-solid-hover: var(--color-palette-dark-blue-accent-hover);
	--color-palette-dark-blue-on-solid: var(--white);
	--color-palette-red-solid: oklch(0.5478 0.149560 47.5147);
	--color-palette-red-solid-hover: oklch(0.5751 0.157019 47.5147);
	--color-palette-red-on-solid: var(--white);
	--color-palette-pink-solid: oklch(0.5488 0.117145 346.3242);
	--color-palette-pink-solid-hover: oklch(0.5754 0.117145 346.3242);
	--color-palette-pink-on-solid: var(--white);
	--color-palette-grey-solid: var(--palette-grey);
	--color-palette-grey-solid-hover: var(--color-palette-grey-accent-hover);
	--color-palette-grey-on-solid: var(--white);

	/* Text/strokes minimise OKLab distance from the brand at fixed hue, within sRGB.
	   Targets include 0.1 contrast headroom: 4.6:1 text, 3.1:1 lines on their paired surfaces. */
	--color-palette-orange-surface: oklch(0.9650 0.029152 76.7682);
	--color-palette-orange-surface-strong: oklch(0.8800 0.089550 76.7682);
	--color-palette-orange-border: oklch(0.572875 0.119962 76.7682);
	--color-palette-orange-foreground: oklch(0.479140 0.100334 76.7682);
	--color-palette-blue-surface: oklch(0.9650 0.019170 236.1773);
	--color-palette-blue-surface-strong: oklch(0.8800 0.067835 236.1773);
	--color-palette-blue-border: oklch(0.568428 0.113615 236.1773);
	--color-palette-blue-foreground: oklch(0.475876 0.102650 236.1773);
	--color-palette-green-surface: oklch(0.9650 0.029850 165.4589);
	--color-palette-green-surface-strong: oklch(0.8800 0.089550 165.4589);
	--color-palette-green-border: oklch(0.565196 0.118112 165.4589);
	--color-palette-green-foreground: oklch(0.474105 0.099076 165.4589);
	--color-palette-yellow-surface: oklch(0.9650 0.029850 105.0401);
	--color-palette-yellow-surface-strong: oklch(0.8800 0.089550 105.0401);
	--color-palette-yellow-border: oklch(0.569673 0.120891 105.0401);
	--color-palette-yellow-foreground: oklch(0.477009 0.101226 105.0401);
	--color-palette-dark-blue-surface: oklch(0.9650 0.017834 244.0497);
	--color-palette-dark-blue-surface-strong: oklch(0.8800 0.063143 244.0497);
	--color-palette-dark-blue-border: var(--palette-dark-blue);
	--color-palette-dark-blue-foreground: oklch(0.477549 0.117884 244.0497);
	--color-palette-red-surface: oklch(0.9650 0.018843 47.5147);
	--color-palette-red-surface-strong: oklch(0.8800 0.069192 47.5147);
	--color-palette-red-border: oklch(0.581052 0.159434 47.5147);
	--color-palette-red-foreground: oklch(0.485666 0.133261 47.5147);
	--color-palette-pink-surface: oklch(0.9650 0.021095 346.3242);
	--color-palette-pink-surface-strong: oklch(0.8800 0.078333 346.3242);
	--color-palette-pink-border: oklch(0.578164 0.117734 346.3242);
	--color-palette-pink-foreground: oklch(0.485452 0.117734 346.3242);
	--color-palette-grey-surface: oklch(0.9650 0.016356 264.1820);
	--color-palette-grey-surface-strong: oklch(0.8800 0.022830 264.1820);
	--color-palette-grey-border: var(--palette-grey);
	--color-palette-grey-foreground: var(--palette-grey);

	--color-palette-orange-on-accent: var(--black);
	--color-palette-orange-accent-hover: oklch(0.7877 0.156823 76.7682);
	--color-palette-orange-line: oklch(0.643816 0.134817 76.7682);
	--color-palette-blue-on-accent: var(--black);
	--color-palette-blue-accent-hover: oklch(0.7695 0.116786 236.1773);
	--color-palette-blue-line: oklch(0.633627 0.114707 236.1773);
	--color-palette-green-on-accent: var(--black);
	--color-palette-green-accent-hover: oklch(0.6548 0.128869 165.4589);
	--color-palette-green-line: var(--palette-green);
	--color-palette-yellow-on-accent: var(--black);
	--color-palette-yellow-accent-hover: oklch(0.9366 0.171256 105.0401);
	--color-palette-yellow-line: oklch(0.635330 0.134824 105.0401);
	--color-palette-dark-blue-on-accent: var(--white);
	--color-palette-dark-blue-accent-hover: oklch(0.4969 0.122054 244.0497);
	--color-palette-dark-blue-line: var(--palette-dark-blue);
	--color-palette-red-on-accent: var(--black);
	--color-palette-red-accent-hover: oklch(0.6563 0.169620 47.5147);
	--color-palette-red-line: var(--palette-red);
	--color-palette-pink-on-accent: var(--black);
	--color-palette-pink-accent-hover: oklch(0.7144 0.117145 346.3242);
	--color-palette-pink-line: oklch(0.653893 0.117734 346.3242);
	--color-palette-grey-on-accent: var(--white);
	--color-palette-grey-accent-hover: oklch(0.2894 0.022830 264.1820);
	--color-palette-grey-line: var(--palette-grey);

	/* Prose sits on white; data text also needs contrast on tinted widget surfaces. */
	--color-text-prose-orange: oklch(0.5724 0.11985 76.7682);
	--color-text-data-orange: oklch(0.551750 0.115537 76.7682);
	--color-text-data-blue: oklch(0.537387 0.113357 236.1773);
	--color-text-data-green: oklch(0.528423 0.110427 165.4589);
	--color-text-data-yellow: oklch(0.539207 0.114425 105.0401);
	--color-text-data-dark-blue: var(--palette-dark-blue);
	--color-text-data-red: oklch(0.556547 0.152710 47.5147);
	--color-text-data-pink: oklch(0.557332 0.117734 346.3242);
	--color-text-data-grey: var(--palette-grey);
	--color-text-on-light-fill: var(--black);
	--color-text-on-dark-fill: var(--white);
	--color-syntax-comment: var(--reference-syntax-comment-light);
	--color-syntax-blue: oklch(0.504513 0.108827 236.1773);
	--color-syntax-green: oklch(0.496145 0.103682 165.4589);
	--color-syntax-literal: var(--color-syntax-blue);
	--color-syntax-keyword: #d32f2f;
	--color-syntax-keyword-selected: #c12222;
	--color-syntax-literal-selected: #0063b8;
	--color-syntax-declaration: var(--color-syntax-keyword);
	--color-syntax-operator: var(--color-syntax-keyword);
	--color-syntax-function: #6f42c1;
	--color-syntax-orange: oklch(0.513031 0.107431 76.7682);

	--color-link: var(--color-text-data-dark-blue);
	--color-link-visited: var(--purple-800);
	--color-anchor: var(--palette-orange);

	--color-surface-band: var(--stone-100);
	--color-border-decoration: var(--stone-300);

	--layout-content-max-width: 780px;

	--color-surface-page: var(--white);
	--color-browser-chrome: var(--color-surface-page);
	--color-overscroll-top: var(--color-surface-page);
	--color-surface-subtle: var(--stone-100);
	--color-text-primary: var(--stone-900);
	--color-text-bold: var(--color-text-primary);
	--color-text-secondary: var(--stone-700);
	--color-data-neutral: var(--stone-700);
	--color-surface-code: var(--color-surface-band);
	--color-surface-code-selected: var(--stone-200);
	--color-text-code: var(--stone-900);

	--color-border-chart: var(--stone-300);
	--color-surface-translucent: color-mix(in srgb, var(--color-surface-page) 90%, transparent);
	--color-surface-input: var(--color-surface-default);
	--color-text-input: var(--color-text-primary);
	--color-text-placeholder: var(--color-text-secondary);
	--color-border-control: var(--stone-500);
	--focus-ring-color: var(--color-link);
	--color-action-accent: var(--palette-orange);
	--color-track-neutral: var(--stone-300);
	--color-progress-track: var(--color-track-neutral);
	--color-progress-fill: var(--color-action-primary-background);
	--color-border-workspace: var(--stone-300);
	--color-surface-workspace: var(--stone-100);
	--color-surface-toolbar: var(--stone-200);
	--color-text-ui-secondary: var(--stone-600);
	--color-text-ui-muted: var(--stone-500);
	--color-action-emphasis-background: var(--color-palette-pink-solid);
	--color-action-emphasis-background-hover: var(--color-palette-pink-solid-hover);
	--color-action-emphasis-foreground: var(--color-palette-pink-on-solid);
	--color-status-success-background-solid: var(--color-palette-green-solid);
	--color-status-success-background-solid-hover: var(--color-palette-green-solid-hover);
	--color-status-success-on-solid: var(--color-palette-green-on-solid);
	--color-status-info-background-solid: var(--color-palette-blue-solid);
	--color-status-info-background-solid-hover: var(--color-palette-blue-solid-hover);
	--color-status-info-on-solid: var(--color-palette-blue-on-solid);
	--color-status-danger-background-solid: var(--color-palette-red-solid);
	--color-status-danger-background-solid-hover: var(--color-palette-red-solid-hover);
	--color-status-danger-on-solid: var(--color-palette-red-on-solid);
	--color-status-success-foreground: oklch(0.527274 0.110187 165.4589);
	--color-status-info-foreground: oklch(0.535015 0.113346 236.1773);
	--color-status-danger-foreground: oklch(0.551987 0.151459 47.5147);

	--color-action-neutral-background: var(--stone-600);
	--color-action-neutral-foreground: var(--white);
	--color-action-neutral-background-hover: var(--stone-500);
	--color-action-neutral-background-disabled: var(--stone-300);
	--color-action-ghost-foreground: var(--color-text-primary);
	--color-action-ghost-background-hover: color-mix(
		in srgb,
		var(--color-action-neutral-background) 14%,
		transparent
	);

	--color-surface-panel: var(--stone-100);
	--color-surface-default: var(--stone-50);
	--color-border-subtle: color-mix(
		in srgb,
		var(--color-text-primary) 16%,
		transparent
	);
	--color-border-separator: color-mix(
		in srgb,
		var(--color-text-primary) 12%,
		transparent
	);
	--color-text-disabled: var(--color-text-secondary);
	--color-control-disabled-indicator: var(--color-text-disabled);
	--color-text-inverse: var(--white);
	--color-surface-inverse: var(--stone-900);
	--color-surface-raised: var(--color-surface-page);
	--color-surface-selected: var(--color-action-neutral-background);
	--color-text-selected: var(--color-action-neutral-foreground);
	--color-border-default: var(--color-border-control);
	--color-border-strong: var(--stone-600);
	--color-border-focus: var(--focus-ring-color);
	--color-action-primary-background: var(--color-status-info-background-solid);
	--color-action-primary-background-hover: var(--color-status-info-background-solid-hover);
	--color-action-primary-background-pressed: var(--color-action-primary-background-hover);
	--color-action-primary-foreground: var(--color-status-info-on-solid);
	--color-action-neutral-background-pressed: var(--color-action-neutral-background);
	--color-action-neutral-background-selected: var(--color-action-neutral-background);
	--color-action-neutral-foreground-disabled: var(--color-action-neutral-foreground);
	--color-action-ghost-background: transparent;
	--color-action-ghost-background-pressed: var(--color-action-ghost-background);
	--color-overlay-scrim: rgb(0 0 0 / 50%);
	--color-selection-background: Highlight;
	--color-selection-foreground: HighlightText;
	--color-status-warning-foreground: oklch(0.541885 0.113473 76.7682);
	--color-status-warning-background-solid: var(--color-palette-orange-solid);
	--color-status-warning-background-solid-hover: var(--color-palette-orange-solid-hover);
	--color-status-warning-on-solid: var(--color-palette-orange-on-solid);
	--color-status-info-background: var(--color-palette-blue-surface);
	--color-status-success-background: var(--color-palette-green-surface);
	--color-status-warning-background: var(--color-palette-orange-surface);
	--color-status-danger-background: var(--color-palette-red-surface);
	--color-status-info-border: var(--color-palette-blue-border);
	--color-status-success-border: var(--color-palette-green-border);
	--color-status-warning-border: var(--color-palette-orange-border);
	--color-status-danger-border: var(--color-palette-red-border);
	--color-action-primary-background-selected: var(--color-action-primary-background);
	--color-action-primary-background-disabled: var(--color-action-neutral-background-disabled);
	--color-action-primary-foreground-disabled: var(--color-action-neutral-foreground-disabled);
	--color-action-ghost-background-selected: var(--color-action-neutral-background-selected);
	--color-action-ghost-foreground-selected: var(--color-action-neutral-foreground);
	--color-border-invalid: var(--color-status-danger-border);
	--color-surface-readonly: var(--color-surface-input);
	--shadow-raised: 0 2px 8px rgb(0 0 0 / 12%);
	--shadow-overlay: 0 8px 24px rgb(0 0 0 / 20%);

	--color-anchor-conversation: var(--color-text-data-orange);

}

/* Dark theme */
:root[data-theme="dark"] {
	--color-flag-pride-red-foreground: oklch(0.65845182 0.22826965 29.1378);
	--color-flag-pride-orange-foreground: oklch(0.750544 0.179114 58.2827);
	--color-flag-pride-yellow-foreground: oklch(0.93097 0.196565 103.967);
	--color-flag-pride-green-foreground: oklch(0.62000188 0.159916 145.901);
	--color-flag-pride-blue-foreground: oklch(0.64086295 0.19174412 263.209);
	--color-flag-pride-violet-foreground: oklch(0.65493905 0.190939 320.839);
	--color-flag-trans-blue-foreground: oklch(0.802505 0.120284 226.513);
	--color-flag-trans-pink-foreground: oklch(0.811787 0.091182 6.32342);

	--color-palette-orange-solid: var(--palette-orange);
	--color-palette-orange-solid-hover: var(--color-palette-orange-accent-hover);
	--color-palette-orange-on-solid: var(--black);
	--color-palette-blue-solid: var(--palette-blue);
	--color-palette-blue-solid-hover: var(--color-palette-blue-accent-hover);
	--color-palette-blue-on-solid: var(--black);
	--color-palette-green-solid: var(--palette-green);
	--color-palette-green-solid-hover: var(--color-palette-green-accent-hover);
	--color-palette-green-on-solid: var(--black);
	--color-palette-yellow-solid: var(--palette-yellow);
	--color-palette-yellow-solid-hover: var(--color-palette-yellow-accent-hover);
	--color-palette-yellow-on-solid: var(--black);
	--color-palette-dark-blue-solid: oklch(0.7000 0.110000 244.0497);
	--color-palette-dark-blue-solid-hover: oklch(0.7300 0.110000 244.0497);
	--color-palette-dark-blue-on-solid: var(--black);
	--color-palette-red-solid: var(--palette-red);
	--color-palette-red-solid-hover: var(--color-palette-red-accent-hover);
	--color-palette-red-on-solid: var(--black);
	--color-palette-pink-solid: var(--palette-pink);
	--color-palette-pink-solid-hover: var(--color-palette-pink-accent-hover);
	--color-palette-pink-on-solid: var(--black);
	--color-palette-grey-solid: oklch(0.7000 0.022830 264.1820);
	--color-palette-grey-solid-hover: oklch(0.7300 0.022830 264.1820);
	--color-palette-grey-on-solid: var(--black);

	--color-palette-orange-surface: oklch(0.2400 0.029850 76.7682);
	--color-palette-orange-surface-strong: oklch(0.3400 0.070841 76.7682);
	--color-palette-orange-border: var(--palette-orange);
	--color-palette-orange-foreground: var(--palette-orange);
	--color-palette-blue-surface: oklch(0.2400 0.029850 236.1773);
	--color-palette-blue-surface-strong: oklch(0.3400 0.072974 236.1773);
	--color-palette-blue-border: var(--palette-blue);
	--color-palette-blue-foreground: var(--palette-blue);
	--color-palette-green-surface: oklch(0.2400 0.029850 165.4589);
	--color-palette-green-surface-strong: oklch(0.3400 0.070696 165.4589);
	--color-palette-green-border: var(--palette-green);
	--color-palette-green-foreground: oklch(0.704744 0.129516 165.4589);
	--color-palette-yellow-surface: oklch(0.2400 0.029850 105.0401);
	--color-palette-yellow-surface-strong: oklch(0.3400 0.071791 105.0401);
	--color-palette-yellow-border: var(--palette-yellow);
	--color-palette-yellow-foreground: var(--palette-yellow);
	--color-palette-dark-blue-surface: oklch(0.2400 0.029850 244.0497);
	--color-palette-dark-blue-surface-strong: oklch(0.3400 0.083510 244.0497);
	--color-palette-dark-blue-border: oklch(0.608427 0.131066 244.0497);
	--color-palette-dark-blue-foreground: oklch(0.710119 0.131308 244.0497);
	--color-palette-red-surface: oklch(0.2400 0.029850 47.5147);
	--color-palette-red-surface-strong: oklch(0.3400 0.089550 47.5147);
	--color-palette-red-border: var(--palette-red);
	--color-palette-red-foreground: oklch(0.718640 0.160140 47.5147);
	--color-palette-pink-surface: oklch(0.2400 0.029850 346.3242);
	--color-palette-pink-surface-strong: oklch(0.3400 0.089550 346.3242);
	--color-palette-pink-border: var(--palette-pink);
	--color-palette-pink-foreground: oklch(0.713133 0.113293 346.3242);
	--color-palette-grey-surface: oklch(0.2400 0.022830 264.1820);
	--color-palette-grey-surface-strong: oklch(0.3400 0.022830 264.1820);
	--color-palette-grey-border: oklch(0.609772 0.020685 264.1820);
	--color-palette-grey-foreground: oklch(0.711770 0.020376 264.1820);
	--color-palette-orange-line: var(--palette-orange);
	--color-palette-blue-line: var(--palette-blue);
	--color-palette-yellow-line: var(--palette-yellow);
	--color-palette-dark-blue-line: oklch(0.545595 0.131181 244.0497);
	--color-palette-pink-line: var(--palette-pink);
	--color-palette-grey-line: oklch(0.548106 0.020939 264.1820);

	--color-text-prose-orange: var(--color-text-data-orange);
	--color-text-data-orange: var(--palette-orange);
	--color-text-data-blue: var(--palette-blue);
	--color-text-data-green: oklch(0.629106 0.129516 165.4589);
	--color-text-data-yellow: var(--palette-yellow);
	--color-text-data-dark-blue: oklch(0.642097 0.131252 244.0497);
	--color-text-data-red: oklch(0.660618 0.166160 47.5147);
	--color-text-data-pink: var(--palette-pink);
	--color-text-data-grey: oklch(0.645132 0.020565 264.1820);
	--color-status-info-foreground: var(--palette-blue);
	--color-status-success-foreground: oklch(0.629106 0.129516 165.4589);
	--color-status-warning-foreground: var(--palette-orange);
	--color-status-danger-foreground: oklch(0.660618 0.166160 47.5147);

	--color-surface-page: var(--stone-950);
	--color-surface-subtle: var(--stone-800);
	--color-text-primary: var(--stone-400);
	--color-text-bold: var(--stone-300);
	--color-text-secondary: var(--reference-text-muted-dark);
	--color-data-neutral: var(--stone-500);
	--color-text-code: var(--stone-300);

	--color-syntax-literal: #d3869b;
	--color-syntax-keyword: var(--reference-syntax-red-dark);
	--color-syntax-keyword-selected: var(--color-syntax-keyword);
	--color-syntax-literal-selected: var(--color-syntax-literal);
	--color-syntax-declaration: var(--color-syntax-orange);
	--color-syntax-operator: #8ec07c;
	--color-syntax-function: #fabd2f;
	--color-syntax-comment: var(--reference-text-muted-dark);
	--color-syntax-blue: var(--palette-blue);
	--color-syntax-green: oklch(0.629106 0.129516 165.4589);
	--color-syntax-orange: var(--palette-orange);

	--color-border-chart: var(--stone-700);
	--color-track-neutral: var(--stone-700);
	--color-progress-fill: oklch(0.5100 0.120000 244.0497);
	--color-border-workspace: var(--stone-700);
	--color-surface-workspace: var(--stone-900);
	--color-surface-toolbar: var(--stone-800);
	--color-text-ui-secondary: var(--stone-400);
	--color-text-ui-muted: var(--stone-400);
	--color-surface-band: var(--stone-900);
	--color-surface-code-selected: var(--color-surface-panel);
	--color-border-decoration: var(--stone-700);
	--color-action-neutral-background: var(--stone-700);
	--color-action-neutral-foreground: var(--stone-100);
	--color-action-neutral-background-hover: var(--stone-600);
	--color-action-neutral-background-disabled: color-mix(
		in oklch,
		var(--stone-700) 55%,
		var(--stone-800)
	);
	--color-action-ghost-background-hover: color-mix(
		in srgb,
		var(--color-action-neutral-background) 28%,
		transparent
	);

	--color-surface-panel: var(--stone-800);
	--color-surface-default: var(--stone-900);

	--color-link-visited: var(--purple-400);

	--color-text-inverse: var(--stone-900);
	--color-surface-inverse: var(--stone-100);
	--color-border-strong: var(--stone-400);
	--shadow-raised: 0 2px 8px rgb(0 0 0 / 30%);
	--shadow-overlay: 0 8px 24px rgb(0 0 0 / 45%);
}

/* Site layout */
html {
	--safe-area-right: env(safe-area-inset-right, 0px);
	--safe-area-bottom: env(safe-area-inset-bottom, 0px);
	--safe-area-left: env(safe-area-inset-left, 0px);
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	color-scheme: light dark;
	background-color: var(--color-overscroll-top);

	&[data-theme="light"] {
		color-scheme: light;
	}

	&[data-theme="dark"] {
		color-scheme: dark;
	}
}

body {
	min-height: 100vh;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	background-color: transparent;
	color: var(--color-text-primary);
	font-size: var(--type-body-size);
	line-height: var(--type-body-line-height);
	font-family: var(--font-family-body);
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
}

main {
	width: 100%;
	max-width: 100%;
}

.page-canvas {
	width: 100%;
	background-color: var(--color-surface-page);
	display: flex;
	flex-direction: column;
	align-items: center;

	&:only-child {
		min-height: 100vh;
	}
}

.has-newsletter-footer .page-canvas {
	padding-bottom: var(--space-8);
}

/* Typography */
aside {
	font-style: italic;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	padding-top: var(--space-6);
	font-family: var(--font-family-heading);
	line-height: var(--line-height-tight);
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

a {
	color: var(--color-link);
	text-decoration: none;
	cursor: pointer;

	&:hover {
		text-decoration: underline;
	}

	&:visited {
		color: var(--color-link-visited);
	}

	&.anchor {
		color: var(--color-anchor);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--control-target-min-size);
		min-height: var(--control-target-min-size);
	}
}

/* Articles */
article {
	container-type: inline-size;
	max-width: var(--layout-content-max-width);
	width: 100%;
	padding: var(--space-4);
	padding-right: max(var(--space-4), var(--safe-area-right));
	padding-left: max(var(--space-4), var(--safe-area-left));
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	> * + * {
		margin-top: 1em;
	}

	h1 {
		font-size: var(--type-title-size);
		text-wrap: pretty;
		text-align: center;
	}

	h2 {
		font-size: var(--type-section-size);
	}

	h3 {
		font-size: var(--type-subsection-size);
	}

	p {
		padding-block: var(--layout-prose-padding);
	}

	img {
		max-width: 95%;
		margin: auto;
	}

	picture {
		display: block;
		padding-block: var(--layout-prose-padding);
	}

	.content a:not(.anchor) {
		text-decoration-line: underline;
		text-decoration-thickness: 0.08em;
		text-underline-offset: 0.12em;
	}

	[data-theme="dark"] & .content :is(b, strong) {
		color: var(--color-text-bold);
	}

	> .content {
		> :not(header, [data-dog], .footnote-definition) {
			margin-block: 0;
		}

		> * + :not(header, [data-dog], .footnote-definition) {
			margin-block-start: var(--layout-prose-gap);
		}

		> p {
			padding-block: 0;
		}

		/* Markdown wrappers must not double widget margins; keep hero/dog spacing. */
		> p:not(:first-child) > :only-child:not([data-dog]) {
			margin-block: 0;
		}

		> :is(header, [data-dog], h1, h2, h3, h4, h5, h6):not(:first-child),
		> :is(header, [data-dog]) + :not(.footnote-definition) {
			margin-block-start: var(--layout-prose-padding);
		}

		> picture,
		> p > picture:only-child {
			padding-block: 0;
		}
	}

	pre {
		border-radius: var(--radius-large);
		padding: var(--space-5) var(--space-4);
		overflow-x: auto;
	}

	code {
		font-family: var(--font-family-code);

		&:not(pre code, .border) {
			padding: max(0px, calc(0.1em - 1px)) 0.3em;
			border: var(--border-width-thin) solid var(--color-border-subtle);
			border-radius: var(--radius-small);
			background-color: var(--inline-code-background, var(--color-surface-code));
			color: var(--inline-code-foreground, inherit);
			overflow-wrap: anywhere;
			-webkit-box-decoration-break: clone;
			box-decoration-break: clone;
		}

		&:not(pre code) {
			font-size: 0.9em;
		}
	}

	@supports (font-size-adjust: from-font) and selector(:has(*)) {
		/* Live widget hosts must not track prose-only relational selectors. */
		:where(
			p, li, dt, dd, td, th, caption, figcaption, blockquote, div, span,
			a, strong, em, b, i, small, mark, summary, h1, h2, h3, h4, h5, h6,
			[data-dog], :not(:defined)
		):has(> code:not(pre code)) {
			font-size-adjust: from-font;
		}

		code:not(pre code) {
			font-size: 1em;
		}

		/* Inline-code ratios must not leak into nested code blocks. */
		pre {
			font-size-adjust: none;
		}
	}
}

/* Theme-dependent prose works before JavaScript loads. */
s-dark,
:root[data-theme="dark"] s-light {
	display: none;
}

s-light,
:root[data-theme="dark"] s-dark {
	display: inline;
}

.page {
	margin-inline: auto;
}

/* Accessibility */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

.skip-link {
	position: fixed;
	z-index: var(--layer-skip-link);
	top: 0.75rem;
	left: 0.75rem;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-medium);
	background: var(--color-action-neutral-background);
	color: var(--color-action-neutral-foreground);
	transform: translateY(-200%);

	&:focus-visible {
		transform: translateY(0);
		outline: var(--focus-ring-width-strong) solid var(--focus-ring-color);
		outline-offset: var(--focus-ring-offset-wide);
	}
}

/* Tables */
table {
	--table-cell-border-color: var(--stone-300);
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-family: var(--font-family-code);
	background: var(--color-surface-default);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-large);
	overflow: hidden;
	text-align: left;
	color: var(--color-text-primary);

	/* The caption is the footer; let its side borders escape the table clip. */
	&:has(> caption) {
		overflow: visible;
		border-bottom: 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	&[center] {
		text-align: center;
	}

	&[fixed] {
		table-layout: fixed;
	}

	caption {
		caption-side: bottom;
		border: var(--border-width-thin) solid var(--color-border-subtle);
		border-radius: 0 0 var(--radius-large) var(--radius-large);
	}

	thead,
	tfoot {
		background: var(--color-surface-panel);
	}

	thead {
		clip-path: inset(0 round calc(var(--radius-large) - var(--border-width-thin)) calc(var(--radius-large) - var(--border-width-thin)) 0 0);
	}

	thead th {
		padding: var(--space-3) var(--space-4);
		border-bottom: var(--border-width-thin) solid var(--table-cell-border-color);
		font: var(--font-weight-semibold) var(--type-caption-size) var(--font-family-body);
		text-align: center;
	}

	tbody tr {
		transition: background 160ms ease;
	}

	tbody td,
	tbody th {
		padding: var(--space-3) var(--space-4);
		font-size: var(--type-ui-size);
	}

	caption,
	tfoot > tr > * {
		padding: var(--space-2);
		border-top: var(--border-width-thin) solid var(--table-cell-border-color);
		background: var(--color-surface-panel);
		color: var(--color-text-primary);
		font: var(--font-size-small)/var(--line-height-normal) var(--font-family-body);
		text-align: center;
	}

	&:not([nostripes]) tbody tr:nth-child(even),
	&[hover] tbody tr:hover {
		background: var(--color-surface-panel);
	}

	&[borders] {
		tr > * + * {
			border-left: var(--border-width-thin) solid var(--table-cell-border-color);
		}

		tbody tr + tr > * {
			border-top: var(--border-width-thin) solid var(--table-cell-border-color);
		}
	}
}

[data-theme="dark"] table {
	--table-cell-border-color: var(--stone-700);
}

/* Site navigation */
.topnav {
	position: sticky;
	top: 0;
	z-index: var(--layer-sticky);
	height: var(--topnav-height);
	width: 100%;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	overflow-x: auto;
	padding: max(var(--space-1), env(safe-area-inset-top))
		max(var(--space-4), var(--safe-area-right)) var(--space-1)
		max(var(--space-4), var(--safe-area-left));
	background: var(--color-surface-toolbar);
	color: var(--color-text-primary);
	font-family: var(--font-family-body);
}

/* Keep content's local layers beneath the site navigation. */
.topnav ~ :is(.post-header, main) {
	position: relative;
	z-index: 0;
}

.topnav-actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: inherit;
	margin-inline-start: auto;
}

.topnav-home {
	display: inline-flex;
	flex: none;
	width: 6rem;
	align-items: center;
	margin-inline-end: auto;
	min-height: var(--control-min-height);
}

.topnav-home img {
	display: block;
	flex: none;
	width: 4.5rem;
	height: auto;
}

.topnav-home:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

@media (max-width: 600px) {
	.topnav {
		gap: var(--space-1);
		padding-inline: max(var(--space-2), var(--safe-area-left))
			max(var(--space-2), var(--safe-area-right));
	}

	.topnav-home {
		width: 5.625rem;
	}
}

.topnav--article {
	padding-inline-start: max(
		var(--space-4),
		var(--safe-area-left),
		calc((100% - var(--layout-content-max-width)) / 2 + var(--space-4))
	);
	padding-inline-end: max(
		var(--space-4),
		var(--safe-area-right),
		calc((100% - var(--layout-content-max-width)) / 2 + var(--space-4))
	);
}

/* Site logo */
.samwho-logo {
	--samwho-logo-filter: none;
	filter: var(--samwho-logo-filter);

	&.hero {
		max-width: 380px;
		width: 100%;
		height: auto;
		margin: auto;
		margin-top: -40px;
		display: block;
	}

	&.hero-topleft {
		position: absolute;
		top: 0;
		left: 0;
		z-index: var(--layer-floating);
		width: 140px;
		margin-left: -15px;
		margin-top: -50px;
	}
}

[data-theme="dark"] .samwho-logo {
	--samwho-logo-filter: brightness(0.8);
}

/* Newsletter footer */
/* Preserve the shared footer above historical theme overrides. */
:root.has-newsletter-footer {
	--footer-background-color: var(--color-surface-band);
}

:root:has(.topnav) {
	--topnav-height: calc(3.75rem + env(safe-area-inset-top));
	--color-overscroll-top: var(--color-surface-toolbar);
	scroll-padding-top: var(--topnav-height);
}

.newsletter-footer {
	/* Third-party marks keep authored colours. */
	--color-brand-twitter: #1da1f2;
	--color-brand-mark-surface: var(--white);
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: var(--space-4);
	padding-right: max(var(--space-4), var(--safe-area-right));
	padding-bottom: calc(var(--space-4) + var(--safe-area-bottom));
	padding-left: max(var(--space-4), var(--safe-area-left));
	background: var(--footer-background-color);
	gap: var(--space-4);
	color: var(--color-text-primary);
	text-align: center;
	font-size: var(--type-ui-size);

	.footer-credit {
		margin: 0;
	}

	.social-links {
		width: 100%;
		display: flex;
		justify-content: center;
		gap: var(--space-2);

		a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: var(--control-target-min-size);
			min-height: var(--control-target-min-size);
		}
	}
}

#sam-rose-signature {
	path {
		fill: none;
		stroke: currentColor;
		stroke-width: 6;
		stroke-linecap: round;
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		opacity: 0;
	}

	&.in-view path {
		&:nth-of-type(1) {
			animation: draw 0.9s ease forwards;
		}

		&:nth-of-type(2) {
			animation: draw 1.5s ease-out forwards;
			animation-delay: 0.9s;
		}

		&:nth-of-type(3) {
			animation: draw 0.4s ease forwards;
			animation-delay: 2.4s;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		path,
		&.in-view path {
			animation: none;
			opacity: 1;
			stroke-dashoffset: 0;
		}
	}
}

@keyframes draw {
	0% {
		stroke-dashoffset: 1;
		opacity: 0;
	}
	1% {
		opacity: 1;
	}
	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

/* Post layout */
.post {
	align-items: stretch;
	margin-inline: auto;
	overflow-wrap: anywhere;
}

.post-header {
	width: 100%;
	max-width: var(--layout-content-max-width);
	padding: var(--space-4) var(--space-4) var(--space-5);
	padding-right: max(var(--space-4), var(--safe-area-right));
	padding-left: max(var(--space-4), var(--safe-area-left));
	margin: auto;
	text-align: center;

	h1 {
		font-size: var(--type-title-size);
		text-wrap: pretty;
		padding: 0;
		margin: var(--space-4);
	}
}

time.post-meta {
	display: block;
}

.post-header .post-meta:has(+ .post-meta-updated) {
	margin-bottom: 0;
}

.post-header .post-meta {
	display: block;
	text-align: center;
	margin-bottom: var(--space-5);
	font-size: var(--type-caption-size);
	font-variant: small-caps;
	color: var(--color-text-secondary);
}

.subheading {
	--color-text-subheading: var(--color-text-secondary);
	margin: -1rem 0 var(--space-6);
	padding: 0;
	font-family: var(--font-family-heading);
	color: var(--color-text-subheading);
	font-size: var(--type-ui-size);
	text-align: center;
	font-style: italic;
}

/* Syntax highlighting */
pre.giallo {
	border-radius: 0;
	box-shadow: 0 0 0 100vmax var(--color-surface-band);
	clip-path: inset(0 -100vmax);
}

[data-theme="dark"] pre.giallo > code {
	display: block;
}

.giallo-l {
	display: inline-block;
	min-height: 1lh;
	width: 100%;
}

.giallo-ln {
	display: inline-block;
	min-inline-size: 1ch;
	margin-inline-end: 1.5ch;
	text-align: end;
	user-select: none;
}

code:has(> .giallo-l:nth-child(10)) .giallo-ln {
	min-inline-size: 2ch;
}

code:has(> .giallo-l:nth-child(100)) .giallo-ln {
	min-inline-size: 3ch;
}