/* Generated from D1 — runtime-emitted, do not cache stale. */
@layer reset, ui, sf-element, sf-bundle, sf-variant, sf-context, sf-semantic, sf-utility, sf-state, sl-layout;
/* Spacing classes (sf-gap-*, sf-padding-*, sf-size-*, chrome's own padding) apply to the
   element that wears them: nothing inside takes them on. Every reader gives its own default,
   or none where an unset value already means "no spacing". */
@property --sf-gap {
	syntax: '*';
	inherits: false;
}
@property --sf-padding {
	syntax: '*';
	inherits: false;
}

@layer reset {
	/* Width includes padding and border. A border shows by giving it a width. */
	*,
	::before,
	::after {
		box-sizing: border-box;
		border-width: 0;
		border-style: solid;
		border-color: rgb(var(--sf-border_color));
	}

	html {
		line-height: 1.5;
		-webkit-text-size-adjust: 100%;
		tab-size: 4;
		-webkit-tap-highlight-color: transparent;
	}

	body {
		margin: 0;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/* Elements start without the browser's spacing, sizes and markers: a heading is sized
	   by the classes it wears, a list shows markers where the theme or content gives them. */
	blockquote,
	dl,
	dd,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	hr,
	figure,
	p,
	pre {
		margin: 0;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-size: inherit;
		font-weight: inherit;
	}
	ol,
	ul,
	menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	fieldset {
		margin: 0;
		padding: 0;
	}
	legend,
	dialog {
		padding: 0;
	}
	hr {
		height: 0;
		color: inherit;
		border-top-width: 1px;
	}
	a {
		color: inherit;
		text-decoration: inherit;
	}
	b,
	strong {
		font-weight: bolder;
	}
	abbr:where([title]) {
		text-decoration: underline dotted;
	}
	code,
	kbd,
	samp,
	pre {
		font-family: var(--sf-font-mono, ui-monospace, monospace);
		font-size: 1em;
	}
	small {
		font-size: 80%;
	}
	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}
	sub {
		bottom: -0.25em;
	}
	sup {
		top: -0.5em;
	}
	table {
		text-indent: 0;
		border-color: inherit;
		border-collapse: collapse;
	}

	/* Form controls take the text around them; buttons start without the browser's chrome. */
	button,
	input,
	optgroup,
	select,
	textarea {
		font: inherit;
		letter-spacing: inherit;
		color: inherit;
		margin: 0;
		padding: 0;
	}
	button,
	select {
		text-transform: none;
	}
	button,
	input:where([type="button"], [type="reset"], [type="submit"]) {
		-webkit-appearance: button;
		background-color: transparent;
		background-image: none;
	}
	button,
	[role="button"] {
		cursor: pointer;
	}
	:disabled {
		cursor: default;
	}
	textarea {
		resize: vertical;
	}
	progress {
		vertical-align: baseline;
	}
	::-webkit-inner-spin-button,
	::-webkit-outer-spin-button {
		height: auto;
	}
	[type="search"] {
		-webkit-appearance: textfield;
		outline-offset: -2px;
	}
	::-webkit-search-decoration {
		-webkit-appearance: none;
	}
	::-webkit-file-upload-button {
		-webkit-appearance: button;
		font: inherit;
	}
	:-moz-focusring {
		outline: auto;
	}
	:-moz-ui-invalid {
		box-shadow: none;
	}
	summary {
		display: list-item;
	}

	/* Images and embeds sit on their own line and never overflow their container. */
	img,
	svg,
	video,
	canvas,
	audio,
	iframe,
	embed,
	object {
		display: block;
		vertical-align: middle;
	}
	img,
	video {
		max-width: 100%;
		height: auto;
	}

	[hidden]:where(:not([hidden="until-found"])) {
		display: none;
	}

	/* A popover opens in the top layer but still belongs to the page: its text colour comes
	   from where it sits, not the browser's CanvasText. */
	[popover] {
		color: inherit;
	}

	/* Compact units are inline boxes, so their padding applies on a <span>. */
	.sf-chip,
	.sf-tag,
	.sf-status,
	.sf-counter {
		display: inline-block;
	}

	/* sf-swatch structural — display enables width/height on the marker;
	   background-clip guards padded-frame themes so bg doesn't bleed into the border. */
	.sf-swatch {
		display: inline-block;
		background-clip: padding-box;
	}

	/* Native colour input: strip UA inset chrome so swatch treatment can render. */
	input[type="color"].sf-swatch {
		padding: 0;
		background: none;
	}

	/* Native <select>.sf-field: strip UA appearance so the custom chevron renders,
	   align cursor across browsers (Firefox: pointer, Chrome: default). */
	select.sf-field {
		appearance: none;
		cursor: pointer;
	}
}
@layer sf-element {
	body {
		color: rgb(var(--sf-fg_primary));
		background-color: rgb(var(--sf-surface-0));
		font-family: var(--sf-font-1);
		font-size: var(--sf-text-base);
		line-height: var(--sf-leading-relaxed);
	}
	*:focus-visible {
		outline: var(--sf-stroke-2) solid rgb(var(--sf-primary));
	}
}
:root {
	--sf-alpha-1: 0.1;
	--sf-alpha-2: 0.2;
	--sf-alpha-3: 0.3;
	--sf-alpha-4: 0.4;
	--sf-alpha-5: 0.5;
	--sf-alpha-6: 0.6;
	--sf-alpha-7: 0.7;
	--sf-alpha-8: 0.8;
	--sf-alpha-9: 0.9;
	--sf-border_color: 222 229 242;
	--sf-danger: 239 68 68;
	--sf-fg_inverted: 255 255 255;
	--sf-fg_on_danger: 255 255 255;
	--sf-fg_on_info: 255 255 255;
	--sf-fg_on_primary: 255 255 255;
	--sf-fg_on_success: 255 255 255;
	--sf-fg_on_warning: 255 255 255;
	--sf-fg_primary: 38 40 36;
	--sf-font-1: "Source Sans Pro", Inter, system-ui, sans-serif;
	--sf-font-2: "Lora", Georgia, serif;
	--sf-font-mono: "Source Code Pro", "Fira Code", monospace;
	--sf-info: 59 130 246;
	--sf-leading-loose: 2;
	--sf-leading-none: 1;
	--sf-leading-normal: 1.5;
	--sf-leading-relaxed: 1.625;
	--sf-leading-snug: 1.375;
	--sf-leading-tight: 1.25;
	--sf-opacity-1: 0.05;
	--sf-opacity-2: 0.15;
	--sf-opacity-3: 0.3;
	--sf-opacity-4: 0.5;
	--sf-opacity-5: 0.7;
	--sf-opacity-6: 0.85;
	--sf-opacity-7: 0.95;
	--sf-primary: var(--sf-primary-5);
	--sf-primary-1: 209 250 229;
	--sf-primary-2: 167 243 208;
	--sf-primary-3: 110 231 183;
	--sf-primary-4: 52 211 153;
	--sf-primary-5: 16 185 129;
	--sf-primary-6: 5 150 105;
	--sf-primary-7: 4 120 87;
	--sf-primary-8: 6 95 70;
	--sf-primary-9: 4 78 56;
	--sf-radius-0: 0px;
	--sf-radius-1: 4px;
	--sf-radius-2: 8px;
	--sf-radius-3: 16px;
	--sf-radius-full: 9999px;
	--sf-shadow: 0 0 0;
	--sf-shadow-lg: 0 4px 16px;
	--sf-shadow-md: 0 2px 8px;
	--sf-shadow-opacity: 0.12;
	--sf-shadow-sm: 0 1px 4px;
	--sf-shadow-xl: 0 8px 24px;
	--sf-spacing-2xs: 0.25rem;
	--sf-spacing-lg: 1.5rem;
	--sf-spacing-md: 1rem;
	--sf-spacing-none: 0px;
	--sf-spacing-sm: 0.75rem;
	--sf-spacing-xl: 2.5rem;
	--sf-spacing-xs: 0.5rem;
	--sf-spacing_page: var(--sf-spacing-lg);
	--sf-stroke-1: 1px;
	--sf-stroke-2: 2px;
	--sf-stroke-3: 4px;
	--sf-success: 34 197 94;
	--sf-surface-0: 255 255 255;
	--sf-surface-1: 244 244 245;
	--sf-surface-2: 228 228 231;
	--sf-surface-3: 212 212 216;
	--sf-surface-4: 161 161 170;
	--sf-surface-5: 113 113 122;
	--sf-surface-6: 82 82 91;
	--sf-surface-7: 63 63 70;
	--sf-surface-8: 39 39 42;
	--sf-surface-9: 24 24 27;
	--sf-text-2xl: 1.5rem;
	--sf-text-3xl: 1.875rem;
	--sf-text-4xl: 2.25rem;
	--sf-text-5xl: 3rem;
	--sf-text-6xl: 3.75rem;
	--sf-text-7xl: 4.5rem;
	--sf-text-8xl: 6rem;
	--sf-text-9xl: 8rem;
	--sf-text-base: 1rem;
	--sf-text-lg: 1.125rem;
	--sf-text-sm: 0.875rem;
	--sf-text-xl: 1.25rem;
	--sf-text-xs: 0.75rem;
	--sf-tracking-normal: 0em;
	--sf-tracking-tight: -0.025em;
	--sf-tracking-wide: 0.025em;
	--sf-warning: 245 158 11;
	--sf-weight-1: 400;
	--sf-weight-2: 500;
	--sf-weight-3: 600;
	--sf-weight-4: 700;
	--sf-width_page: 80rem;
}

.theme-dark {
	--sf-border_color: 61 76 88;
	--sf-fg_inverted: 11 18 26;
	--sf-fg_on_primary: 11 18 26;
	--sf-fg_primary: 241 241 241;
	--sf-primary: var(--sf-primary-4);
	--sf-surface-0: 5 10 16;
	--sf-surface-1: 31 38 47;
	--sf-surface-2: 42 52 63;
	--sf-surface-3: 55 66 78;
	--sf-surface-4: 72 84 98;
	--sf-surface-5: 93 107 122;
	--sf-surface-6: 118 133 148;
	--sf-surface-7: 148 163 177;
	--sf-surface-8: 183 195 206;
	--sf-surface-9: 218 226 234;
}

.theme-pink {
	--sf-fg_inverted: 255 230 240;
	--sf-fg_on_primary: 255 230 240;
	--sf-fg_primary: 102 0 51;
	--sf-primary-1: 255 204 230;
	--sf-primary-2: 255 179 218;
	--sf-primary-3: 255 153 204;
	--sf-primary-4: 255 128 191;
	--sf-primary-5: 255 102 178;
	--sf-primary-6: 255 77 166;
	--sf-primary-7: 255 51 153;
	--sf-primary-8: 255 26 140;
	--sf-primary-9: 255 0 128;
	--sf-surface-0: 255 240 245;
	--sf-surface-1: 255 220 235;
	--sf-surface-2: 255 210 230;
	--sf-surface-3: 255 200 225;
	--sf-surface-4: 255 180 215;
	--sf-surface-5: 255 160 205;
	--sf-surface-6: 255 140 195;
	--sf-surface-7: 255 120 185;
	--sf-surface-8: 255 100 175;
	--sf-surface-9: 255 80 165;
}
@layer sf-element {
	.sf-avatar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--sf-radius-full);
		background: rgb(var(--sf-fg_primary));
		color: rgb(var(--sf-fg_inverted));
	}
	.sf-content-frame {
		border: var(--sf-stroke-1) solid rgb(var(--sf-border_color));
		border-radius: var(--sf-radius-1);
	}
	.sf-content-frame:focus-within {
		border-color: rgb(var(--sf-primary));
	}
	.sf-counter {
		border-radius: var(--sf-radius-3);
		padding: var(--sf-padding, var(--sf-spacing-2xs));
	}
	.sf-drag-handle {
		color: rgb(from currentColor r g b / var(--sf-alpha-4));
		border: var(--sf-stroke-1) solid rgb(var(--sf-border_color));
	}
	.sf-field {
		border-radius: var(--sf-radius-2);
		--sf-padding: var(--sf-spacing-xs);
		padding: var(--sf-padding);
		background: rgb(var(--sf-surface-0));
		color: rgb(var(--sf-fg_primary));
		font-family: inherit;
		font-size: inherit;
		font-weight: inherit;
		border: var(--sf-stroke-1) solid rgb(var(--sf-border_color));
	}
	.sf-field::placeholder {
		color: rgba(var(--sf-fg_primary) / var(--sf-alpha-5));
	}
	.sf-field:focus-visible {
		outline: 0;
		border-color: rgb(var(--sf-primary));
		color: rgb(var(--sf-fg_primary));
		background-color: rgba(var(--sf-fg_primary) / var(--sf-alpha-1));
	}
	.sf-icon {
		line-height: 1;
	}
	.sf-scrim {
		background: rgb(0 0 0 / var(--sf-alpha-5));
		backdrop-filter: blur(8px);
	}
	.sf-single-line {
		line-height: 1;
	}
	.sf-status {
		border-radius: var(--sf-radius-3);
		padding: var(--sf-padding, var(--sf-spacing-2xs));
	}
	.sf-swatch {
		padding: 0;
		border: var(--sf-stroke-1) solid rgb(var(--sf-border_color) / var(--sf-alpha-2));
		border-radius: var(--sf-radius-1);
	}
	.sf-tag {
		border-radius: var(--sf-radius-3);
		padding: var(--sf-padding, var(--sf-spacing-2xs));
	}
	.sf-text-block {
		line-height: var(--sf-leading-tight);
	}
	.sf-thumb {
		border-radius: var(--sf-radius-full);
		font-size: 0.8em;
		inline-size: 1.25em;
		block-size: 1.25em;
		background: rgb(var(--sf-fg_primary) / var(--sf-alpha-5));
		color: rgb(var(--sf-fg_inverted));
	}
	.sf-toast {
		font-weight: var(--sf-weight-3);
	}
	a:where(p *, li *, dd *, td *, th *, blockquote *, figcaption *, address *, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *) {
		color: rgb(var(--sf-primary));
		text-decoration: underline;
	}
	a.sf {
		color: inherit;
		text-decoration: none;
		display: inline-block;
		border-radius: var(--sf-radius-2);
		--sf-padding: var(--sf-spacing-xs);
		padding: var(--sf-padding);
		font-family: inherit;
		font-size: inherit;
		font-weight: inherit;
		border: 1px solid rgb(var(--sf-border_color) / var(--sf-alpha-4));
	}
	blockquote.sf {
		border-inline-start: calc(var(--sf-stroke-3) * 2) solid rgb(var(--sf-primary));
	}
	button.sf {
		border-radius: var(--sf-radius-2);
		--sf-padding: var(--sf-spacing-xs);
		padding: var(--sf-padding);
		cursor: pointer;
		font-family: inherit;
		font-size: inherit;
		font-weight: inherit;
		border: 1px solid rgb(var(--sf-border_color) / var(--sf-alpha-4));
	}
	button.sf-switch:is([role="switch"]) {
		border-radius: var(--sf-radius-full);
		--sf-padding: 0.2em;
		inline-size: 2.5em;
	}
	code.sf {
		font-family: var(--sf-font-mono);
	}
	hr.sf {
		height: 0;
		border: 0;
		border-top: var(--sf-stroke-1) solid rgb(var(--sf-border_color));
	}
	input.sf {
		accent-color: rgb(var(--sf-primary));
	}
	input.sf:is([type="checkbox"], [type="radio"]) {
		width: 1em;
		height: 1em;
	}
	ol.sf {
		list-style: decimal;
		padding-inline-start: 1.5em;
	}
	pre.sf {
		padding: var(--sf-spacing-sm) var(--sf-spacing-md);
		border-radius: var(--sf-radius-2);
		font-family: var(--sf-font-mono);
	}
	pre.sf code {
		font-family: inherit;
	}
	select.sf-field {
		background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%);
		background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
		background-size: 5px 5px;
		background-repeat: no-repeat;
		padding-right: calc(var(--sf-padding) + var(--sf-spacing-md));
	}
	summary.sf {
		border-radius: var(--sf-radius-2);
		--sf-padding: var(--sf-spacing-xs);
		padding: var(--sf-padding);
		border: 1px solid rgb(var(--sf-border_color) / var(--sf-alpha-4));
	}
	table {
		border-collapse: separate;
		border-spacing: 0;
	}
	table.sf {
		font-size: var(--sf-text-sm);
	}
	td {
		border-bottom: 1px solid rgb(var(--sf-border_color));
		vertical-align: middle;
		padding: var(--sf-spacing-xs) var(--sf-spacing-sm);
	}
	th {
		border-bottom: 1px solid rgb(var(--sf-border_color));
		text-align: left;
		vertical-align: middle;
		font-weight: 600;
		padding: var(--sf-spacing-xs) var(--sf-spacing-sm);
	}
	:is(tr:where(:not([data-node-view-wrapper], [data-node-view-wrapper] > *)):last-child, :where([data-node-view-wrapper]):last-child > tr) td {
		border-bottom: none;
	}
	ul.sf {
		list-style: disc;
		padding-inline-start: 1.5em;
	}
	.sf-chip {
		border-radius: var(--sf-radius-3);
		padding: var(--sf-padding, var(--sf-spacing-2xs));
	}
	a.sf-chip {
		border-radius: var(--sf-radius-3);
		border: var(--sf-stroke-1) solid rgb(var(--sf-border_color) / var(--sf-alpha-3));
	}
	button.sf-chip {
		border-radius: var(--sf-radius-3);
		border: var(--sf-stroke-1) solid rgb(var(--sf-border_color) / var(--sf-alpha-3));
	}
}

@layer sf-bundle {
	.sf-boundary {
		border: 1px solid rgb(var(--sf-border_color));
	}
	.sf-boundary-bottom {
		border-bottom: 1px solid rgb(var(--sf-border_color));
	}
	.sf-boundary-left {
		border-left: 1px solid rgb(var(--sf-border_color));
	}
	.sf-boundary-right {
		border-right: 1px solid rgb(var(--sf-border_color));
	}
	.sf-boundary-top {
		border-top: 1px solid rgb(var(--sf-border_color));
	}
	.sf-boundary-x {
		border-left: 1px solid rgb(var(--sf-border_color));
		border-right: 1px solid rgb(var(--sf-border_color));
	}
	.sf-boundary-y {
		border-top: 1px solid rgb(var(--sf-border_color));
		border-bottom: 1px solid rgb(var(--sf-border_color));
	}
	.sf-counter.sf-loudness-3 {
		background: rgb(var(--sf-fg_primary));
		color: rgb(var(--sf-fg_inverted));
	}
	.sf-depth-0 {
		--sfx-surface-color: var(--sf-surface-0);
		background: rgb(var(--sf-surface-0));
		color: rgb(var(--sf-fg_primary));
	}
	.sf-depth-1 {
		--sfx-surface-color: var(--sf-surface-1);
		--sfx-depth-radius: var(--sf-radius-2);
		background: rgb(var(--sf-surface-1));
		color: rgb(var(--sf-fg_primary));
		box-shadow: var(--sf-shadow-md) var(--sf-shadow-color, rgb(var(--sf-shadow) / var(--sf-shadow-opacity)));
		--sfx-depth-shadow: var(--sf-shadow-md) var(--sf-shadow-color, rgb(var(--sf-shadow) / var(--sf-shadow-opacity)));
		border-radius: var(--sf-radius-2);
		--sf-padding: var(--sf-spacing-md);
		padding: var(--sf-padding);
	}
	.sf-depth-1 th {
		font-size: var(--sf-text-xs);
		text-transform: uppercase;
		letter-spacing: var(--sf-tracking-wide);
		color: rgb(var(--sf-fg_primary) / var(--sf-alpha-5));
	}
	.sf-depth-1.sf-loudness-1 {
		box-shadow: none;
		border: 1px solid rgb(var(--sf-border_color));
	}
	.sf-depth-1.sf-loudness-3 {
		box-shadow: var(--sf-shadow-lg) var(--sf-shadow-color, rgb(var(--sf-shadow) / var(--sf-shadow-opacity)));
		border: 1px solid rgb(var(--sf-border_color));
	}
	.sf-depth-2 {
		--sfx-surface-color: var(--sf-surface-2);
		--sfx-depth-radius: var(--sf-radius-2);
		background: rgb(var(--sf-surface-2));
		color: rgb(var(--sf-fg_primary));
		box-shadow: var(--sf-shadow-lg) var(--sf-shadow-color, rgb(var(--sf-shadow) / var(--sf-shadow-opacity)));
		--sfx-depth-shadow: var(--sf-shadow-lg) var(--sf-shadow-color, rgb(var(--sf-shadow) / var(--sf-shadow-opacity)));
		border-radius: var(--sf-radius-2);
		--sf-padding: var(--sf-spacing-md);
		padding: var(--sf-padding);
	}
	.sf-depth-3 {
		--sfx-surface-color: var(--sf-surface-3);
		--sfx-depth-radius: var(--sf-radius-2);
		background: rgb(var(--sf-surface-3));
		color: rgb(var(--sf-fg_primary));
		box-shadow: var(--sf-shadow-xl) var(--sf-shadow-color, rgb(var(--sf-shadow) / var(--sf-shadow-opacity)));
		--sfx-depth-shadow: var(--sf-shadow-xl) var(--sf-shadow-color, rgb(var(--sf-shadow) / var(--sf-shadow-opacity)));
		border-radius: var(--sf-radius-2);
		--sf-padding: var(--sf-spacing-md);
		padding: var(--sf-padding);
	}
	:is(.sf-divide-x, .sf-divide-x > :where([data-node-view-content])) > * + :where(:not([data-node-view-wrapper])), :is(.sf-divide-x, .sf-divide-x > :where([data-node-view-content])) > * + :where([data-node-view-wrapper]) > *, .sf-divide-x:where(.sl-stack, .sl-cluster, .sl-columns, .sl-row, .sl-split, .sl-grid, .sl-inset, .sl-cover) > * + :where([data-node-view-content]) > :where(:not([data-node-view-wrapper], [data-node-view-wrapper] > *)):where(:first-child), .sf-divide-x:where(.sl-stack, .sl-cluster, .sl-columns, .sl-row, .sl-split, .sl-grid, .sl-inset, .sl-cover) > * + :where([data-node-view-content]) > :where([data-node-view-wrapper]):where(:first-child) > * {
		border-left: 1px solid rgb(var(--sf-border_color));
	}
	:is(.sf-divide-y, .sf-divide-y > :where([data-node-view-content])) > * + :where(:not([data-node-view-wrapper])), :is(.sf-divide-y, .sf-divide-y > :where([data-node-view-content])) > * + :where([data-node-view-wrapper]) > *, .sf-divide-y:where(.sl-stack, .sl-cluster, .sl-columns, .sl-row, .sl-split, .sl-grid, .sl-inset, .sl-cover) > * + :where([data-node-view-content]) > :where(:not([data-node-view-wrapper], [data-node-view-wrapper] > *)):where(:first-child), .sf-divide-y:where(.sl-stack, .sl-cluster, .sl-columns, .sl-row, .sl-split, .sl-grid, .sl-inset, .sl-cover) > * + :where([data-node-view-content]) > :where([data-node-view-wrapper]):where(:first-child) > * {
		border-top: 1px solid rgb(var(--sf-border_color));
	}
	.sf-drag-handle.sf-depth-1 {
		color: rgb(from currentColor r g b / var(--sf-alpha-4));
	}
	.sf-drag-handle.sf-depth-2 {
		color: rgb(from currentColor r g b / var(--sf-alpha-4));
	}
	.sf-drag-handle.sf-depth-3 {
		color: rgb(from currentColor r g b / var(--sf-alpha-4));
	}
	.sf-heading-1 {
		font-size: var(--sf-text-4xl);
		line-height: var(--sf-leading-tight);
	}
	.sf-heading-2 {
		font-size: var(--sf-text-2xl);
		line-height: var(--sf-leading-snug);
	}
	.sf-heading-3 {
		font-size: var(--sf-text-xl);
		line-height: var(--sf-leading-snug);
	}
	.sf-icon.sf-loudness-1 {
		color: rgb(from currentColor r g b / var(--sf-alpha-4));
	}
	.sf-loudness-1 {
		color: rgb(from currentColor r g b / var(--sf-alpha-6));
		border-color: transparent;
	}
	.sf-status.sf-loudness-3 {
		background: rgb(var(--sf-fg_primary));
		color: rgb(var(--sf-fg_inverted));
	}
	.sf-tag.sf-loudness-3 {
		background: rgb(var(--sf-fg_primary));
		color: rgb(var(--sf-fg_inverted));
	}
	a.sf.sf-loudness-2 {
		background: rgb(from currentColor r g b / var(--sf-alpha-1));
		border-color: rgb(var(--sf-border_color) / var(--sf-alpha-5));
	}
	button.sf.sf-loudness-2 {
		background: rgb(from currentColor r g b / var(--sf-alpha-1));
		border-color: rgb(var(--sf-border_color) / var(--sf-alpha-5));
	}
	button.sf.sf-loudness-3 {
		background: rgb(var(--sf-fg_primary));
		color: rgb(var(--sf-fg_inverted));
	}
	span.sf-loudness-3 {
		font-weight: 600;
	}
	.sf-chip.sf-loudness-3 {
		background: rgb(var(--sf-fg_primary));
		color: rgb(var(--sf-fg_inverted));
	}
	.sf-size-2xs {
		--sf-padding: var(--sf-spacing-2xs);
	}
	.sf-size-lg {
		--sf-padding: var(--sf-spacing-lg);
	}
	.sf-size-md {
		--sf-padding: var(--sf-spacing-md);
	}
	.sf-size-sm {
		--sf-padding: var(--sf-spacing-sm);
	}
	.sf-size-xl {
		--sf-padding: var(--sf-spacing-xl);
	}
	.sf-size-xs {
		--sf-padding: var(--sf-spacing-xs);
	}
	.sf-text-block.sf-size-2xs {
		padding-inline: var(--sf-spacing-xs);
	}
	.sf-text-block.sf-size-xs {
		padding-inline: var(--sf-spacing-sm);
	}
}

@layer sf-variant {
	.sf-avatar.sf-variant-danger {
		background: rgb(var(--sf-danger));
		color: rgb(var(--sf-fg_on_danger));
	}
	.sf-avatar.sf-variant-featured {
		background: rgb(var(--sf-primary));
		color: rgb(var(--sf-fg_on_primary));
	}
	.sf-avatar.sf-variant-info {
		background: rgb(var(--sf-info));
		color: rgb(var(--sf-fg_on_info));
	}
	.sf-avatar.sf-variant-primary {
		background: rgb(var(--sf-primary));
		color: rgb(var(--sf-fg_on_primary));
	}
	.sf-avatar.sf-variant-success {
		background: rgb(var(--sf-success));
		color: rgb(var(--sf-fg_on_success));
	}
	.sf-avatar.sf-variant-warning {
		background: rgb(var(--sf-warning));
		color: rgb(var(--sf-fg_on_warning));
	}
	.sf-depth-1.sf-variant-alt-1 {
		box-shadow: none;
		border: 1px solid rgb(var(--sf-border_color));
	}
	.sf-loudness-1.sf-variant-danger {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-danger)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h / var(--sf-alpha-6));
	}
	.sf-loudness-1.sf-variant-featured {
		color: rgb(var(--sf-primary) / var(--sf-alpha-6));
	}
	.sf-loudness-1.sf-variant-info {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-info)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h / var(--sf-alpha-6));
	}
	.sf-loudness-1.sf-variant-primary {
		color: rgb(var(--sf-primary) / var(--sf-alpha-6));
	}
	.sf-loudness-1.sf-variant-success {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-success)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h / var(--sf-alpha-6));
	}
	.sf-loudness-1.sf-variant-warning {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-warning)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h / var(--sf-alpha-6));
	}
	.sf-loudness-2.sf-variant-danger {
		background: color-mix(in oklab, rgb(var(--sf-danger)) 15%, rgb(var(--sf-surface-0)));
		border: 1px solid color-mix(in oklab, rgb(var(--sf-danger)) 70%, rgb(var(--sf-surface-0)));
		box-shadow: none;
	}
	.sf-loudness-2.sf-variant-featured {
		background: color-mix(in oklab, rgb(var(--sf-primary)) 15%, rgb(var(--sf-surface-0)));
		border: 1px solid color-mix(in oklab, rgb(var(--sf-primary)) 70%, rgb(var(--sf-surface-0)));
		box-shadow: none;
		color: inherit;
	}
	.sf-loudness-2.sf-variant-info {
		background: color-mix(in oklab, rgb(var(--sf-info)) 15%, rgb(var(--sf-surface-0)));
		border: 1px solid color-mix(in oklab, rgb(var(--sf-info)) 70%, rgb(var(--sf-surface-0)));
		box-shadow: none;
	}
	.sf-loudness-2.sf-variant-primary {
		background: color-mix(in oklab, rgb(var(--sf-primary)) 15%, rgb(var(--sf-surface-0)));
		border: 1px solid color-mix(in oklab, rgb(var(--sf-primary)) 70%, rgb(var(--sf-surface-0)));
		box-shadow: none;
		color: inherit;
	}
	.sf-loudness-2.sf-variant-success {
		background: color-mix(in oklab, rgb(var(--sf-success)) 15%, rgb(var(--sf-surface-0)));
		border: 1px solid color-mix(in oklab, rgb(var(--sf-success)) 70%, rgb(var(--sf-surface-0)));
		box-shadow: none;
	}
	.sf-loudness-2.sf-variant-warning {
		background: color-mix(in oklab, rgb(var(--sf-warning)) 15%, rgb(var(--sf-surface-0)));
		border: 1px solid color-mix(in oklab, rgb(var(--sf-warning)) 70%, rgb(var(--sf-surface-0)));
		box-shadow: none;
	}
	.sf-loudness-3.sf-variant-danger {
		background: rgb(var(--sf-danger));
		color: rgb(var(--sf-fg_on_danger));
		font-weight: var(--sf-weight-3);
	}
	.sf-loudness-3.sf-variant-featured {
		background: rgb(var(--sf-primary));
		color: rgb(var(--sf-fg_on_primary));
		font-weight: var(--sf-weight-3);
	}
	.sf-loudness-3.sf-variant-info {
		background: rgb(var(--sf-info));
		color: rgb(var(--sf-fg_on_info));
		font-weight: var(--sf-weight-3);
	}
	.sf-loudness-3.sf-variant-primary {
		background: rgb(var(--sf-primary));
		color: rgb(var(--sf-fg_on_primary));
		font-weight: var(--sf-weight-3);
	}
	.sf-loudness-3.sf-variant-success {
		background: rgb(var(--sf-success));
		color: rgb(var(--sf-fg_on_success));
		font-weight: var(--sf-weight-3);
	}
	.sf-loudness-3.sf-variant-warning {
		background: rgb(var(--sf-warning));
		color: rgb(var(--sf-fg_on_warning));
		font-weight: var(--sf-weight-3);
	}
	.sf-variant-danger {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-danger)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h);
	}
	.sf-variant-featured {
		color: rgb(var(--sf-primary));
	}
	.sf-variant-info {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-info)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h);
	}
	.sf-variant-primary {
		color: rgb(var(--sf-primary));
	}
	.sf-variant-success {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-success)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h);
	}
	.sf-variant-warning {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-warning)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h);
	}
}

@layer sf-context {
	.sf-boundary-right.sf-is-contained {
		border-right-color: rgb(var(--sf-border_color));
	}
	.sf-drag-handle.sf-is-contained {
		box-shadow: none;
		border-radius: 0;
	}
	.sf-flush {
		--sf-padding: 0;
		padding: 0;
	}
	.sf-is-contained {
		background: none;
		border-color: transparent;
	}
	.sf-is-contained.sf-is-overlay {
		background: none;
	}
	.sf-is-disabled {
		opacity: 0.4;
	}
	.sf-is-edge-bottom {
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}
	.sf-is-edge-bottom.sf-is-edge-left.sf-is-edge-top {
		border-top-right-radius: var(--sfx-depth-radius, 0);
		border-bottom-right-radius: var(--sfx-depth-radius, 0);
	}
	.sf-is-edge-bottom.sf-is-edge-right.sf-is-edge-top {
		border-top-left-radius: var(--sfx-depth-radius, 0);
		border-bottom-left-radius: var(--sfx-depth-radius, 0);
	}
	.sf-is-edge-left {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	.sf-is-edge-right {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	.sf-is-edge-top {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
	.sf-is-error {
		border-color: rgb(var(--sf-danger));
	}
	.sf-is-loading {
		cursor: progress;
		opacity: 0.4;
	}
	.sf-is-nested {
		border-inline-start: var(--sf-stroke-2) solid rgb(var(--sf-border_color));
		padding-inline-start: var(--sf-spacing-xs);
	}
	.sf-is-overflow-bottom {
		mask-image: linear-gradient(to top, transparent, black 60px);
	}
	.sf-is-overflow-bottom .sl-pin-bottom:where(:not([data-node-view-wrapper])) {
		background: rgb(var(--sfx-surface-color, var(--sf-surface-0)));
	}
	.sf-is-overflow-bottom .sl-pin-bottom:where(:not([data-node-view-wrapper]))::after {
		content: '';
		position: absolute;
		bottom: 100%;
		left: 0;
		right: 0;
		height: 12px;
		pointer-events: none;
		box-shadow: inset 0 -10px 8px -8px rgb(var(--sf-shadow) / var(--sf-shadow-opacity));
	}
	.sf-is-overflow-bottom:has(.sl-pin-bottom) {
		mask-image: none;
	}
	.sf-is-overflow-bottom.sf-is-overflow-top {
		mask-image: linear-gradient(to bottom, transparent, black 60px, black calc(100% - 60px), transparent);
	}
	.sf-is-overflow-bottom.sf-is-overflow-top:has(.sl-pin-bottom) {
		mask-image: linear-gradient(to bottom, transparent, black 60px);
	}
	.sf-is-overflow-bottom.sf-is-overflow-top:has(.sl-pin-top) {
		mask-image: linear-gradient(to top, transparent, black 60px);
	}
	.sf-is-overflow-bottom.sf-is-overflow-top:has(.sl-pin-top):has(.sl-pin-bottom) {
		mask-image: none;
	}
	.sf-is-overflow-left {
		mask-image: linear-gradient(to right, transparent, black 60px);
	}
	.sf-is-overflow-left .sl-pin-left:where(:not([data-node-view-wrapper])) {
		background: rgb(var(--sfx-surface-color, var(--sf-surface-0)));
	}
	.sf-is-overflow-left .sl-pin-left:where(:not([data-node-view-wrapper]))::after {
		content: '';
		position: absolute;
		left: 100%;
		top: 0;
		bottom: 0;
		width: 12px;
		pointer-events: none;
		box-shadow: inset 10px 0 8px -8px rgb(var(--sf-shadow) / var(--sf-shadow-opacity));
	}
	.sf-is-overflow-left:has(.sl-pin-left) {
		mask-image: none;
	}
	.sf-is-overflow-left.sf-is-overflow-right {
		mask-image: linear-gradient(to right, transparent, black 60px, black calc(100% - 60px), transparent);
	}
	.sf-is-overflow-left.sf-is-overflow-right:has(.sl-pin-left) {
		mask-image: linear-gradient(to left, transparent, black 60px);
	}
	.sf-is-overflow-left.sf-is-overflow-right:has(.sl-pin-left):has(.sl-pin-right) {
		mask-image: none;
	}
	.sf-is-overflow-left.sf-is-overflow-right:has(.sl-pin-right) {
		mask-image: linear-gradient(to right, transparent, black 60px);
	}
	.sf-is-overflow-right {
		mask-image: linear-gradient(to left, transparent, black 60px);
	}
	.sf-is-overflow-right .sl-pin-right:where(:not([data-node-view-wrapper])) {
		background: rgb(var(--sfx-surface-color, var(--sf-surface-0)));
	}
	.sf-is-overflow-right .sl-pin-right:where(:not([data-node-view-wrapper]))::after {
		content: '';
		position: absolute;
		right: 100%;
		top: 0;
		bottom: 0;
		width: 12px;
		pointer-events: none;
		box-shadow: inset -10px 0 8px -8px rgb(var(--sf-shadow) / var(--sf-shadow-opacity));
	}
	.sf-is-overflow-right:has(.sl-pin-right) {
		mask-image: none;
	}
	.sf-is-overflow-top {
		mask-image: linear-gradient(to bottom, transparent, black 60px);
	}
	.sf-is-overflow-top .sl-pin-top:where(:not([data-node-view-wrapper])) {
		background: rgb(var(--sfx-surface-color, var(--sf-surface-0)));
	}
	.sf-is-overflow-top .sl-pin-top:where(:not([data-node-view-wrapper]))::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 12px;
		pointer-events: none;
		box-shadow: inset 0 10px 8px -8px rgb(var(--sf-shadow) / var(--sf-shadow-opacity));
	}
	.sf-is-overflow-top:has(.sl-pin-top) {
		mask-image: none;
	}
	.sf-is-overlay {
		background: rgb(var(--sfx-surface-color, var(--sf-surface-0)) / var(--sf-alpha-9));
	}
	.sf-is-sticky {
		box-shadow: none;
		border-bottom: 1px solid rgb(var(--sf-border_color));
	}
	.sf-loudness-2.sf-variant-danger.sf-is-overlay {
		background: color-mix(in oklab, rgb(var(--sf-danger)) 15%, rgb(var(--sf-surface-0)));
		box-shadow: var(--sfx-depth-shadow, none);
	}
	.sf-loudness-2.sf-variant-featured.sf-is-overlay {
		background: color-mix(in oklab, rgb(var(--sf-primary)) 15%, rgb(var(--sf-surface-0)));
		box-shadow: var(--sfx-depth-shadow, none);
	}
	.sf-loudness-2.sf-variant-info.sf-is-overlay {
		background: color-mix(in oklab, rgb(var(--sf-info)) 15%, rgb(var(--sf-surface-0)));
		box-shadow: var(--sfx-depth-shadow, none);
	}
	.sf-loudness-2.sf-variant-primary.sf-is-overlay {
		background: color-mix(in oklab, rgb(var(--sf-primary)) 15%, rgb(var(--sf-surface-0)));
		box-shadow: var(--sfx-depth-shadow, none);
	}
	.sf-loudness-2.sf-variant-success.sf-is-overlay {
		background: color-mix(in oklab, rgb(var(--sf-success)) 15%, rgb(var(--sf-surface-0)));
		box-shadow: var(--sfx-depth-shadow, none);
	}
	.sf-loudness-2.sf-variant-warning.sf-is-overlay {
		background: color-mix(in oklab, rgb(var(--sf-warning)) 15%, rgb(var(--sf-surface-0)));
		box-shadow: var(--sfx-depth-shadow, none);
	}
	.sf-loudness-3.sf-variant-danger.sf-is-overlay {
		background: rgb(var(--sf-danger));
	}
	.sf-loudness-3.sf-variant-featured.sf-is-overlay {
		background: rgb(var(--sf-primary));
	}
	.sf-loudness-3.sf-variant-info.sf-is-overlay {
		background: rgb(var(--sf-info));
	}
	.sf-loudness-3.sf-variant-primary.sf-is-overlay {
		background: rgb(var(--sf-primary));
	}
	.sf-loudness-3.sf-variant-success.sf-is-overlay {
		background: rgb(var(--sf-success));
	}
	.sf-loudness-3.sf-variant-warning.sf-is-overlay {
		background: rgb(var(--sf-warning));
	}
	a.sf.sf-is-overlay {
		border-radius: var(--sf-radius-3);
	}
	button.sf.sf-is-overlay {
		border-radius: var(--sf-radius-3);
	}
}

@layer sf-semantic {
	.sf-border_color { border-color: rgb(var(--sf-border_color)); }
	.sf-fg_inverted { color: rgb(var(--sf-fg_inverted)); }
	.sf-fg_on_danger { color: rgb(var(--sf-fg_on_danger)); }
	.sf-fg_on_info { color: rgb(var(--sf-fg_on_info)); }
	.sf-fg_on_primary { color: rgb(var(--sf-fg_on_primary)); }
	.sf-fg_on_success { color: rgb(var(--sf-fg_on_success)); }
	.sf-fg_on_warning { color: rgb(var(--sf-fg_on_warning)); }
	.sf-fg_primary { color: rgb(var(--sf-fg_primary)); }
}

@layer sf-utility {
	/* ── Typography ─────────────────────────────────────────── */
	.sf-font-1 { font-family: var(--sf-font-1); }
	.sf-font-2 { font-family: var(--sf-font-2); }
	.sf-font-mono { font-family: var(--sf-font-mono); }
	.sf-weight-1 { font-weight: var(--sf-weight-1); }
	.sf-weight-2 { font-weight: var(--sf-weight-2); }
	.sf-weight-3 { font-weight: var(--sf-weight-3); }
	.sf-weight-4 { font-weight: var(--sf-weight-4); }
	.sf-text-2xl { font-size: var(--sf-text-2xl); }
	.sf-text-3xl { font-size: var(--sf-text-3xl); }
	.sf-text-4xl { font-size: var(--sf-text-4xl); }
	.sf-text-5xl { font-size: var(--sf-text-5xl); }
	.sf-text-6xl { font-size: var(--sf-text-6xl); }
	.sf-text-7xl { font-size: var(--sf-text-7xl); }
	.sf-text-8xl { font-size: var(--sf-text-8xl); }
	.sf-text-9xl { font-size: var(--sf-text-9xl); }
	.sf-text-base { font-size: var(--sf-text-base); }
	.sf-text-lg { font-size: var(--sf-text-lg); }
	.sf-text-sm { font-size: var(--sf-text-sm); }
	.sf-text-xl { font-size: var(--sf-text-xl); }
	.sf-text-xs { font-size: var(--sf-text-xs); }
	.sf-leading-loose { line-height: var(--sf-leading-loose); }
	.sf-leading-none { line-height: var(--sf-leading-none); }
	.sf-leading-normal { line-height: var(--sf-leading-normal); }
	.sf-leading-relaxed { line-height: var(--sf-leading-relaxed); }
	.sf-leading-snug { line-height: var(--sf-leading-snug); }
	.sf-leading-tight { line-height: var(--sf-leading-tight); }
	.sf-tracking-normal { letter-spacing: var(--sf-tracking-normal); }
	.sf-tracking-tight { letter-spacing: var(--sf-tracking-tight); }
	.sf-tracking-wide { letter-spacing: var(--sf-tracking-wide); }

	/* ── Radius ─────────────────────────────────────────── */
	.sf-radius-0 { border-radius: var(--sf-radius-0); }
	.sf-radius-1 { border-radius: var(--sf-radius-1); }
	.sf-radius-2 { border-radius: var(--sf-radius-2); }
	.sf-radius-3 { border-radius: var(--sf-radius-3); }
	.sf-radius-full { border-radius: var(--sf-radius-full); }

	/* ── Spacing — sets runtime --sf-gap / --sf-padding for layout primitives ─────────────────────────────────────────── */
	.sf-gap-2xs { --sf-gap: var(--sf-spacing-2xs); }
	.sf-gap-lg { --sf-gap: var(--sf-spacing-lg); }
	.sf-gap-md { --sf-gap: var(--sf-spacing-md); }
	.sf-gap-none { --sf-gap: var(--sf-spacing-none); }
	.sf-gap-sm { --sf-gap: var(--sf-spacing-sm); }
	.sf-gap-xl { --sf-gap: var(--sf-spacing-xl); }
	.sf-gap-xs { --sf-gap: var(--sf-spacing-xs); }
	.sf-padding-2xs { --sf-padding: var(--sf-spacing-2xs); }
	.sf-padding-lg { --sf-padding: var(--sf-spacing-lg); }
	.sf-padding-md { --sf-padding: var(--sf-spacing-md); }
	.sf-padding-none { --sf-padding: var(--sf-spacing-none); }
	.sf-padding-sm { --sf-padding: var(--sf-spacing-sm); }
	.sf-padding-xl { --sf-padding: var(--sf-spacing-xl); }
	.sf-padding-xs { --sf-padding: var(--sf-spacing-xs); }

	/* ── Shadow — shape × theme colour at theme opacity; inline --sf-shadow-color overrides ─────────────────────────────────────────── */
	.sf-shadow-lg { box-shadow: var(--sf-shadow-lg) var(--sf-shadow-color, rgb(var(--sf-shadow) / var(--sf-shadow-opacity))); }
	.sf-shadow-md { box-shadow: var(--sf-shadow-md) var(--sf-shadow-color, rgb(var(--sf-shadow) / var(--sf-shadow-opacity))); }
	.sf-shadow-sm { box-shadow: var(--sf-shadow-sm) var(--sf-shadow-color, rgb(var(--sf-shadow) / var(--sf-shadow-opacity))); }
	.sf-shadow-xl { box-shadow: var(--sf-shadow-xl) var(--sf-shadow-color, rgb(var(--sf-shadow) / var(--sf-shadow-opacity))); }

	/* ── Opacity — element-wide alpha; separate scale from channel-tint alphas ─────────────────────────────────────────── */
	.sf-opacity-1 { opacity: var(--sf-opacity-1); }
	.sf-opacity-2 { opacity: var(--sf-opacity-2); }
	.sf-opacity-3 { opacity: var(--sf-opacity-3); }
	.sf-opacity-4 { opacity: var(--sf-opacity-4); }
	.sf-opacity-5 { opacity: var(--sf-opacity-5); }
	.sf-opacity-6 { opacity: var(--sf-opacity-6); }
	.sf-opacity-7 { opacity: var(--sf-opacity-7); }
}

@layer sf-state {
	.sf-drag-handle.sf-is-contained.sf-on-dragging {
		border-color: transparent;
		border-right-color: rgb(var(--sf-border_color));
	}
	.sf-drag-handle.sf-on-dragging {
		color: rgb(var(--sf-primary));
		border-color: rgb(var(--sf-primary));
		background: rgb(var(--sf-primary) / var(--sf-alpha-1));
	}
	.sf-drag-handle.sf-on-hover:hover {
		color: rgb(var(--sf-primary));
	}
	.sf-is-error.sf-on-focus:focus-visible {
		border-color: rgb(var(--sf-danger));
	}
	.sf-is-loading.sf-on-disabled:disabled {
		cursor: progress;
	}
	.sf-loudness-2.sf-on-hover:hover {
		background: rgb(from currentColor r g b / var(--sf-alpha-2));
	}
	.sf-loudness-2.sf-variant-danger.sf-on-hover:hover {
		background: color-mix(in oklab, rgb(var(--sf-danger)) 25%, rgb(var(--sf-surface-0)));
	}
	.sf-loudness-2.sf-variant-featured.sf-on-hover:hover {
		background: color-mix(in oklab, rgb(var(--sf-primary)) 25%, rgb(var(--sf-surface-0)));
	}
	.sf-loudness-2.sf-variant-info.sf-on-hover:hover {
		background: color-mix(in oklab, rgb(var(--sf-info)) 25%, rgb(var(--sf-surface-0)));
	}
	.sf-loudness-2.sf-variant-primary.sf-on-hover:hover {
		background: color-mix(in oklab, rgb(var(--sf-primary)) 25%, rgb(var(--sf-surface-0)));
	}
	.sf-loudness-2.sf-variant-success.sf-on-hover:hover {
		background: color-mix(in oklab, rgb(var(--sf-success)) 25%, rgb(var(--sf-surface-0)));
	}
	.sf-loudness-2.sf-variant-warning.sf-on-hover:hover {
		background: color-mix(in oklab, rgb(var(--sf-warning)) 25%, rgb(var(--sf-surface-0)));
	}
	.sf-loudness-3.sf-on-hover:hover {
		background: rgb(var(--sf-fg_primary) / 0.85);
		color: rgb(var(--sf-fg_inverted));
	}
	.sf-loudness-3.sf-variant-danger.sf-on-hover:hover {
		background: rgb(var(--sf-danger) / 0.85);
		color: rgb(var(--sf-fg_on_danger));
	}
	.sf-loudness-3.sf-variant-featured.sf-on-hover:hover {
		background: rgb(var(--sf-primary) / 0.85);
		color: rgb(var(--sf-fg_on_primary));
	}
	.sf-loudness-3.sf-variant-info.sf-on-hover:hover {
		background: rgb(var(--sf-info) / 0.85);
		color: rgb(var(--sf-fg_on_info));
	}
	.sf-loudness-3.sf-variant-primary.sf-on-hover:hover {
		background: rgb(var(--sf-primary) / 0.85);
		color: rgb(var(--sf-fg_on_primary));
	}
	.sf-loudness-3.sf-variant-success.sf-on-hover:hover {
		background: rgb(var(--sf-success) / 0.85);
		color: rgb(var(--sf-fg_on_success));
	}
	.sf-loudness-3.sf-variant-warning.sf-on-hover:hover {
		background: rgb(var(--sf-warning) / 0.85);
		color: rgb(var(--sf-fg_on_warning));
	}
	.sf-on-ancestor {
		color: rgba(var(--sf-primary) / var(--sf-alpha-7));
	}
	.sf-on-current {
		background: rgb(from currentColor r g b / var(--sf-alpha-1));
		border-color: rgb(from currentColor r g b / var(--sf-alpha-4));
		color: rgb(var(--sf-primary));
	}
	.sf-on-current.sf-on-hover:hover {
		background: rgb(from currentColor r g b / var(--sf-alpha-2));
		color: rgb(var(--sf-primary));
	}
	.sf-on-disabled:disabled {
		opacity: 0.4;
		cursor: not-allowed;
	}
	.sf-on-focus:focus-visible {
		border-color: rgb(var(--sf-primary));
	}
	.sf-on-hover:hover {
		color: inherit;
		background: rgb(from currentColor r g b / var(--sf-alpha-1));
	}
	.sf-on-selected {
		outline: var(--sf-stroke-3) solid rgba(var(--sf-primary) / var(--sf-alpha-2));
	}
	.sf-swatch.sf-on-hover:hover {
		outline: var(--sf-stroke-2) solid rgb(var(--sf-primary) / var(--sf-alpha-4));
		outline-offset: var(--sf-stroke-1);
	}
	.sf-thumb.sf-on-current {
		background: rgb(var(--sf-primary));
		color: rgb(var(--sf-fg_on_primary));
	}
	.sf-variant-danger.sf-on-current {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-danger)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h);
	}
	.sf-variant-danger.sf-on-current.sf-on-hover:hover {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-danger)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h);
	}
	.sf-variant-danger.sf-on-hover:hover {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-danger)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h);
	}
	.sf-variant-info.sf-on-current {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-info)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h);
	}
	.sf-variant-info.sf-on-current.sf-on-hover:hover {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-info)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h);
	}
	.sf-variant-success.sf-on-current {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-success)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h);
	}
	.sf-variant-success.sf-on-current.sf-on-hover:hover {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-success)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h);
	}
	.sf-variant-warning.sf-on-current {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-warning)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h);
	}
	.sf-variant-warning.sf-on-current.sf-on-hover:hover {
		color: oklch(from color-mix(in oklab, rgb(var(--sf-warning)) 50%, rgb(var(--sf-fg_primary))) l calc(c * 2) h);
	}
	.sf-loudness-2.sf-on-active:active {
		background: rgb(from currentColor r g b / var(--sf-alpha-3));
	}
	.sf-loudness-2.sf-variant-danger.sf-on-active:active {
		background: color-mix(in oklab, rgb(var(--sf-danger)) 35%, rgb(var(--sf-surface-0)));
	}
	.sf-loudness-2.sf-variant-featured.sf-on-active:active {
		background: color-mix(in oklab, rgb(var(--sf-primary)) 35%, rgb(var(--sf-surface-0)));
	}
	.sf-loudness-2.sf-variant-info.sf-on-active:active {
		background: color-mix(in oklab, rgb(var(--sf-info)) 35%, rgb(var(--sf-surface-0)));
	}
	.sf-loudness-2.sf-variant-primary.sf-on-active:active {
		background: color-mix(in oklab, rgb(var(--sf-primary)) 35%, rgb(var(--sf-surface-0)));
	}
	.sf-loudness-2.sf-variant-success.sf-on-active:active {
		background: color-mix(in oklab, rgb(var(--sf-success)) 35%, rgb(var(--sf-surface-0)));
	}
	.sf-loudness-2.sf-variant-warning.sf-on-active:active {
		background: color-mix(in oklab, rgb(var(--sf-warning)) 35%, rgb(var(--sf-surface-0)));
	}
	.sf-loudness-3.sf-on-active:active {
		background: rgb(var(--sf-fg_primary) / 0.7);
	}
	.sf-loudness-3.sf-variant-danger.sf-on-active:active {
		background: rgb(var(--sf-danger) / 0.7);
	}
	.sf-loudness-3.sf-variant-featured.sf-on-active:active {
		background: rgb(var(--sf-primary) / 0.7);
	}
	.sf-loudness-3.sf-variant-info.sf-on-active:active {
		background: rgb(var(--sf-info) / 0.7);
	}
	.sf-loudness-3.sf-variant-primary.sf-on-active:active {
		background: rgb(var(--sf-primary) / 0.7);
	}
	.sf-loudness-3.sf-variant-success.sf-on-active:active {
		background: rgb(var(--sf-success) / 0.7);
	}
	.sf-loudness-3.sf-variant-warning.sf-on-active:active {
		background: rgb(var(--sf-warning) / 0.7);
	}
	.sf-on-active:active {
		background: rgb(from currentColor r g b / var(--sf-alpha-2));
	}
	.sf-on-active.sf-on-current:active {
		background: rgb(from currentColor r g b / var(--sf-alpha-3));
	}
	.sf-size-2xs.sf-on-selected {
		outline: var(--sf-stroke-2) solid rgb(var(--sf-primary));
		outline-offset: var(--sf-stroke-1);
	}
	.sf-size-xs.sf-on-selected {
		outline: var(--sf-stroke-2) solid rgb(var(--sf-primary));
		outline-offset: var(--sf-stroke-1);
	}
}

@layer sl-layout {
	.sl-scroll-frame:has(> .sl-scroll-x.sf-is-overflow-left .sl-pin-left, > :where([data-node-view-wrapper]) > .sl-scroll-x.sf-is-overflow-left .sl-pin-left, > :where([data-node-view-content]) > .sl-scroll-x.sf-is-overflow-left .sl-pin-left, > :where([data-node-view-content]) > :where([data-node-view-wrapper]) > .sl-scroll-x.sf-is-overflow-left .sl-pin-left)::before {
		opacity: 0;
	}
	.sl-scroll-frame:has(> .sl-scroll-x.sf-is-overflow-left, > :where([data-node-view-wrapper]) > .sl-scroll-x.sf-is-overflow-left, > :where([data-node-view-content]) > .sl-scroll-x.sf-is-overflow-left, > :where([data-node-view-content]) > :where([data-node-view-wrapper]) > .sl-scroll-x.sf-is-overflow-left)::before {
		opacity: 1;
	}
	.sl-scroll-frame:has(> .sl-scroll-x.sf-is-overflow-right .sl-pin-right, > :where([data-node-view-wrapper]) > .sl-scroll-x.sf-is-overflow-right .sl-pin-right, > :where([data-node-view-content]) > .sl-scroll-x.sf-is-overflow-right .sl-pin-right, > :where([data-node-view-content]) > :where([data-node-view-wrapper]) > .sl-scroll-x.sf-is-overflow-right .sl-pin-right)::after {
		opacity: 0;
	}
	.sl-scroll-frame:has(> .sl-scroll-x.sf-is-overflow-right, > :where([data-node-view-wrapper]) > .sl-scroll-x.sf-is-overflow-right, > :where([data-node-view-content]) > .sl-scroll-x.sf-is-overflow-right, > :where([data-node-view-content]) > :where([data-node-view-wrapper]) > .sl-scroll-x.sf-is-overflow-right)::after {
		opacity: 1;
	}
	.sl-scroll-frame:has(> .sl-scroll-x, > :where([data-node-view-wrapper]) > .sl-scroll-x, > :where([data-node-view-content]) > .sl-scroll-x, > :where([data-node-view-content]) > :where([data-node-view-wrapper]) > .sl-scroll-x)::after {
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: var(--sf-spacing-xs);
		width: 0;
		height: 0;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-left: 5px solid rgb(var(--sf-fg_primary) / var(--sf-alpha-5));
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.15s ease;
		z-index: 1;
	}
	.sl-scroll-frame:has(> .sl-scroll-x, > :where([data-node-view-wrapper]) > .sl-scroll-x, > :where([data-node-view-content]) > .sl-scroll-x, > :where([data-node-view-content]) > :where([data-node-view-wrapper]) > .sl-scroll-x)::before {
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: var(--sf-spacing-xs);
		width: 0;
		height: 0;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-right: 5px solid rgb(var(--sf-fg_primary) / var(--sf-alpha-5));
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.15s ease;
		z-index: 1;
	}
	.sl-scroll-x {
		scrollbar-width: none;
	}
	.sl-scroll-x::-webkit-scrollbar {
		display: none;
	}
}

@layer sl-layout {
	.sl-aspect-1-1 { aspect-ratio: 1; }
	.sl-aspect-16-9 { aspect-ratio: 16/9; }
	.sl-aspect-4-3 { aspect-ratio: 4/3; }
	.sl-aspect-9-16 { aspect-ratio: 9/16; }
	.sl-center { max-width: var(--sl-measure, 65ch); margin-inline: auto; padding-inline: var(--sf-padding); }
	.sl-cluster { display: flex; flex-wrap: wrap; gap: var(--sf-gap, var(--sf-spacing-md)); align-items: center; }
	.sl-columns { display: grid; grid-template-columns: var(--sl-cols, repeat(auto-fit, minmax(0, 1fr))); gap: var(--sf-gap, var(--sf-spacing-md)); }
	.sl-cover { display: grid; place-items: center; min-height: var(--sl-cover-min, 100dvh); gap: var(--sf-gap, var(--sf-spacing-md)); }
	.sl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--sl-min, 250px), 1fr)); gap: var(--sf-gap, var(--sf-spacing-md)); }
	.sl-inset {
		display: grid;
		--sfx-inset-width: var(--sf-width_page);
		grid-template-columns: [full-start] max(var(--sfx-inset-margin, var(--sf-spacing_page)), (100% - var(--sfx-inset-width)) / 2) [content-start] minmax(0, 1fr) [content-end] max(var(--sfx-inset-margin, var(--sf-spacing_page)), (100% - var(--sfx-inset-width)) / 2) [full-end];
		padding-inline: 0;
		row-gap: var(--sf-gap, var(--sf-spacing-md));
		align-content: start;
	}
	:is(.sl-inset, .sl-inset > :where([data-node-view-content])) > * { grid-column: content; }
	:is(.sf-depth-1, .sf-depth-2, .sf-depth-3).sl-inset { --sfx-inset-margin: var(--sf-padding, 0px); --sfx-inset-width: 100%; }
	.sl-pin-bottom:where(:not([data-node-view-wrapper] > *)) { position: sticky; bottom: 0; z-index: 1; }
	.sl-pin-left:where(:not([data-node-view-wrapper] > *)) { position: sticky; left: 0; z-index: 1; }
	.sl-pin-right:where(:not([data-node-view-wrapper] > *)) { position: sticky; right: 0; z-index: 1; }
	.sl-pin-top:where(:not([data-node-view-wrapper] > *)) { position: sticky; top: 0; z-index: 1; }
	.sl-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
	.sl-scroll-frame { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
	.sl-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; }
	.sl-scroll-y { overflow-y: auto; }
	.sl-split { display: grid; grid-template-columns: var(--sl-template, auto 1fr); gap: var(--sf-gap, var(--sf-spacing-md)); align-items: start; }
	.sl-stack { display: flex; flex-direction: column; gap: var(--sf-gap, var(--sf-spacing-md)); }
	.sl-align-x-center { justify-items: center; }
	.sl-align-x-end { justify-items: end; }
	.sl-align-x-start { justify-items: start; }
	.sl-align-y-center { align-items: center; }
	.sl-align-y-end { align-items: end; }
	.sl-align-y-start { align-items: start; }
	.sl-stack:is(.sl-align-y-start, .sl-align-y-center, .sl-align-y-end) { align-items: stretch; }
	.sl-stack.sl-align-y-center { justify-content: center; }
	.sl-stack.sl-align-y-end { justify-content: end; }
	.sl-stack.sl-align-y-start { justify-content: start; }
	.sl-stack.sl-align-x-center { align-items: center; }
	.sl-stack.sl-align-x-end { align-items: end; }
	.sl-stack.sl-align-x-start { align-items: start; }
	.sl-cluster.sl-align-x-center { justify-content: center; }
	.sl-cluster.sl-align-x-end { justify-content: end; }
	.sl-cluster.sl-align-x-start { justify-content: start; }
	.sl-inset-line { padding-inline: max(var(--sfx-inset-margin, var(--sf-spacing_page)), (100% - var(--sfx-inset-width, 100%)) / 2); }
}

@layer sl-layout {
	img.sl-object-cover { object-fit: cover; width: 100%; display: block; }
	:is(.sl-object-cover, .sl-object-cover > :where([data-node-view-content])) > img:where(:not([data-node-view-wrapper], [data-node-view-wrapper] > *)):only-child, :is(.sl-object-cover, .sl-object-cover > :where([data-node-view-content])) > :where([data-node-view-wrapper]):only-child > img { object-fit: cover; width: 100%; height: 100%; display: block; }
	img.sl-object-contain { object-fit: contain; width: 100%; display: block; }
	:is(.sl-object-contain, .sl-object-contain > :where([data-node-view-content])) > img:where(:not([data-node-view-wrapper], [data-node-view-wrapper] > *)):only-child, :is(.sl-object-contain, .sl-object-contain > :where([data-node-view-content])) > :where([data-node-view-wrapper]):only-child > img { object-fit: contain; width: 100%; height: 100%; display: block; }
	img.sl-object-fill { object-fit: fill; width: 100%; display: block; }
	:is(.sl-object-fill, .sl-object-fill > :where([data-node-view-content])) > img:where(:not([data-node-view-wrapper], [data-node-view-wrapper] > *)):only-child, :is(.sl-object-fill, .sl-object-fill > :where([data-node-view-content])) > :where([data-node-view-wrapper]):only-child > img { object-fit: fill; width: 100%; height: 100%; display: block; }
	img.sl-object-none { object-fit: none; display: block; }
	:is(.sl-object-none, .sl-object-none > :where([data-node-view-content])) > img:where(:not([data-node-view-wrapper], [data-node-view-wrapper] > *)):only-child, :is(.sl-object-none, .sl-object-none > :where([data-node-view-content])) > :where([data-node-view-wrapper]):only-child > img { object-fit: none; display: block; }
}

@layer sl-layout {
	.sl-cluster.sl-scroll-x { flex-wrap: nowrap; }
	:is(.sl-cluster.sl-scroll-x, .sl-cluster.sl-scroll-x > :where([data-node-view-content])) > * { flex-shrink: 0; }
	:is(.sl-inset, .sl-inset > :where([data-node-view-content])) > .sl-bleed { grid-column: full; }
	:is(.sl-inset, .sl-inset > :where([data-node-view-content])) > .sl-bleed.sl-inset, :is(.sl-inset, .sl-inset > :where([data-node-view-content])) > :where([data-node-view-wrapper]) > .sl-bleed.sl-inset { --sfx-inset-margin: inherit; --sfx-inset-width: inherit; }
	.sl-scroll-x:has(.sl-pin-left) { padding-left: 0; }
	.sl-scroll-x:has(.sl-pin-right) { padding-right: 0; }
	.sl-scroll-y:has(.sl-pin-top) { padding-top: 0; }
	.sl-scroll-y:has(.sl-pin-bottom) { padding-bottom: 0; }
}

@layer sl-layout {
	.tiptap.ProseMirror { container: sf-document / inline-size; }
	:is(.sl-stack, .sl-cluster, .sl-columns, .sl-split, .sl-center, .sl-inset, .sl-grid):where(:not(.tiptap.ProseMirror :is(td, th, .sl-cluster, .sl-cover, .sl-align-x-start, .sl-align-x-center, .sl-align-x-end) *, .tiptap.ProseMirror :is(.sl-split:not([style*="--sl-template"]), .sl-split:not([style*="--sl-template"]) > :where([data-node-view-content])) > :first-child, .tiptap.ProseMirror :is(.sl-split:not([style*="--sl-template"]), .sl-split:not([style*="--sl-template"]) > :where([data-node-view-content])) > :first-child *)):where(:not([popover] *)):has(:is([class*="sl-collapse-"]):not([popover] *)) { container-type: inline-size; }
	[popover] :is(.sl-stack, .sl-cluster, .sl-columns, .sl-split, .sl-center, .sl-inset, .sl-grid):where(:not(.tiptap.ProseMirror :is(td, th, .sl-cluster, .sl-cover, .sl-align-x-start, .sl-align-x-center, .sl-align-x-end) *, .tiptap.ProseMirror :is(.sl-split:not([style*="--sl-template"]), .sl-split:not([style*="--sl-template"]) > :where([data-node-view-content])) > :first-child, .tiptap.ProseMirror :is(.sl-split:not([style*="--sl-template"]), .sl-split:not([style*="--sl-template"]) > :where([data-node-view-content])) > :first-child *)):has([class*="sl-collapse-"]) { container-type: inline-size; }
	:is(.sl-stack, .sl-cluster, .sl-columns, .sl-split, .sl-center, .sl-inset, .sl-grid):where(:not(.tiptap.ProseMirror :is(td, th, .sl-cluster, .sl-cover, .sl-align-x-start, .sl-align-x-center, .sl-align-x-end) *, .tiptap.ProseMirror :is(.sl-split:not([style*="--sl-template"]), .sl-split:not([style*="--sl-template"]) > :where([data-node-view-content])) > :first-child, .tiptap.ProseMirror :is(.sl-split:not([style*="--sl-template"]), .sl-split:not([style*="--sl-template"]) > :where([data-node-view-content])) > :first-child *)):where(:not(.tiptap.ProseMirror *)):where(:not([popover] *)):has(:is([class*="sl-hide-below-"], [class*="sl-show-below-"]):not([popover] *)) { container-type: inline-size; }
	[popover] :is(.sl-stack, .sl-cluster, .sl-columns, .sl-split, .sl-center, .sl-inset, .sl-grid):where(:not(.tiptap.ProseMirror :is(td, th, .sl-cluster, .sl-cover, .sl-align-x-start, .sl-align-x-center, .sl-align-x-end) *, .tiptap.ProseMirror :is(.sl-split:not([style*="--sl-template"]), .sl-split:not([style*="--sl-template"]) > :where([data-node-view-content])) > :first-child, .tiptap.ProseMirror :is(.sl-split:not([style*="--sl-template"]), .sl-split:not([style*="--sl-template"]) > :where([data-node-view-content])) > :first-child *)):where(:not(.tiptap.ProseMirror *)):has([class*="sl-hide-below-"], [class*="sl-show-below-"]) { container-type: inline-size; }
	@container (width <= 380px) {
		.sl-columns.sl-collapse-xs,
		.sl-split.sl-collapse-xs,
		.sl-grid.sl-collapse-xs { grid-template-columns: 1fr; }
		.sl-cluster.sl-collapse-xs { flex-direction: column; align-items: stretch; }
		.sl-hide-below-xs:where(:not(.tiptap.ProseMirror *)) { display: none; }
	}
	@container (width > 380px) {
		.sl-show-below-xs:where(:not(.tiptap.ProseMirror *)) { display: none; }
	}
	@container sf-document (width <= 380px) {
		:where(.tiptap.ProseMirror) .sl-hide-below-xs:where(:not([data-node-view-wrapper] > *)) { display: none; }
	}
	@container sf-document (width > 380px) {
		:where(.tiptap.ProseMirror) .sl-show-below-xs:where(:not([data-node-view-wrapper] > *)) { display: none; }
	}
	@container (width <= 640px) {
		.sl-columns.sl-collapse-sm,
		.sl-split.sl-collapse-sm,
		.sl-grid.sl-collapse-sm { grid-template-columns: 1fr; }
		.sl-cluster.sl-collapse-sm { flex-direction: column; align-items: stretch; }
		.sl-hide-below-sm:where(:not(.tiptap.ProseMirror *)) { display: none; }
	}
	@container (width > 640px) {
		.sl-show-below-sm:where(:not(.tiptap.ProseMirror *)) { display: none; }
	}
	@container sf-document (width <= 640px) {
		:where(.tiptap.ProseMirror) .sl-hide-below-sm:where(:not([data-node-view-wrapper] > *)) { display: none; }
	}
	@container sf-document (width > 640px) {
		:where(.tiptap.ProseMirror) .sl-show-below-sm:where(:not([data-node-view-wrapper] > *)) { display: none; }
	}
	@container (width <= 768px) {
		.sl-columns.sl-collapse-md,
		.sl-split.sl-collapse-md,
		.sl-grid.sl-collapse-md { grid-template-columns: 1fr; }
		.sl-cluster.sl-collapse-md { flex-direction: column; align-items: stretch; }
		.sl-hide-below-md:where(:not(.tiptap.ProseMirror *)) { display: none; }
	}
	@container (width > 768px) {
		.sl-show-below-md:where(:not(.tiptap.ProseMirror *)) { display: none; }
	}
	@container sf-document (width <= 768px) {
		:where(.tiptap.ProseMirror) .sl-hide-below-md:where(:not([data-node-view-wrapper] > *)) { display: none; }
	}
	@container sf-document (width > 768px) {
		:where(.tiptap.ProseMirror) .sl-show-below-md:where(:not([data-node-view-wrapper] > *)) { display: none; }
	}
}

@layer sl-layout {
	[data-node-view-wrapper]:where(:not(.tiptap.ProseMirror :is(td, th, .sl-cluster, .sl-cover, .sl-align-x-start, .sl-align-x-center, .sl-align-x-end) *, .tiptap.ProseMirror :is(.sl-split:not([style*="--sl-template"]), .sl-split:not([style*="--sl-template"]) > :where([data-node-view-content])) > :first-child, .tiptap.ProseMirror :is(.sl-split:not([style*="--sl-template"]), .sl-split:not([style*="--sl-template"]) > :where([data-node-view-content])) > :first-child *)):has(> [class*="sl-collapse-"]) { container-type: inline-size; }
	:is(.sl-stack, .sl-cluster, .sl-columns, .sl-row, .sl-split, .sl-grid, .sl-inset, .sl-cover) > [data-node-view-content] { display: contents; }
}

@layer reset {
	.tiptap:where(:not(.sl-stack, .sl-cluster, .sl-columns, .sl-row, .sl-split, .sl-grid, .sl-inset, .sl-cover)) > :where(:not(:last-child, :has(+ .ProseMirror-widget:last-child), .ProseMirror-widget)),
	.tiptap :where([data-node-view-content], [data-container], blockquote, li, li[data-checked] > div, td, th):where(:not(.sl-stack, .sl-cluster, .sl-columns, .sl-row, .sl-split, .sl-grid, .sl-inset, .sl-cover, :is(.sl-stack, .sl-cluster, .sl-columns, .sl-row, .sl-split, .sl-grid, .sl-inset, .sl-cover) > [data-node-view-content])) > :where(:not(:last-child, :has(+ .ProseMirror-widget:last-child), .ProseMirror-widget)) { margin-bottom: var(--sf-spacing-md); }
	/* List items sit closer than blocks. */
	.tiptap :where(li) { margin-bottom: var(--sf-spacing-xs); }
}

@layer reset {
	[data-youtube-video] > iframe[data-responsive] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* Editor-pairing classes — see sf-system.md "Colours and alpha". */
@layer sf-utility {
	/* ── Primary palette ─────────────────────────────────────────── */
	.sf-bg-primary-1 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-primary-1) / var(--sf-bg-alpha)); }
	.sf-bg-primary-2 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-primary-2) / var(--sf-bg-alpha)); }
	.sf-bg-primary-3 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-primary-3) / var(--sf-bg-alpha)); }
	.sf-bg-primary-4 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-primary-4) / var(--sf-bg-alpha)); }
	.sf-bg-primary-5 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-primary-5) / var(--sf-bg-alpha)); }
	.sf-bg-primary-6 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-primary-6) / var(--sf-bg-alpha)); }
	.sf-bg-primary-7 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-primary-7) / var(--sf-bg-alpha)); }
	.sf-bg-primary-8 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-primary-8) / var(--sf-bg-alpha)); }
	.sf-bg-primary-9 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-primary-9) / var(--sf-bg-alpha)); }
	.sf-color-primary-1 { --sf-color-alpha: 1; color: rgb(var(--sf-primary-1) / var(--sf-color-alpha)); }
	.sf-color-primary-2 { --sf-color-alpha: 1; color: rgb(var(--sf-primary-2) / var(--sf-color-alpha)); }
	.sf-color-primary-3 { --sf-color-alpha: 1; color: rgb(var(--sf-primary-3) / var(--sf-color-alpha)); }
	.sf-color-primary-4 { --sf-color-alpha: 1; color: rgb(var(--sf-primary-4) / var(--sf-color-alpha)); }
	.sf-color-primary-5 { --sf-color-alpha: 1; color: rgb(var(--sf-primary-5) / var(--sf-color-alpha)); }
	.sf-color-primary-6 { --sf-color-alpha: 1; color: rgb(var(--sf-primary-6) / var(--sf-color-alpha)); }
	.sf-color-primary-7 { --sf-color-alpha: 1; color: rgb(var(--sf-primary-7) / var(--sf-color-alpha)); }
	.sf-color-primary-8 { --sf-color-alpha: 1; color: rgb(var(--sf-primary-8) / var(--sf-color-alpha)); }
	.sf-color-primary-9 { --sf-color-alpha: 1; color: rgb(var(--sf-primary-9) / var(--sf-color-alpha)); }
	.sf-border-primary-1 { --sf-border-alpha: 1; border-color: rgb(var(--sf-primary-1) / var(--sf-border-alpha)); }
	.sf-border-primary-2 { --sf-border-alpha: 1; border-color: rgb(var(--sf-primary-2) / var(--sf-border-alpha)); }
	.sf-border-primary-3 { --sf-border-alpha: 1; border-color: rgb(var(--sf-primary-3) / var(--sf-border-alpha)); }
	.sf-border-primary-4 { --sf-border-alpha: 1; border-color: rgb(var(--sf-primary-4) / var(--sf-border-alpha)); }
	.sf-border-primary-5 { --sf-border-alpha: 1; border-color: rgb(var(--sf-primary-5) / var(--sf-border-alpha)); }
	.sf-border-primary-6 { --sf-border-alpha: 1; border-color: rgb(var(--sf-primary-6) / var(--sf-border-alpha)); }
	.sf-border-primary-7 { --sf-border-alpha: 1; border-color: rgb(var(--sf-primary-7) / var(--sf-border-alpha)); }
	.sf-border-primary-8 { --sf-border-alpha: 1; border-color: rgb(var(--sf-primary-8) / var(--sf-border-alpha)); }
	.sf-border-primary-9 { --sf-border-alpha: 1; border-color: rgb(var(--sf-primary-9) / var(--sf-border-alpha)); }
	.sf-shadow-color-primary-1 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-primary-1) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-primary-2 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-primary-2) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-primary-3 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-primary-3) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-primary-4 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-primary-4) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-primary-5 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-primary-5) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-primary-6 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-primary-6) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-primary-7 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-primary-7) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-primary-8 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-primary-8) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-primary-9 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-primary-9) / var(--sf-shadow-alpha)); }

	/* ── Surface palette ─────────────────────────────────────────── */
	.sf-bg-surface-0 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-surface-0) / var(--sf-bg-alpha)); }
	.sf-bg-surface-1 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-surface-1) / var(--sf-bg-alpha)); }
	.sf-bg-surface-2 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-surface-2) / var(--sf-bg-alpha)); }
	.sf-bg-surface-3 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-surface-3) / var(--sf-bg-alpha)); }
	.sf-bg-surface-4 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-surface-4) / var(--sf-bg-alpha)); }
	.sf-bg-surface-5 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-surface-5) / var(--sf-bg-alpha)); }
	.sf-bg-surface-6 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-surface-6) / var(--sf-bg-alpha)); }
	.sf-bg-surface-7 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-surface-7) / var(--sf-bg-alpha)); }
	.sf-bg-surface-8 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-surface-8) / var(--sf-bg-alpha)); }
	.sf-bg-surface-9 { --sf-bg-alpha: 1; background-color: rgb(var(--sf-surface-9) / var(--sf-bg-alpha)); }
	.sf-color-surface-0 { --sf-color-alpha: 1; color: rgb(var(--sf-surface-0) / var(--sf-color-alpha)); }
	.sf-color-surface-1 { --sf-color-alpha: 1; color: rgb(var(--sf-surface-1) / var(--sf-color-alpha)); }
	.sf-color-surface-2 { --sf-color-alpha: 1; color: rgb(var(--sf-surface-2) / var(--sf-color-alpha)); }
	.sf-color-surface-3 { --sf-color-alpha: 1; color: rgb(var(--sf-surface-3) / var(--sf-color-alpha)); }
	.sf-color-surface-4 { --sf-color-alpha: 1; color: rgb(var(--sf-surface-4) / var(--sf-color-alpha)); }
	.sf-color-surface-5 { --sf-color-alpha: 1; color: rgb(var(--sf-surface-5) / var(--sf-color-alpha)); }
	.sf-color-surface-6 { --sf-color-alpha: 1; color: rgb(var(--sf-surface-6) / var(--sf-color-alpha)); }
	.sf-color-surface-7 { --sf-color-alpha: 1; color: rgb(var(--sf-surface-7) / var(--sf-color-alpha)); }
	.sf-color-surface-8 { --sf-color-alpha: 1; color: rgb(var(--sf-surface-8) / var(--sf-color-alpha)); }
	.sf-color-surface-9 { --sf-color-alpha: 1; color: rgb(var(--sf-surface-9) / var(--sf-color-alpha)); }
	.sf-border-surface-0 { --sf-border-alpha: 1; border-color: rgb(var(--sf-surface-0) / var(--sf-border-alpha)); }
	.sf-border-surface-1 { --sf-border-alpha: 1; border-color: rgb(var(--sf-surface-1) / var(--sf-border-alpha)); }
	.sf-border-surface-2 { --sf-border-alpha: 1; border-color: rgb(var(--sf-surface-2) / var(--sf-border-alpha)); }
	.sf-border-surface-3 { --sf-border-alpha: 1; border-color: rgb(var(--sf-surface-3) / var(--sf-border-alpha)); }
	.sf-border-surface-4 { --sf-border-alpha: 1; border-color: rgb(var(--sf-surface-4) / var(--sf-border-alpha)); }
	.sf-border-surface-5 { --sf-border-alpha: 1; border-color: rgb(var(--sf-surface-5) / var(--sf-border-alpha)); }
	.sf-border-surface-6 { --sf-border-alpha: 1; border-color: rgb(var(--sf-surface-6) / var(--sf-border-alpha)); }
	.sf-border-surface-7 { --sf-border-alpha: 1; border-color: rgb(var(--sf-surface-7) / var(--sf-border-alpha)); }
	.sf-border-surface-8 { --sf-border-alpha: 1; border-color: rgb(var(--sf-surface-8) / var(--sf-border-alpha)); }
	.sf-border-surface-9 { --sf-border-alpha: 1; border-color: rgb(var(--sf-surface-9) / var(--sf-border-alpha)); }
	.sf-shadow-color-surface-0 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-surface-0) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-surface-1 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-surface-1) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-surface-2 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-surface-2) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-surface-3 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-surface-3) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-surface-4 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-surface-4) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-surface-5 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-surface-5) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-surface-6 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-surface-6) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-surface-7 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-surface-7) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-surface-8 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-surface-8) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-surface-9 { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-surface-9) / var(--sf-shadow-alpha)); }

	/* ── Semantic — fg_primary ─────────────────────────────────────────── */
	.sf-bg-fg_primary { --sf-bg-alpha: 1; background-color: rgb(var(--sf-fg_primary) / var(--sf-bg-alpha)); }
	.sf-color-fg_primary { --sf-color-alpha: 1; color: rgb(var(--sf-fg_primary) / var(--sf-color-alpha)); }
	.sf-border-fg_primary { --sf-border-alpha: 1; border-color: rgb(var(--sf-fg_primary) / var(--sf-border-alpha)); }
	.sf-shadow-color-fg_primary { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-fg_primary) / var(--sf-shadow-alpha)); }

	/* ── Semantic — fg_inverted ─────────────────────────────────────────── */
	.sf-bg-fg_inverted { --sf-bg-alpha: 1; background-color: rgb(var(--sf-fg_inverted) / var(--sf-bg-alpha)); }
	.sf-color-fg_inverted { --sf-color-alpha: 1; color: rgb(var(--sf-fg_inverted) / var(--sf-color-alpha)); }
	.sf-border-fg_inverted { --sf-border-alpha: 1; border-color: rgb(var(--sf-fg_inverted) / var(--sf-border-alpha)); }
	.sf-shadow-color-fg_inverted { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-fg_inverted) / var(--sf-shadow-alpha)); }

	/* ── Semantic — border_color ─────────────────────────────────────────── */
	.sf-bg-border_color { --sf-bg-alpha: 1; background-color: rgb(var(--sf-border_color) / var(--sf-bg-alpha)); }
	.sf-color-border_color { --sf-color-alpha: 1; color: rgb(var(--sf-border_color) / var(--sf-color-alpha)); }
	.sf-border-border_color { --sf-border-alpha: 1; border-color: rgb(var(--sf-border_color) / var(--sf-border-alpha)); }
	.sf-shadow-color-border_color { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-border_color) / var(--sf-shadow-alpha)); }

	/* ── Semantic — shadow ─────────────────────────────────────────── */
	.sf-bg-shadow { --sf-bg-alpha: 1; background-color: rgb(var(--sf-shadow) / var(--sf-bg-alpha)); }
	.sf-color-shadow { --sf-color-alpha: 1; color: rgb(var(--sf-shadow) / var(--sf-color-alpha)); }
	.sf-border-shadow { --sf-border-alpha: 1; border-color: rgb(var(--sf-shadow) / var(--sf-border-alpha)); }
	.sf-shadow-color-shadow { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-shadow) / var(--sf-shadow-alpha)); }

	/* ── Semantic — danger ─────────────────────────────────────────── */
	.sf-bg-danger { --sf-bg-alpha: 1; background-color: rgb(var(--sf-danger) / var(--sf-bg-alpha)); }
	.sf-color-danger { --sf-color-alpha: 1; color: rgb(var(--sf-danger) / var(--sf-color-alpha)); }
	.sf-border-danger { --sf-border-alpha: 1; border-color: rgb(var(--sf-danger) / var(--sf-border-alpha)); }
	.sf-shadow-color-danger { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-danger) / var(--sf-shadow-alpha)); }

	/* ── fg_on ─────────────────────────────────────────── */
	.sf-bg-fg_on_danger { --sf-bg-alpha: 1; background-color: rgb(var(--sf-fg_on_danger) / var(--sf-bg-alpha)); }
	.sf-bg-fg_on_info { --sf-bg-alpha: 1; background-color: rgb(var(--sf-fg_on_info) / var(--sf-bg-alpha)); }
	.sf-bg-fg_on_primary { --sf-bg-alpha: 1; background-color: rgb(var(--sf-fg_on_primary) / var(--sf-bg-alpha)); }
	.sf-bg-fg_on_success { --sf-bg-alpha: 1; background-color: rgb(var(--sf-fg_on_success) / var(--sf-bg-alpha)); }
	.sf-bg-fg_on_warning { --sf-bg-alpha: 1; background-color: rgb(var(--sf-fg_on_warning) / var(--sf-bg-alpha)); }
	.sf-color-fg_on_danger { --sf-color-alpha: 1; color: rgb(var(--sf-fg_on_danger) / var(--sf-color-alpha)); }
	.sf-color-fg_on_info { --sf-color-alpha: 1; color: rgb(var(--sf-fg_on_info) / var(--sf-color-alpha)); }
	.sf-color-fg_on_primary { --sf-color-alpha: 1; color: rgb(var(--sf-fg_on_primary) / var(--sf-color-alpha)); }
	.sf-color-fg_on_success { --sf-color-alpha: 1; color: rgb(var(--sf-fg_on_success) / var(--sf-color-alpha)); }
	.sf-color-fg_on_warning { --sf-color-alpha: 1; color: rgb(var(--sf-fg_on_warning) / var(--sf-color-alpha)); }
	.sf-border-fg_on_danger { --sf-border-alpha: 1; border-color: rgb(var(--sf-fg_on_danger) / var(--sf-border-alpha)); }
	.sf-border-fg_on_info { --sf-border-alpha: 1; border-color: rgb(var(--sf-fg_on_info) / var(--sf-border-alpha)); }
	.sf-border-fg_on_primary { --sf-border-alpha: 1; border-color: rgb(var(--sf-fg_on_primary) / var(--sf-border-alpha)); }
	.sf-border-fg_on_success { --sf-border-alpha: 1; border-color: rgb(var(--sf-fg_on_success) / var(--sf-border-alpha)); }
	.sf-border-fg_on_warning { --sf-border-alpha: 1; border-color: rgb(var(--sf-fg_on_warning) / var(--sf-border-alpha)); }
	.sf-shadow-color-fg_on_danger { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-fg_on_danger) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-fg_on_info { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-fg_on_info) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-fg_on_primary { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-fg_on_primary) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-fg_on_success { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-fg_on_success) / var(--sf-shadow-alpha)); }
	.sf-shadow-color-fg_on_warning { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-fg_on_warning) / var(--sf-shadow-alpha)); }

	/* ── info ─────────────────────────────────────────── */
	.sf-bg-info { --sf-bg-alpha: 1; background-color: rgb(var(--sf-info) / var(--sf-bg-alpha)); }
	.sf-color-info { --sf-color-alpha: 1; color: rgb(var(--sf-info) / var(--sf-color-alpha)); }
	.sf-border-info { --sf-border-alpha: 1; border-color: rgb(var(--sf-info) / var(--sf-border-alpha)); }
	.sf-shadow-color-info { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-info) / var(--sf-shadow-alpha)); }

	/* ── success ─────────────────────────────────────────── */
	.sf-bg-success { --sf-bg-alpha: 1; background-color: rgb(var(--sf-success) / var(--sf-bg-alpha)); }
	.sf-color-success { --sf-color-alpha: 1; color: rgb(var(--sf-success) / var(--sf-color-alpha)); }
	.sf-border-success { --sf-border-alpha: 1; border-color: rgb(var(--sf-success) / var(--sf-border-alpha)); }
	.sf-shadow-color-success { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-success) / var(--sf-shadow-alpha)); }

	/* ── warning ─────────────────────────────────────────── */
	.sf-bg-warning { --sf-bg-alpha: 1; background-color: rgb(var(--sf-warning) / var(--sf-bg-alpha)); }
	.sf-color-warning { --sf-color-alpha: 1; color: rgb(var(--sf-warning) / var(--sf-color-alpha)); }
	.sf-border-warning { --sf-border-alpha: 1; border-color: rgb(var(--sf-warning) / var(--sf-border-alpha)); }
	.sf-shadow-color-warning { --sf-shadow-alpha: 1; --sf-shadow-color: rgb(var(--sf-warning) / var(--sf-shadow-alpha)); }

	/* ── Alpha pairings — last so they override the reset ─────────────────────────────────────────── */
	.sf-bg-alpha-1 { --sf-bg-alpha: var(--sf-alpha-1); }
	.sf-bg-alpha-2 { --sf-bg-alpha: var(--sf-alpha-2); }
	.sf-bg-alpha-3 { --sf-bg-alpha: var(--sf-alpha-3); }
	.sf-bg-alpha-4 { --sf-bg-alpha: var(--sf-alpha-4); }
	.sf-bg-alpha-5 { --sf-bg-alpha: var(--sf-alpha-5); }
	.sf-bg-alpha-6 { --sf-bg-alpha: var(--sf-alpha-6); }
	.sf-bg-alpha-7 { --sf-bg-alpha: var(--sf-alpha-7); }
	.sf-bg-alpha-8 { --sf-bg-alpha: var(--sf-alpha-8); }
	.sf-bg-alpha-9 { --sf-bg-alpha: var(--sf-alpha-9); }
	.sf-color-alpha-1 { --sf-color-alpha: var(--sf-alpha-1); }
	.sf-color-alpha-2 { --sf-color-alpha: var(--sf-alpha-2); }
	.sf-color-alpha-3 { --sf-color-alpha: var(--sf-alpha-3); }
	.sf-color-alpha-4 { --sf-color-alpha: var(--sf-alpha-4); }
	.sf-color-alpha-5 { --sf-color-alpha: var(--sf-alpha-5); }
	.sf-color-alpha-6 { --sf-color-alpha: var(--sf-alpha-6); }
	.sf-color-alpha-7 { --sf-color-alpha: var(--sf-alpha-7); }
	.sf-color-alpha-8 { --sf-color-alpha: var(--sf-alpha-8); }
	.sf-color-alpha-9 { --sf-color-alpha: var(--sf-alpha-9); }
	.sf-border-alpha-1 { --sf-border-alpha: var(--sf-alpha-1); }
	.sf-border-alpha-2 { --sf-border-alpha: var(--sf-alpha-2); }
	.sf-border-alpha-3 { --sf-border-alpha: var(--sf-alpha-3); }
	.sf-border-alpha-4 { --sf-border-alpha: var(--sf-alpha-4); }
	.sf-border-alpha-5 { --sf-border-alpha: var(--sf-alpha-5); }
	.sf-border-alpha-6 { --sf-border-alpha: var(--sf-alpha-6); }
	.sf-border-alpha-7 { --sf-border-alpha: var(--sf-alpha-7); }
	.sf-border-alpha-8 { --sf-border-alpha: var(--sf-alpha-8); }
	.sf-border-alpha-9 { --sf-border-alpha: var(--sf-alpha-9); }
	.sf-shadow-alpha-1 { --sf-shadow-alpha: var(--sf-alpha-1); }
	.sf-shadow-alpha-2 { --sf-shadow-alpha: var(--sf-alpha-2); }
	.sf-shadow-alpha-3 { --sf-shadow-alpha: var(--sf-alpha-3); }
	.sf-shadow-alpha-4 { --sf-shadow-alpha: var(--sf-alpha-4); }
	.sf-shadow-alpha-5 { --sf-shadow-alpha: var(--sf-alpha-5); }
	.sf-shadow-alpha-6 { --sf-shadow-alpha: var(--sf-alpha-6); }
	.sf-shadow-alpha-7 { --sf-shadow-alpha: var(--sf-alpha-7); }
	.sf-shadow-alpha-8 { --sf-shadow-alpha: var(--sf-alpha-8); }
	.sf-shadow-alpha-9 { --sf-shadow-alpha: var(--sf-alpha-9); }
}