.Icon.svelte-qdgjjt {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--w, 24px);
		height: var(--h, 24px);
		color: var(--fill, currentColor);
		line-height: 0;
	}
	.Icon.svelte-qdgjjt svg {
		width: 100%;
		height: 100%;
	}

	.sdocs-control.svelte-5eno0h {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
	}
	.sdocs-control-label.svelte-5eno0h {
		min-width: 100px;
		color: var(--color-base-600);
		font-weight: 600;
	}
	.sdocs-control-input.svelte-5eno0h {
		flex: 1;
		padding: 4px 8px;
		border: 1px solid var(--color-base-200);
		background: var(--color-base-0);
		color: var(--color-base-600);
		border-radius: 4px;
		font: inherit;
		font-size: 13px;
	}

	@media (max-width: 860px) {
		/* Safari zooms the page when it focuses a field under 16px, so the text
		   stays 16px. The height is border-box: as content-box the padding and
		   border sat OUTSIDE it and a 40px rule measured 50 — taller than the
		   select beside it, and heavier than this dense a table wants. */
		.sdocs-control-input.svelte-5eno0h {
			box-sizing: border-box;
			min-height: 36px;
			font-size: 16px;
		}
	}

	.sdocs-control.svelte-1b70bb {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
	}
	.sdocs-control-label.svelte-1b70bb {
		min-width: 100px;
		color: var(--color-base-600);
		font-weight: 600;
	}
	.sdocs-control-input.svelte-1b70bb {
		flex: 1;
		padding: 4px 8px;
		border: 1px solid var(--color-base-200);
		background: var(--color-base-0);
		color: var(--color-base-600);
		border-radius: 4px;
		font: inherit;
		font-size: 13px;
	}

	@media (max-width: 860px) {
		/* Safari zooms the page when it focuses a field under 16px, so the text
		   stays 16px. The height is border-box: as content-box the padding and
		   border sat OUTSIDE it and a 40px rule measured 50 — taller than the
		   select beside it, and heavier than this dense a table wants. */
		.sdocs-control-input.svelte-1b70bb {
			box-sizing: border-box;
			min-height: 36px;
			font-size: 16px;
		}
	}

	.sdocs-control.svelte-1r5ahxr {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
	}
	.sdocs-control-label.svelte-1r5ahxr {
		min-width: 100px;
		color: var(--color-base-600);
		font-weight: 600;
	}
	.sdocs-control-checkbox.svelte-1r5ahxr {
		width: 16px;
		height: 16px;
	}

	@media (max-width: 860px) {
		/* A 16px box is half the width of a fingertip. */
		.sdocs-control-checkbox.svelte-1r5ahxr {
			width: 20px;
			height: 20px;
		}
	}

	.sdocs-control.svelte-1v6pxsy {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
	}
	.sdocs-control-label.svelte-1v6pxsy {
		min-width: 100px;
		color: var(--color-base-600);
		font-weight: 600;
	}
	.sdocs-control-select.svelte-1v6pxsy {
		flex: 1;
		padding: 4px 8px;
		border: 1px solid var(--color-base-200);
		border-radius: 4px;
		font: inherit;
		font-size: 13px;
		background: var(--color-base-0);
		color: var(--color-base-600);
	}

	@media (max-width: 860px) {
		/* Safari zooms the page when it focuses a field under 16px, so the text
		   stays 16px. The height is border-box: as content-box the padding and
		   border sat OUTSIDE it and a 40px rule measured 50 — taller than the
		   select beside it, and heavier than this dense a table wants. */
		.sdocs-control-select.svelte-1v6pxsy {
			box-sizing: border-box;
			min-height: 36px;
			font-size: 16px;
		}
	}

	.sdocs-control.svelte-5z6eur {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
	}
	.sdocs-control-label.svelte-5z6eur {
		min-width: 100px;
		color: var(--color-base-600);
		font-weight: 600;
	}
	.sdocs-control-color.svelte-5z6eur {
		width: 32px;
		height: 24px;
		padding: 0;
		border: 1px solid var(--color-base-200);
		border-radius: 4px;
		cursor: pointer;
	}
	.sdocs-control-value.svelte-5z6eur {
		color: var(--color-base-500);
		font-family: var(--mono);
		font-size: 12px;
	}

	@media (max-width: 860px) {
		/* The swatch is the whole control — it has to be tappable. */
		.sdocs-control-color.svelte-5z6eur {
			width: 40px;
			height: 28px;
		}
	}

	.sdocs-control.svelte-1683ioe {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
	}
	.sdocs-control-label.svelte-1683ioe {
		min-width: 100px;
		color: var(--color-base-600);
		font-weight: 600;
	}
	.sdocs-control-dimension.svelte-1683ioe {
		display: flex;
		align-items: center;
		gap: 4px;
	}
	.sdocs-control-input.svelte-1683ioe {
		flex: 1;
		min-width: 0;
		padding: 4px 8px;
		border: 1px solid var(--color-base-200);
		border-radius: 4px;
		font: inherit;
		font-size: 13px;
		background: var(--color-base-0);
		color: var(--color-base-600);
	}
	.sdocs-control-unit.svelte-1683ioe {
		color: var(--color-base-400);
		font-size: 12px;
	}

	@media (max-width: 860px) {
		/* Safari zooms the page when it focuses a field under 16px, so the text
		   stays 16px. The height is border-box: as content-box the padding and
		   border sat OUTSIDE it and a 40px rule measured 50 — taller than the
		   select beside it, and heavier than this dense a table wants. */
		.sdocs-control-input.svelte-1683ioe {
			box-sizing: border-box;
			min-height: 36px;
			font-size: 16px;
		}
	}

	.NavTree.svelte-1v54o91 {
		font-size: 13px;
		line-height: 1.4;
		color: var(--font-color, #111827);
		display: flex;
		flex-direction: column;
		gap: 1px;
		padding: var(--p, 0);
		margin: var(--m, 0);
		border-radius: var(--r, 0);
		border: var(--b, none);
	}

	.NavTree-item.svelte-msgu5d {
		/* Shared by the chevron and by the space a chevron-less row reserves
		   in its place, so the two can't drift apart. */
		--chevron-w: 20px;
		display: flex;
		align-items: center;
		gap: 6px;
		width: 100%;
		/* A tree is a column flex container, so an over-full one compresses its
		   children rather than letting them overflow — `height` is a base size a
		   flex item is free to shrink below. Rows were squashing from 28px to 16
		   the moment the tree outgrew its pane, and only the ones sitting
		   directly in it: a row inside a branch wrapper was protected by the
		   wrapper absorbing the shrink instead. Hence docs and layouts, which sit
		   at the top level, and not the examples nested under a component. */
		flex-shrink: 0;
		/* Row height is settable so a touch context can ask for a bigger
		   target than the 28px a pointer is happy with. */
		height: var(--item-h, 28px);
		padding: var(--p, 0 5px 0 8px);
		margin: var(--m, 0);
		border-radius: var(--r, 0);
		border: var(--b, none);
		font: inherit;
		color: var(--font-color, inherit);
		font-weight: var(--font-weight, inherit);
		background: var(--bg, none);
		text-decoration: none;
		cursor: pointer;
		text-align: left;
		box-sizing: border-box;
	}

	.NavTree-item.svelte-msgu5d:hover {
		background: var(--bg-hover, var(--color-base-150));
		color: var(--font-color-hover, inherit);
		--expander-color: var(--expander-color-hover, var(--color-base-400));
	}

	.NavTree-item.active.svelte-msgu5d {
		background: var(--bg-active, var(--color-base-100));
		color: var(--font-color-active, inherit);
		font-weight: 500;
		--expander-color: var(--expander-color-active, var(--color-base-400));
	}

	.NavTree-item.active.svelte-msgu5d:hover {
		background: var(--bg-active-hover, var(--color-base-150));
		--expander-color: var(--expander-color-hover, var(--color-base-500));
	}

	/* The main button fills the row; the chevron rides beside it. */
	.NavTree-main.svelte-msgu5d {
		flex: 1;
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 6px;
		height: 100%;
		padding: 0;
		border: none;
		background: none;
		font: inherit;
		color: inherit;
		cursor: pointer;
		text-align: left;
	}

	/* A row with children spends its last 20px on the chevron. A row without
	   one reserves the same, so every label column ends at the same x — and
	   only expandable rows truncating early was never about the item, just
	   about whether it happened to have something to expand. The row gap
	   supplies the space before it, exactly as it does for the real chevron. */
	.NavTree-item.svelte-msgu5d:not(.NavTree-row)::after {
		content: '';
		flex: none;
		width: var(--chevron-w);
	}

	.NavTree-item-label.svelte-msgu5d {
		flex: 1;
		/* A long name trims to an ellipsis instead of wrapping or pushing the
		   chevron out; the title attribute keeps the full name reachable. */
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.NavTree-left.svelte-msgu5d {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
	}

	.NavTree-right.svelte-msgu5d {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
	}

	/* The chevron: a rounded-square toggle with its own hover/press. */
	.NavTree-chevron-btn.svelte-msgu5d {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--chevron-w);
		height: 20px;
		padding: 0;
		border: none;
		border-radius: 4px;
		background: none;
		cursor: pointer;
		transition: background-color 0.1s ease;
	}
	.NavTree-chevron-btn.svelte-msgu5d:hover {
		background: rgb(255 255 255 / 0.5);
	}
	.NavTree-chevron-btn.svelte-msgu5d:active {
		background: rgb(255 255 255 / 0.7);
	}

	/* Same reason: a whole branch must keep its natural height, or the rows
	   inside it are compressed by the wrapper giving way on their behalf. */
	.NavTree-item-wrapper.svelte-msgu5d {
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	.NavTree-children.svelte-msgu5d {
		padding-left: 16px;
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	.NavTree-group.svelte-1i6b7rf {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: var(--p, 0);
		margin: var(--m, 12px 0);
		border-radius: var(--r, 0);
		border: var(--b, none);
	}

	.NavTree-group-label.svelte-1i6b7rf {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 0 8px;
		border: none;
		background: none;
		font: inherit;
		font-size: 11px;
		font-weight: var(--font-weight, 600);
		color: var(--color-base-400);
		letter-spacing: 0.05em;
		text-transform: uppercase;
		cursor: pointer;
		text-align: left;
	}

	.NavTree-group-label.svelte-1i6b7rf:not(.is-static):hover {
		color: var(--color-base-600);
	}
	.NavTree-group-label.is-static.svelte-1i6b7rf {
		cursor: default;
	}

	.NavTree-group-text.svelte-1i6b7rf {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.NavTree-chevron.svelte-1i6b7rf {
		display: inline-flex;
		align-items: center;
		margin-left: auto;
	}

	.NavTree-group-children.svelte-1i6b7rf {
		padding-left: 0;
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	/* One accent per intent, and everything else reads from it — the icon, the
	   rule, the text. `info` borrows the action ramp: it is the blue this
	   system already has, and a fifth near-identical ramp would only be one
	   more thing to keep in step.

	   Low numbers sit near the page's background and high ones near its text,
	   in either theme — so `-100` behind `-700` is a tint under readable text
	   in light mode and stays one when the ramps invert for dark. */
	.Note.svelte-qyvy7n {
		--noteAccent: var(--color-base-400);
		--noteBg: var(--color-base-100);
		--noteText: var(--color-base-700);
		display: flex;
		/* The glyph sits against the middle of the text, however many lines it
		   runs to, rather than against the first one. */
		align-items: center;
		gap: 8px;
		box-sizing: border-box;
		width: 100%;
		padding: 5px 11px;
		border-radius: 6px;
		/* The accent shows as a spine down the left rather than a full border:
		   a ring in the intent colour competes with the content beside it. */
		border-left: 3px solid var(--noteAccent);
		background: var(--noteBg);
		font-size: 13px;
		line-height: 1.5;
		color: var(--noteText);
	}
	/* Colour follows the ranking, not the topic: the two defects are red, the
	   two caveats amber, and the two helpful ones cool. A reader should be able
	   to tell how much a note costs them without reading the word. */
	.Note[data-type='bug'].svelte-qyvy7n {
		--noteAccent: var(--color-danger-500);
		--noteBg: var(--color-danger-100);
		--noteText: var(--color-danger-700);
	}
	/* a11y is a defect, so it shares the bug's ramp — one step softer, because
	   it is the narrower of the two rather than a second alarm. */
	.Note[data-type='a11y'].svelte-qyvy7n {
		--noteAccent: var(--color-danger-400);
		--noteBg: var(--color-danger-100);
		--noteText: var(--color-danger-700);
	}
	.Note[data-type='warning'].svelte-qyvy7n {
		--noteAccent: var(--color-warning-500);
		--noteBg: var(--color-warning-100);
		--noteText: var(--color-warning-700);
	}
	.Note[data-type='perf'].svelte-qyvy7n {
		--noteAccent: var(--color-amber-400);
		--noteBg: var(--color-amber-100);
		--noteText: var(--color-amber-700);
	}
	.Note[data-type='tip'].svelte-qyvy7n {
		--noteAccent: var(--color-success-500);
		--noteBg: var(--color-success-100);
		--noteText: var(--color-success-700);
	}
	.Note[data-type='info'].svelte-qyvy7n {
		--noteAccent: var(--color-action-500);
		--noteBg: var(--color-action-100);
		--noteText: var(--color-action-700);
	}

	.Note-text.svelte-qyvy7n {
		flex: 1;
		min-width: 0;
		margin: 0;
		/* A note is written as prose, and a long one should read as prose. */
		overflow-wrap: anywhere;
	}

	.Note-close.svelte-qyvy7n {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		padding: 0;
		border: 0;
		border-radius: 4px;
		background: none;
		cursor: pointer;
		opacity: 0.7;
	}
	.Note-close.svelte-qyvy7n:hover {
		opacity: 1;
		background: color-mix(in oklch, var(--noteAccent) 15%, transparent);
	}

	.sdocs-sidebar.svelte-1ezqnug {
		width: 260px;
		/* A fixed-width nav column, not a share of the row. Without this the
		   sidebar is an ordinary flex item that gives up width whenever the
		   content beside it refuses to get narrower — a wide table, an
		   unwrappable code line, a layout stage with a min-width. Those live on
		   DOC and LAYOUT pages, so the tree appeared to shrink for exactly
		   those kinds and not for component pages. */
		flex-shrink: 0;
		height: 100%;
		overflow-y: auto;
		border-right: 1px solid var(--color-base-200);
		background: var(--color-base-0);
		display: flex;
		flex-direction: column;
		font-family: var(--sans);
		font-size: 13px;
	}
	.sdocs-sidebar-search.svelte-1ezqnug {
		padding: 8px;
		border-bottom: 1px solid var(--color-base-200);
	}
	.sdocs-search-input.svelte-1ezqnug {
		width: 100%;
		padding: 6px 10px;
		border: 1px solid var(--color-base-200);
		border-radius: 6px;
		font-size: 13px;
		outline: none;
		box-sizing: border-box;
		background: var(--color-base-0);
		color: var(--color-base-600);
	}
	.sdocs-search-input.svelte-1ezqnug:focus {
		border-color: var(--color-action-500);
		box-shadow: 0 0 0 2px var(--color-action-100);
	}
	.sdocs-sidebar-tree.svelte-1ezqnug {
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		/* Reserve the scrollbar's width whether or not one is showing. Without
		   this the pane loses ~15px the moment the tree outgrows it, so every
		   row narrows and the longer labels start truncating — a reflow caused
		   by expanding a folder, not by anything about the item itself. */
		scrollbar-gutter: stable;
		padding: 8px;
		/* Root items stack with the same 1px gap group children get. */
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	/* ── Drawer head: sections + close ── */
	.sdocs-drawer-head.svelte-1ezqnug {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		padding: 8px 8px 8px 10px;
		border-bottom: 1px solid var(--color-base-200);
	}
	/* Filled says the note is on this page; hollow says it is on something
	   under it. Small enough to sit beside a row's label without competing
	   with it — it marks, it doesn't announce. */
	.sdocs-note-dot.svelte-1ezqnug {
		display: block;
		width: 7px;
		height: 7px;
		border-radius: 999px;
		border: 1.5px solid var(--dot);
		--dot: var(--color-base-400);
	}
	.sdocs-note-dot.is-own.svelte-1ezqnug {
		background: var(--dot);
	}
	/* Same ramps the Note itself uses, so a dot and the alert it stands for are
	   recognisably the same thing. */
	.sdocs-note-dot[data-type='bug'].svelte-1ezqnug {
		--dot: var(--color-danger-500);
	}
	.sdocs-note-dot[data-type='a11y'].svelte-1ezqnug {
		--dot: var(--color-danger-400);
	}
	.sdocs-note-dot[data-type='warning'].svelte-1ezqnug {
		--dot: var(--color-warning-500);
	}
	.sdocs-note-dot[data-type='perf'].svelte-1ezqnug {
		--dot: var(--color-amber-400);
	}
	.sdocs-note-dot[data-type='tip'].svelte-1ezqnug {
		--dot: var(--color-success-500);
	}
	.sdocs-note-dot[data-type='info'].svelte-1ezqnug {
		--dot: var(--color-action-500);
	}

	/* The drawer wraps its sections into a row, so the rule stands the same way
	   it does in the bar. */
	.sdocs-drawer-divider.svelte-1ezqnug {
		flex: none;
		align-self: center;
		width: 1px;
		height: 18px;
		margin: 0 4px;
		background: var(--color-base-200);
	}
	.sdocs-drawer-sections.svelte-1ezqnug {
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		gap: 4px;
		min-width: 0;
	}
	.sdocs-drawer-section.svelte-1ezqnug {
		display: flex;
		align-items: center;
		min-height: 36px;
		padding: 0 12px;
		border-radius: 999px;
		font-size: 13px;
		font-weight: 500;
		color: var(--color-base-600);
		text-decoration: none;
	}
	.sdocs-drawer-section.svelte-1ezqnug:hover {
		background: var(--color-base-100);
	}
	.sdocs-drawer-section.is-active.svelte-1ezqnug {
		background: var(--color-action-100);
		color: var(--color-action-500);
	}
	.sdocs-drawer-close.svelte-1ezqnug {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 36px;
		height: 36px;
		border: none;
		border-radius: 8px;
		background: none;
		color: var(--color-base-500);
		cursor: pointer;
	}
	.sdocs-drawer-close.svelte-1ezqnug:hover {
		background: var(--color-base-100);
		color: var(--color-base-900);
	}

	/* ── Drawer foot: the top bar's stylesheet picker ── */
	.sdocs-drawer-foot.svelte-1ezqnug {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px;
		border-top: 1px solid var(--color-base-200);
	}
	.sdocs-drawer-foot-label.svelte-1ezqnug {
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--color-base-400);
	}
	.sdocs-drawer-preset.svelte-1ezqnug {
		flex: 1;
		min-height: 36px;
		padding: 4px 8px;
		border: 1px solid var(--color-base-200);
		border-radius: 6px;
		background: var(--color-base-0);
		color: var(--color-base-600);
		font-family: inherit;
		font-size: 13px;
		cursor: pointer;
	}
	.sdocs-drawer-preset.is-active.svelte-1ezqnug {
		border-color: var(--color-action-500);
		color: var(--color-base-900);
	}

	.sdocs-drawer-css.svelte-1ezqnug {
		flex: 1;
		min-width: 0;
		min-height: 36px;
		padding: 4px 8px;
		border: 1px solid var(--color-base-200);
		border-radius: 6px;
		background: var(--color-base-0);
		color: var(--color-base-600);
		font-size: 13px;
	}

	/* ── Off-canvas below the breakpoint ──
	   Driven by the media query, not a class, so a prerendered page paints
	   with the drawer already parked instead of flashing a 260px column while
	   it waits for hydration. Only `is-open` comes from state. */
	@media (max-width: 860px) {
		.sdocs-sidebar.svelte-1ezqnug {
			position: fixed;
			top: var(--sdocs-topbar-h, 48px);
			left: 0;
			bottom: 0;
			z-index: 50;
			width: min(320px, 86vw);
			transform: translateX(-100%);
			/* Parked off-screen it must also leave the tab order and the
			   accessibility tree — a translated element is still both. The
			   flip back to visible happens up front so the slide is watchable;
			   on the way out it waits for the slide to finish. */
			visibility: hidden;
			overscroll-behavior: contain;
			transition:
				transform 0.22s ease,
				visibility 0s linear 0.22s;
		}
		.sdocs-sidebar.is-open.svelte-1ezqnug {
			transform: translateX(0);
			visibility: visible;
			box-shadow: 0 8px 32px rgb(0 0 0 / 0.18);
			transition:
				transform 0.22s ease,
				visibility 0s;
		}
		.sdocs-nav-scrim.svelte-1ezqnug {
			position: fixed;
			top: var(--sdocs-topbar-h, 48px);
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 40;
			border: none;
			padding: 0;
			background: rgb(0 0 0 / 0.35);
			cursor: pointer;
		}
		.sdocs-sidebar-tree.svelte-1ezqnug {
			font-size: 14px;
			/* A 28px row is a comfortable pointer target and a poor thumb one. */
			--item-h: 40px;
		}
		.sdocs-search-input.svelte-1ezqnug {
			/* iOS Safari zooms the page for any font under 16px it focuses. */
			font-size: 16px;
			min-height: 40px;
		}
	}
	@media (prefers-reduced-motion: reduce) {
		.sdocs-sidebar.svelte-1ezqnug {
			transition: none;
		}
	}

	.sdocs-topbar.svelte-1aog7yg {
		/* Every control and button in the actions row is exactly this tall. */
		--sdocs-control-h: 24px;
		display: flex;
		align-items: center;
		gap: 24px;
		padding: 0 16px;
		height: var(--sdocs-topbar-h, 48px);
		flex-shrink: 0;
		border-bottom: 1px solid var(--color-base-200);
		background: var(--color-base-0);
		font-family: var(--sans);
	}
	.sdocs-burger.svelte-1aog7yg {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		margin-left: -8px;
		border: none;
		border-radius: 8px;
		background: none;
		color: var(--color-base-600);
		cursor: pointer;
	}
	.sdocs-burger.svelte-1aog7yg:hover {
		background: var(--color-base-100);
		color: var(--color-base-900);
	}
	.sdocs-topbar-brand.svelte-1aog7yg {
		display: flex;
		align-items: center;
		gap: 6px;
		font-weight: 700;
		font-size: 18px;
		color: var(--color-base-900);
		text-decoration: none;
	}
	.sdocs-topbar-logo.svelte-1aog7yg {
		width: 22px;
		height: 22px;
		object-fit: contain;
	}
	.sdocs-topbar-sections.svelte-1aog7yg {
		display: flex;
		align-items: stretch;
		gap: 4px;
		height: 100%;
		flex: 1;
		min-width: 0;
		overflow-x: auto;
	}
	.sdocs-topbar-divider.svelte-1aog7yg {
		flex: none;
		align-self: center;
		width: 1px;
		/* Short of the bar's full height: a rule that reaches the edges reads
		   as structure, and this only groups the tabs. */
		height: 18px;
		margin: 0 8px;
		background: var(--color-base-200);
	}
	.sdocs-topbar-tab.svelte-1aog7yg {
		display: flex;
		align-items: center;
		padding: 0 12px;
		font-size: 13px;
		font-weight: 500;
		color: var(--color-base-600);
		text-decoration: none;
		border-bottom: 2px solid transparent;
		white-space: nowrap;
	}
	.sdocs-topbar-tab.svelte-1aog7yg:hover {
		color: var(--color-base-900);
	}
	.sdocs-topbar-tab.is-active.svelte-1aog7yg {
		/* The label is text at 4.5:1; the underline beneath it is not, and keeps
		   the accent it was drawn in — 3:1 is the bar a non-text indicator has
		   to clear, and it does. */
		color: var(--color-action-600);
		border-bottom-color: var(--color-action-500);
	}
	.sdocs-topbar-actions.svelte-1aog7yg {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.sdocs-axis-picker.svelte-1aog7yg {
		box-sizing: border-box;
		height: var(--sdocs-control-h);
		font-size: 12px;
		padding: 0 4px;
		border: 1px solid var(--color-base-200);
		border-radius: 4px;
		background: var(--color-base-0);
		color: var(--color-base-600);
	}
	/* Segmented control: a track holding one pill per value. Deliberately
	   smaller than the buttons beside it — it carries words, not glyphs, and
	   at button size three of them would dominate the bar. */
	.sdocs-axis-seg.svelte-1aog7yg {
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		height: var(--sdocs-control-h);
		/* A flex item's automatic minimum is its content, which silently wins
		   over `height` — the track rendered taller than the buttons beside it. */
		min-height: 0;
		gap: 1px;
		/* fieldset defaults would blow the flex line out and re-add spacing. */
		min-inline-size: 0;
		margin: 0;
		padding: 1px;
		border: 1px solid var(--color-base-200);
		border-radius: 5px;
		background: var(--color-base-100);
	}
	/* The presets inside the scale group: the same items as a segmented
	   control, without the chrome — one bordered box inside another reads as
	   two controls when it is one. */
	.sdocs-scale-presets.svelte-1aog7yg {
		display: inline-flex;
		align-items: center;
		align-self: stretch;
		box-sizing: border-box;
		gap: 1px;
		min-inline-size: 0;
		/* Set off from the readout without a rule; the group's own padding
		   already separates it from the edge. */
		margin: 0 -3px 0 3px;
		padding: 0;
		border: 0;
		border-left: 1px solid var(--color-base-200);
		padding-left: 4px;
	}
	.sdocs-axis-seg-legend.svelte-1aog7yg {
		/* The group's accessible name; the values alone don't say what they
		   vary. Hidden rather than absent — a floated legend would break the
		   track's box. */
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.sdocs-axis-seg-item.svelte-1aog7yg {
		position: relative;
		display: inline-flex;
		align-items: center;
		align-self: stretch;
		padding: 0 7px;
		border-radius: 4px;
		font-size: 11px;
		line-height: 1;
		color: var(--color-base-500);
		white-space: nowrap;
		cursor: pointer;
	}
	.sdocs-axis-seg-item.svelte-1aog7yg input:where(.svelte-1aog7yg) {
		/* Invisible but still focusable, so the radio keeps its keyboard
		   behaviour — display:none would take it out of the tab order. */
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		pointer-events: none;
	}
	.sdocs-axis-seg-item.svelte-1aog7yg:hover {
		color: var(--color-base-900);
	}
	.sdocs-axis-seg-item.is-active.svelte-1aog7yg {
		background: var(--color-base-0);
		color: var(--color-base-900);
		box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
	}
	.sdocs-axis-seg-item.svelte-1aog7yg:has(input:where(.svelte-1aog7yg):focus-visible) {
		outline: 2px solid var(--color-action-500);
		outline-offset: 1px;
	}

	/* Sized to the row, and no wider than it needs: the bar's free width is
	   already spoken for by the segmented controls. */
	.sdocs-scale.svelte-1aog7yg {
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		height: var(--sdocs-control-h);
		min-height: 0;
		gap: 6px;
		padding: 0 7px;
		border: 1px solid var(--color-base-200);
		border-radius: 5px;
		background: var(--color-base-100);
		font-size: 11px;
		line-height: 1;
		color: var(--color-base-500);
		cursor: pointer;
	}
	.sdocs-scale.svelte-1aog7yg:hover {
		color: var(--color-base-900);
	}
	/* The label and the readout are buttons only so they can be clicked and
	   tabbed to; they carry none of a button's chrome. */
	.sdocs-scale-reset.svelte-1aog7yg {
		padding: 0;
		border: 0;
		background: none;
		font: inherit;
		color: inherit;
		white-space: nowrap;
		cursor: pointer;
	}
	.sdocs-scale-reset.svelte-1aog7yg:focus-visible {
		outline: 2px solid var(--color-action-500);
		outline-offset: 2px;
		border-radius: 2px;
	}
	.sdocs-scale.svelte-1aog7yg input:where(.svelte-1aog7yg) {
		width: 72px;
		height: 2px;
		margin: 0;
		accent-color: var(--color-action-500);
		cursor: pointer;
	}
	.sdocs-scale-value.svelte-1aog7yg {
		/* Fixed width so the row doesn't shuffle as the number changes. */
		width: 2.4em;
		text-align: right;
		font-variant-numeric: tabular-nums;
		color: var(--color-base-900);
	}

	.sdocs-topbar-btn.svelte-1aog7yg {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		/* The About "button" is an <a>, which is content-box by default —
		   without this it stood two pixels taller than the real buttons. */
		box-sizing: border-box;
		flex: none;
		height: var(--sdocs-control-h);
		min-width: var(--sdocs-control-h);
		padding: 0 6px;
		border: 1px solid var(--color-base-200);
		border-radius: 4px;
		background: var(--color-base-0);
		color: var(--color-base-600);
		cursor: pointer;
		font-size: 14px;
		line-height: 1;
	}
	.sdocs-topbar-btn.svelte-1aog7yg:hover {
		background: var(--color-base-100);
	}
	/* ── Kebab menu ── */
	.sdocs-menu-wrap.svelte-1aog7yg {
		position: relative;
		display: flex;
	}

	.sdocs-menu-btn.svelte-1aog7yg {
		/* The glyph is a thin column of dots; without extra tracking it reads
		   as a speck rather than a control. */
		font-size: 17px;
		line-height: 1;
	}

	.sdocs-menu.svelte-1aog7yg {
		position: absolute;
		top: calc(100% + 6px);
		right: 0;
		z-index: 30;
		display: flex;
		flex-direction: column;
		min-width: 150px;
		padding: 4px;
		border: 1px solid var(--color-base-200);
		border-radius: 8px;
		background: var(--color-base-0);
		box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
	}

	.sdocs-menu-item.svelte-1aog7yg {
		display: block;
		width: 100%;
		padding: 7px 10px;
		border: none;
		border-radius: 5px;
		background: none;
		font: inherit;
		font-size: 13px;
		color: var(--color-base-800);
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}

	.sdocs-menu-item.svelte-1aog7yg:hover {
		background: var(--color-base-100);
	}

	@media (max-width: 860px) {
		.sdocs-topbar.svelte-1aog7yg {
			gap: 8px;
			padding: 0 12px;
		}
		/* The tabs move into the drawer, so the actions take the free space. */
		.sdocs-topbar-sections.svelte-1aog7yg {
			display: none;
		}
		.sdocs-topbar-actions.svelte-1aog7yg {
			margin-left: auto;
		}
		/* A long site name gives way rather than pushing the actions off. */
		.sdocs-topbar-brand.svelte-1aog7yg {
			min-width: 0;
			font-size: 16px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		/* The pickers move into the drawer: they're the controls here wide
		   enough to crowd out everything else. */
		.sdocs-axis-picker.svelte-1aog7yg,
		.sdocs-axis-seg.svelte-1aog7yg,
		.sdocs-scale.svelte-1aog7yg {
			display: none;
		}
		.sdocs-topbar-btn.svelte-1aog7yg {
			/* A finger needs more than the desktop row's height. */
			height: 40px;
			min-width: 40px;
			border-color: transparent;
			font-size: 16px;
		}
		.sdocs-menu-item.svelte-1aog7yg {
			/* Menu rows are thumb targets on a phone, like the bar's buttons. */
			padding: 11px 12px;
			font-size: 14px;
		}
		/* Fullscreen hides chrome to free the stage — on a phone there is no
		   chrome worth the trade, and its exit is a hover-only hot corner.
		   After the .sdocs-topbar-btn block, which also sets `display`. */
		.sdocs-fullscreen-btn.svelte-1aog7yg {
			display: none;
		}
	}

	/* MCP info modal */
	.sdocs-mcp-dialog.svelte-1aog7yg {
		width: min(560px, calc(100vw - 48px));
		padding: 0;
		border: 1px solid var(--color-base-200);
		border-radius: 10px;
		background: var(--color-base-0);
		color: var(--color-base-800);
		font-family: var(--sans);
		font-size: 13px;
	}
	.sdocs-mcp-dialog.svelte-1aog7yg::backdrop {
		background: rgb(0 0 0 / 0.35);
	}
	.sdocs-mcp-body.svelte-1aog7yg {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 20px 24px;
	}
	.sdocs-mcp-head.svelte-1aog7yg {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.sdocs-mcp-head.svelte-1aog7yg h2:where(.svelte-1aog7yg) {
		margin: 0;
		font-size: 16px;
		font-weight: 600;
		color: var(--color-base-900);
	}
	.sdocs-mcp-lead.svelte-1aog7yg {
		margin: 0;
		color: var(--color-base-600);
		line-height: 1.5;
	}
	.sdocs-mcp-row.svelte-1aog7yg {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.sdocs-mcp-label.svelte-1aog7yg {
		flex-shrink: 0;
		width: 40px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--color-base-400);
	}
	.sdocs-mcp-row.svelte-1aog7yg code:where(.svelte-1aog7yg) {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 5px 8px;
		border: 1px solid var(--color-base-150);
		border-radius: 6px;
		background: var(--color-base-50);
		font-size: 12px;
	}
	.sdocs-mcp-body.svelte-1aog7yg h3:where(.svelte-1aog7yg) {
		margin: 6px 0 0;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--color-base-400);
	}
	.sdocs-mcp-tools.svelte-1aog7yg {
		margin: 0;
		padding-left: 18px;
		display: flex;
		flex-direction: column;
		gap: 4px;
		color: var(--color-base-600);
	}
	.sdocs-mcp-tools.svelte-1aog7yg code:where(.svelte-1aog7yg),
	.sdocs-mcp-lead.svelte-1aog7yg code:where(.svelte-1aog7yg),
	.sdocs-mcp-note.svelte-1aog7yg code:where(.svelte-1aog7yg) {
		font-size: 12px;
		color: var(--color-base-800);
	}
	.sdocs-mcp-note.svelte-1aog7yg {
		margin: 4px 0 0;
		font-size: 12px;
		color: var(--color-base-500);
	}

	.sdocs-glossary.svelte-m2rbm3 {
		box-sizing: border-box;
		width: 100%;
		padding: 14px 16px;
		border: 1px solid var(--color-base-200);
		border-radius: 8px;
		background: var(--color-base-0);
	}

	.sdocs-glossary-head.svelte-m2rbm3 {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap;
		margin-bottom: 12px;
	}

	.sdocs-glossary-heading.svelte-m2rbm3 {
		min-width: 0;
	}

	.sdocs-glossary-title.svelte-m2rbm3 {
		margin: 0;
		font-size: 15px;
		font-weight: 650;
		color: var(--color-base-900);
	}

	.sdocs-glossary-subtitle.svelte-m2rbm3 {
		margin: 2px 0 0;
		font-size: 13px;
		line-height: 1.5;
		color: var(--color-base-500);
	}

	.sdocs-glossary-search.svelte-m2rbm3 {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		flex: none;
		padding: 0 8px;
		border: 1px solid var(--color-base-200);
		border-radius: 6px;
		background: var(--color-base-50);
	}

	.sdocs-glossary-search.svelte-m2rbm3:focus-within {
		border-color: var(--color-action-500);
	}

	.sdocs-glossary-search.svelte-m2rbm3 input:where(.svelte-m2rbm3) {
		width: 150px;
		padding: 5px 0;
		border: none;
		background: none;
		font: inherit;
		font-size: 13px;
		color: var(--color-base-900);
		outline: none;
	}

	/* Term over definition rather than beside it: a two-column list wraps badly
	   the moment a term is long, and the indent already says which is which. */
	.sdocs-glossary-list.svelte-m2rbm3 {
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.sdocs-glossary-entry.svelte-m2rbm3 dt:where(.svelte-m2rbm3) {
		font-size: 13px;
		font-weight: 650;
		color: var(--color-base-900);
	}

	.sdocs-glossary-entry.svelte-m2rbm3 dd:where(.svelte-m2rbm3) {
		margin: 2px 0 0;
		max-width: 70ch;
		font-size: 13px;
		line-height: 1.6;
		color: var(--color-base-700);
	}

	.sdocs-glossary-empty.svelte-m2rbm3 {
		margin: 0;
		font-size: 13px;
		color: var(--color-base-500);
	}

	.sdocs-note-editor-scrim.svelte-px0s2x {
		position: fixed;
		inset: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24px;
		background: rgb(0 0 0 / 0.35);
	}
	.sdocs-note-editor.svelte-px0s2x {
		display: flex;
		flex-direction: column;
		width: min(560px, 100%);
		max-height: 100%;
		border-radius: 10px;
		background: var(--color-base-0);
		box-shadow: 0 12px 40px rgb(0 0 0 / 0.25);
		font-family: var(--sans);
	}
	.sdocs-note-editor-head.svelte-px0s2x {
		display: flex;
		align-items: baseline;
		gap: 10px;
		padding: 14px 16px;
		border-bottom: 1px solid var(--color-base-150);
	}
	.sdocs-note-editor-head.svelte-px0s2x h2:where(.svelte-px0s2x) {
		margin: 0;
		font-size: 14px;
		font-weight: 600;
		color: var(--color-base-900);
	}
	.sdocs-note-editor-target.svelte-px0s2x {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 12px;
		color: var(--color-base-500);
	}
	.sdocs-note-editor-x.svelte-px0s2x {
		align-self: center;
		display: inline-flex;
		padding: 4px;
		border: 0;
		border-radius: 4px;
		background: none;
		cursor: pointer;
	}
	.sdocs-note-editor-x.svelte-px0s2x:hover {
		background: var(--color-base-100);
	}

	.sdocs-note-editor-body.svelte-px0s2x {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		padding: 12px 16px;
	}
	.sdocs-note-row.svelte-px0s2x {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 8px;
	}
	.sdocs-note-intent.svelte-px0s2x {
		flex: none;
		width: 92px;
		height: 28px;
		padding: 0 6px;
		border: 1px solid var(--color-base-200);
		border-radius: 5px;
		background: var(--color-base-50);
		font: inherit;
		font-size: 12px;
		color: var(--color-base-700);
	}
	.sdocs-note-text.svelte-px0s2x {
		flex: 1;
		min-width: 0;
		padding: 5px 8px;
		border: 1px solid var(--color-base-200);
		border-radius: 5px;
		background: var(--color-base-0);
		font: inherit;
		font-size: 13px;
		line-height: 1.45;
		color: var(--color-base-900);
		resize: vertical;
	}
	.sdocs-note-remove.svelte-px0s2x {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 28px;
		padding: 0;
		border: 0;
		border-radius: 4px;
		background: none;
		cursor: pointer;
	}
	.sdocs-note-remove.svelte-px0s2x:hover {
		background: var(--color-base-100);
	}
	.sdocs-note-empty.svelte-px0s2x {
		margin: 2px 0 10px;
		font-size: 13px;
		color: var(--color-base-500);
	}
	.sdocs-note-add.svelte-px0s2x {
		padding: 5px 10px;
		border: 1px dashed var(--color-base-250);
		border-radius: 5px;
		background: none;
		font: inherit;
		font-size: 12px;
		color: var(--color-base-600);
		cursor: pointer;
	}
	.sdocs-note-add.svelte-px0s2x:hover {
		border-style: solid;
		color: var(--color-base-900);
	}

	.sdocs-note-editor-error.svelte-px0s2x {
		margin: 0;
		padding: 8px 16px;
		font-size: 12px;
		color: var(--color-danger-700);
		background: var(--color-danger-100);
	}

	.sdocs-note-editor-foot.svelte-px0s2x {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 12px 16px;
		border-top: 1px solid var(--color-base-150);
	}
	.sdocs-note-editor-file.svelte-px0s2x {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-family: var(--mono, monospace);
		font-size: 11px;
		color: var(--color-base-450);
	}
	.sdocs-note-btn.svelte-px0s2x {
		padding: 5px 12px;
		border: 1px solid var(--color-base-200);
		border-radius: 5px;
		background: var(--color-base-0);
		font: inherit;
		font-size: 12px;
		color: var(--color-base-700);
		cursor: pointer;
	}
	.sdocs-note-btn.svelte-px0s2x:hover {
		background: var(--color-base-50);
	}
	.sdocs-note-btn.is-primary.svelte-px0s2x {
		border-color: transparent;
		background: var(--color-action-500);
		color: var(--color-base-0);
	}
	.sdocs-note-btn.is-primary.svelte-px0s2x:hover {
		background: var(--color-action-600);
	}
	.sdocs-note-btn.svelte-px0s2x:disabled {
		opacity: 0.6;
		cursor: default;
	}

	.sdocs-note-control[data-variant='inline'].svelte-rdgzqn {
		/* Pushes itself to the end of the title row it sits in. */
		margin-left: auto;
		flex: none;
		display: inline-flex;
		gap: 2px;
	}
	/* The zone, not the button: a 26px target at zero opacity is one nobody
	   can find. Hovering anywhere in the corner brings it up, the same deal
	   the way out of fullscreen offers. */
	.sdocs-note-control[data-variant='corner'].svelte-rdgzqn {
		position: absolute;
		top: 0;
		right: 12px;
		width: 120px;
		height: 52px;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		pointer-events: none;
	}
	.sdocs-note-control[data-variant='corner'].svelte-rdgzqn .sdocs-note-open:where(.svelte-rdgzqn) {
		pointer-events: auto;
	}

	.sdocs-note-open.svelte-rdgzqn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
		padding: 0;
		border: 1px solid transparent;
		border-radius: 6px;
		background: none;
		color: var(--color-base-400);
		cursor: pointer;
		transition:
			opacity 0.15s ease,
			color 0.12s ease,
			background 0.12s ease;
	}
	.sdocs-note-open.svelte-rdgzqn:hover {
		background: var(--color-base-100);
		color: var(--color-base-700);
	}

	/* A hot corner: invisible until the pointer or the keyboard reaches it, so
	   it never sits on top of the thing being previewed. */
	.sdocs-note-control[data-variant='corner'].svelte-rdgzqn .sdocs-note-open:where(.svelte-rdgzqn) {
		opacity: 0;
		border-color: var(--color-base-200);
		background: var(--color-base-0);
	}
	.sdocs-note-control[data-variant='corner'].svelte-rdgzqn:hover .sdocs-note-open:where(.svelte-rdgzqn),
	.sdocs-note-control[data-variant='corner'].svelte-rdgzqn .sdocs-note-open:where(.svelte-rdgzqn):focus-visible {
		opacity: 1;
	}

	/* Quieter than a [NOTES] alert on purpose: a checklist is working state,
	   not something the page is telling the reader. Low numbers sit near the
	   background and high ones near the text, in either theme. */
	.sdocs-todo.svelte-5jewhg {
		display: flex;
		flex-direction: column;
		gap: 8px;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 12px;
		border-radius: 6px;
		border-left: 3px solid var(--color-base-300);
		background: var(--color-base-50);
	}

	.sdocs-todo-head.svelte-5jewhg {
		display: flex;
		align-items: baseline;
		gap: 8px;
	}

	.sdocs-todo-label.svelte-5jewhg {
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--color-base-600);
	}

	.sdocs-todo-count.svelte-5jewhg {
		font-size: 11px;
		font-variant-numeric: tabular-nums;
		color: var(--color-base-600);
	}

	.sdocs-todo-list.svelte-5jewhg {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* A nested list indents by the checkbox's own width, so a child's text
	   lines up under its parent's rather than under the box. */
	.sdocs-todo-item.svelte-5jewhg .sdocs-todo-list:where(.svelte-5jewhg) {
		margin-top: 2px;
		padding-left: 22px;
	}

	.sdocs-todo-line.svelte-5jewhg,
	.sdocs-todo-box.svelte-5jewhg {
		display: flex;
		/* Against the first line of the text, not the middle of a wrapped
		   item — the box belongs to the line it opens. */
		align-items: baseline;
		gap: 8px;
		font-size: 13px;
		line-height: 1.5;
		color: var(--color-base-800);
	}

	.sdocs-todo-box.svelte-5jewhg {
		flex: none;
	}

	.sdocs-todo.svelte-5jewhg:not(.is-static) .sdocs-todo-box:where(.svelte-5jewhg) {
		cursor: pointer;
	}

	/* The editable text is a button, but reads as the line it replaces —
	   the cursor and the hover underline are the only signs. */
	.sdocs-todo-edit.svelte-5jewhg {
		flex: 1;
		min-width: 0;
		padding: 0;
		border: none;
		background: none;
		font: inherit;
		color: inherit;
		text-align: left;
		cursor: text;
	}

	.sdocs-todo-edit.svelte-5jewhg:hover {
		text-decoration: underline;
		text-decoration-style: dotted;
		text-underline-offset: 3px;
		text-decoration-color: var(--color-base-300);
	}

	.sdocs-todo-line.svelte-5jewhg input:where(.svelte-5jewhg) {
		flex: none;
		transform: translateY(1px);
		margin: 0;
		accent-color: var(--color-action-500);
	}

	.is-done.svelte-5jewhg > .sdocs-todo-line:where(.svelte-5jewhg) .sdocs-todo-text:where(.svelte-5jewhg) {
		color: var(--color-base-600);
		text-decoration: line-through;
	}

	.sdocs-todo-add.svelte-5jewhg {
		margin-left: auto;
		width: 20px;
		height: 20px;
		padding: 0;
		border: 1px solid var(--color-base-200);
		border-radius: 4px;
		background: var(--color-base-0);
		font: inherit;
		font-size: 13px;
		line-height: 1;
		color: var(--color-base-600);
		cursor: pointer;
	}

	.sdocs-todo-add.svelte-5jewhg:hover {
		border-color: var(--color-base-300);
		color: var(--color-base-900);
	}

	/* The input takes the text's own metrics, so opening one does not shift
	   the line it replaces. */
	.sdocs-todo-input.svelte-5jewhg {
		flex: 1;
		min-width: 0;
		padding: 0 2px;
		border: none;
		border-bottom: 1px solid var(--color-action-500);
		background: none;
		font: inherit;
		color: var(--color-base-900);
		outline: none;
	}

	.sdocs-todo-error.svelte-5jewhg {
		margin: 0;
		font-size: 12px;
		color: var(--color-danger-700);
	}

	.sdocs-content-error.svelte-14jx8w5 {
		margin: 16px 0;
		padding: 14px 16px;
		border: 1px solid var(--color-red-200, #f3b9b8);
		border-left: 3px solid var(--color-red-500, #d42c29);
		border-radius: 6px;
		background: color-mix(in srgb, var(--color-red-500, #d42c29) 4%, transparent);
		font-family: var(--sans);
	}
	.sdocs-content-error-title.svelte-14jx8w5 {
		display: block;
		font-size: 14px;
		color: var(--color-red-600, #b02220);
	}
	.sdocs-content-error-where.svelte-14jx8w5 {
		margin-top: 4px;
		font-size: 12px;
		color: var(--color-base-500);
	}
	.sdocs-content-error-detail.svelte-14jx8w5 {
		margin: 10px 0 0;
		white-space: pre-wrap;
		word-break: break-word;
		font-family: var(--mono);
		font-size: 12px;
		line-height: 1.5;
		color: var(--color-base-700);
	}

	/* Sits directly under the stage, out of the way until the pointer is on
	   it — the same bargain the width bar strikes. */
	.sdocs-height-handle.svelte-1aneebh {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 10px;
	}
	.sdocs-height-bar.svelte-1aneebh {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: transparent;
		cursor: row-resize;
		transition: background 0.12s ease;
		/* Let the pointer drag on touch instead of scrolling the page. */
		touch-action: none;
	}
	.sdocs-height-bar.svelte-1aneebh:hover,
	.sdocs-height-handle[data-dragging='true'].svelte-1aneebh .sdocs-height-bar:where(.svelte-1aneebh) {
		background: var(--color-base-100);
	}
	.sdocs-height-grip.svelte-1aneebh {
		width: 24px;
		height: 2px;
		border-radius: 999px;
		background: var(--color-base-300);
		transition: background 0.12s ease;
	}
	.sdocs-height-bar.svelte-1aneebh:hover .sdocs-height-grip:where(.svelte-1aneebh),
	.sdocs-height-bar.svelte-1aneebh:focus-visible .sdocs-height-grip:where(.svelte-1aneebh),
	.sdocs-height-handle[data-dragging='true'].svelte-1aneebh .sdocs-height-grip:where(.svelte-1aneebh) {
		background: var(--color-base-600);
	}
	.sdocs-height-bar.svelte-1aneebh:focus-visible {
		outline: 2px solid var(--color-action-500);
		outline-offset: -2px;
		border-radius: 2px;
	}

	/* Beside the grip, not at the end of the row: the bar runs the full width
	   of the column, so a readout pinned right lands out past the stage in the
	   empty canvas, attached to nothing. Clicking it hands the stage back to
	   its content. */
	.sdocs-height-readout.svelte-1aneebh {
		position: absolute;
		left: calc(50% + 22px);
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
		padding: 2px 7px;
		border: 1px solid var(--color-base-150);
		border-radius: 4px;
		background: var(--color-base-0);
		font-family: var(--mono, monospace);
		font-size: 11px;
		color: var(--color-base-500);
		white-space: nowrap;
		cursor: pointer;
	}
	.sdocs-height-readout.svelte-1aneebh:hover {
		background: var(--color-base-50);
		color: var(--color-base-700);
	}

	.sdocs-panel.svelte-1vbsqca {
		/* border: 1px solid var(--color-base-200); */
		/* border-radius: 8px; */
		overflow: hidden;
		background: var(--color-base-0);
	}
	.sdocs-panel-header.svelte-1vbsqca {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 6px 8px 6px 12px;
		border: none;
		background: var(--color-base-50);
		font: inherit;
		font-size: 13px;
		font-weight: 600;
		color: var(--color-base-700);
		cursor: pointer;
		text-align: left;
	}
	.sdocs-panel-header.svelte-1vbsqca:hover {
		background: var(--color-base-100);
	}
	.sdocs-panel-chevron.svelte-1vbsqca {
		margin-left: auto;
		display: flex;
		align-items: center;
	}
	.sdocs-panel-body.svelte-1vbsqca {
		padding: 14px;
		border-top: 1px solid var(--color-base-100);
	}
	.sdocs-panel-body.flush.svelte-1vbsqca {
		padding: 0;
	}

	@media (max-width: 860px) {
		/* Enough to hit with a thumb without turning a row of collapsed panels
		   into a wall — these stack three deep under a component preview. */
		.sdocs-panel-header.svelte-1vbsqca {
			min-height: 36px;
		}
	}

	.TwoPaneSplit.svelte-1rcajxv {
		display: flex;
		box-sizing: border-box;
		min-width: 0;
		min-height: 0;
		/* The bar + handle may spill past the edge when a pane fills the size —
		   don't clip them here. */
		overflow: visible;
	}
	.TwoPaneSplit[data-direction='vertical'].svelte-1rcajxv {
		flex-direction: column;
	}
	.TwoPaneSplit[data-dragging='true'][data-direction='horizontal'].svelte-1rcajxv {
		cursor: col-resize;
	}
	.TwoPaneSplit[data-dragging='true'][data-direction='vertical'].svelte-1rcajxv {
		cursor: row-resize;
	}
	.TwoPaneSplit[data-dragging='true'].svelte-1rcajxv {
		user-select: none;
	}

	.TwoPaneSplit-left.svelte-1rcajxv,
	.TwoPaneSplit-right.svelte-1rcajxv {
		position: relative;
		box-sizing: border-box;
		min-width: 0;
		min-height: 0;
		overflow: hidden;
	}
	.TwoPaneSplit-left.svelte-1rcajxv {
		flex-shrink: 0;
		background: var(--leftBg, none);
	}
	.TwoPaneSplit-right.svelte-1rcajxv {
		flex: 1;
		background: var(--rightBg, none);
	}

	.TwoPaneSplit-content.svelte-1rcajxv {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}

	/* Compare mode: both contents anchor to the track origin at the full track
	   size, so each pane reveals a slice — a before / after slider. */
	.TwoPaneSplit[data-mode='compare'][data-direction='horizontal'].svelte-1rcajxv .TwoPaneSplit-content:where(.svelte-1rcajxv) {
		position: absolute;
		top: 0;
		bottom: 0;
		width: var(--_room);
		height: auto;
	}
	.TwoPaneSplit[data-mode='compare'][data-direction='horizontal'].svelte-1rcajxv .TwoPaneSplit-left:where(.svelte-1rcajxv) .TwoPaneSplit-content:where(.svelte-1rcajxv) {
		left: 0;
	}
	.TwoPaneSplit[data-mode='compare'][data-direction='horizontal'].svelte-1rcajxv .TwoPaneSplit-right:where(.svelte-1rcajxv) .TwoPaneSplit-content:where(.svelte-1rcajxv) {
		right: 0;
	}
	.TwoPaneSplit[data-mode='compare'][data-direction='vertical'].svelte-1rcajxv .TwoPaneSplit-content:where(.svelte-1rcajxv) {
		position: absolute;
		left: 0;
		right: 0;
		height: var(--_room);
		width: auto;
	}
	.TwoPaneSplit[data-mode='compare'][data-direction='vertical'].svelte-1rcajxv .TwoPaneSplit-left:where(.svelte-1rcajxv) .TwoPaneSplit-content:where(.svelte-1rcajxv) {
		top: 0;
	}
	.TwoPaneSplit[data-mode='compare'][data-direction='vertical'].svelte-1rcajxv .TwoPaneSplit-right:where(.svelte-1rcajxv) .TwoPaneSplit-content:where(.svelte-1rcajxv) {
		bottom: 0;
	}

	/* In-flow spacer; carries the divider colour. */
	.TwoPaneSplit-bar.svelte-1rcajxv {
		position: relative;
		flex-shrink: 0;
		background: var(--handleBg, var(--color-base-100));
		transition: background 0.12s ease;
	}
	.TwoPaneSplit-bar.svelte-1rcajxv:hover,
	.TwoPaneSplit[data-dragging='true'].svelte-1rcajxv .TwoPaneSplit-bar:where(.svelte-1rcajxv) {
		background: var(--hoverHandleBg, var(--color-base-200));
	}

	/* Wider than the bar for an easy grab, centred over it, above everything. */
	.TwoPaneSplit-handle.svelte-1rcajxv {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2;
		/* Let the pointer drag work on touch instead of scrolling. */
		touch-action: none;
	}
	.TwoPaneSplit[data-direction='horizontal'].svelte-1rcajxv .TwoPaneSplit-handle:where(.svelte-1rcajxv) {
		top: 0;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 16px;
		cursor: col-resize;
	}
	.TwoPaneSplit[data-direction='vertical'].svelte-1rcajxv .TwoPaneSplit-handle:where(.svelte-1rcajxv) {
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		height: 16px;
		cursor: row-resize;
	}

	.TwoPaneSplit-grip.svelte-1rcajxv {
		border-radius: 999px;
		background: var(--handleColor, var(--color-base-400));
		transition: background 0.12s ease;
	}
	.TwoPaneSplit[data-direction='horizontal'].svelte-1rcajxv .TwoPaneSplit-grip:where(.svelte-1rcajxv) {
		width: 2px;
		height: 24px;
	}
	.TwoPaneSplit[data-direction='vertical'].svelte-1rcajxv .TwoPaneSplit-grip:where(.svelte-1rcajxv) {
		width: 24px;
		height: 2px;
	}
	.TwoPaneSplit-handle.svelte-1rcajxv:hover .TwoPaneSplit-grip:where(.svelte-1rcajxv),
	.TwoPaneSplit-handle.svelte-1rcajxv:focus-visible .TwoPaneSplit-grip:where(.svelte-1rcajxv),
	.TwoPaneSplit[data-dragging='true'].svelte-1rcajxv .TwoPaneSplit-grip:where(.svelte-1rcajxv) {
		background: var(--hoverHandleColor, var(--color-base-600));
	}
	.TwoPaneSplit-handle.svelte-1rcajxv:focus-visible {
		outline: 2px solid var(--color-action-500);
		outline-offset: -2px;
		border-radius: 2px;
	}

	.sdocs-preview-frame.svelte-2zf0op {
		position: relative;
		overflow: hidden;
		background: var(--color-base-0);
	}
	.sdocs-stage-tools.svelte-2zf0op {
		position: absolute;
		right: 4px;
		bottom: 4px;
		display: flex;
		align-items: stretch;
		gap: 4px;
		opacity: 0;
		transition: opacity 0.12s ease;
	}
	/* Revealed together: they sit in one corner, and having the id fade in
	   while the link stayed hidden would read as two separate affordances. */
	.sdocs-preview-frame.svelte-2zf0op:hover .sdocs-stage-tools:where(.svelte-2zf0op),
	.sdocs-stage-tools.svelte-2zf0op:focus-within {
		opacity: 1;
	}
	.sdocs-stage-tool.svelte-2zf0op {
		display: inline-flex;
		align-items: center;
		padding: 1px 5px;
		border: none;
		border-radius: 4px;
		background: var(--color-base-100);
		color: var(--color-base-600);
		font-family: var(--mono, ui-monospace, monospace);
		font-size: 10px;
		line-height: 1.5;
		text-decoration: none;
		cursor: pointer;
	}
	.sdocs-stage-tool.svelte-2zf0op:hover {
		color: var(--color-base-600);
	}
	.sdocs-preview-frame.full-height.svelte-2zf0op {
		flex: 1;
	}
	.sdocs-iframe.svelte-2zf0op {
		width: 100%;
		max-height: 800px;
		overflow-y: auto;
		border: none;
		display: block;
	}
	.full-height.svelte-2zf0op .sdocs-iframe:where(.svelte-2zf0op) {
		height: 100%;
		min-height: 0;
		max-height: none;
	}

	.sdocs-api-list.svelte-nhcrag {
		display: flex;
		flex-direction: column;
	}
	.sdocs-api-header.svelte-nhcrag {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr) 120px 200px;
		gap: 20px;
		padding: 6px 12px;
		border-bottom: 2px solid var(--color-base-200);
		font-size: 12px;
		font-weight: 600;
		color: var(--color-base-600);
	}
	.sdocs-api-row.svelte-nhcrag {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr) 120px 200px;
		/* Tighter row gap: the full-width description sits on its own grid row */
		gap: 8px 20px;
		align-items: start;
		padding: 12px 12px;
		border-bottom: 1px solid var(--color-base-100);
		font-size: 13px;
	}
	.sdocs-api-name.svelte-nhcrag {
		font-size: 14px;
		font-weight: 600;
		color: var(--color-base-900);
		overflow-wrap: break-word;
	}
	.sdocs-api-required.svelte-nhcrag {
		/* Its own token, so the dark theme can move it without this rule
		   knowing: red-600 reads on white and is too dark on the dark ground,
		   and the accent ramps do not flip with the theme the way base does. */
		color: var(--sdocs-required-color, var(--color-red-600));
	}
	.sdocs-api-middle.svelte-nhcrag {
		display: flex;
		flex-direction: column;
		gap: 8px;
		min-width: 0;
	}
	.sdocs-api-meta.svelte-nhcrag {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 6px;
	}
	.sdocs-api-desc.svelte-nhcrag {
		grid-column: 1 / -1;
		color: var(--color-base-500);
		/* Reflowed JSDoc keeps deliberate breaks (lists, paragraphs) as \n */
		white-space: pre-line;
	}
	.sdocs-api-default.svelte-nhcrag {
		overflow-wrap: break-word;
		min-width: 0;
	}
	.sdocs-api-empty.svelte-nhcrag {
		color: var(--color-base-500);
	}
	.sdocs-api-control.svelte-nhcrag {
		min-width: 0;
	}
	.sdocs-api-none.svelte-nhcrag {
		color: var(--color-base-400);
		font-size: 13px;
		font-style: italic;
		margin: 0;
	}
	/* Only the stacked layout needs per-cell labels; the columns have headers. */
	.sdocs-api-cell-label.svelte-nhcrag {
		display: none;
	}

	/* Below the breakpoint the columns add up to 520px of fixed track in a
	   ~350px viewport, so the row stops being a table row and becomes a card:
	   one column, name first, the control last where a thumb expects it.
	   `display: flex` also neutralises the inline grid-template-columns. */
	@media (max-width: 860px) {
		.sdocs-api-header.svelte-nhcrag {
			display: none;
		}
		.sdocs-api-row.svelte-nhcrag {
			display: flex;
			flex-direction: column;
			gap: 5px;
			padding: 12px 0;
			/* The grid's `start` would shrink each cell to its content, leaving
			   the controls at a fraction of the width they now have. */
			align-items: stretch;
		}
		.sdocs-api-name.svelte-nhcrag {
			order: 1;
		}
		.sdocs-api-middle.svelte-nhcrag {
			order: 2;
		}
		.sdocs-api-desc.svelte-nhcrag {
			order: 3;
		}
		.sdocs-api-default.svelte-nhcrag {
			order: 4;
		}
		.sdocs-api-control.svelte-nhcrag {
			order: 5;
		}
		.sdocs-api-default.svelte-nhcrag,
		.sdocs-api-control.svelte-nhcrag {
			display: flex;
			flex-direction: column;
			gap: 4px;
			align-items: stretch;
		}
		/* Stacked, a labelled "—" is a line of nothing. The em-dash only earns
		   its place in the grid, where it holds the column open. */
		.sdocs-api-default.svelte-nhcrag:has(.sdocs-api-empty:where(.svelte-nhcrag)) {
			display: none;
		}
		.sdocs-api-cell-label.svelte-nhcrag {
			display: block;
			font-size: 11px;
			font-weight: 600;
			letter-spacing: 0.05em;
			text-transform: uppercase;
			color: var(--color-base-400);
		}
	}

	.sdocs-control-group.svelte-1ru3iqa {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: 0;
	}
	.sdocs-control-group.svelte-1ru3iqa > .sdocs-control {
		flex: 1;
		min-width: 0;
	}
	.sdocs-control-unsupported.svelte-1ru3iqa {
		color: var(--color-base-300);
	}
	.sdocs-unset-btn.svelte-1ru3iqa {
		flex: none;
		width: 20px;
		height: 20px;
		padding: 0;
		border: none;
		border-radius: 4px;
		background: none;
		color: var(--color-base-600);
		font-size: 14px;
		line-height: 1;
		cursor: pointer;
	}
	.sdocs-unset-btn.svelte-1ru3iqa:hover {
		background: var(--color-base-100);
		color: var(--color-base-700);
	}

	@media (max-width: 860px) {
		.sdocs-unset-btn.svelte-1ru3iqa {
			width: 32px;
			height: 32px;
			font-size: 16px;
		}
	}

	.sdocs-control-group.svelte-n6nxcf {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: 0;
	}
	.sdocs-control-group.svelte-n6nxcf > .sdocs-control {
		flex: 1;
		min-width: 0;
	}
	.sdocs-unset-btn.svelte-n6nxcf {
		flex: none;
		width: 20px;
		height: 20px;
		padding: 0;
		border: none;
		border-radius: 4px;
		background: none;
		color: var(--color-base-400);
		font-size: 14px;
		line-height: 1;
		cursor: pointer;
	}
	.sdocs-unset-btn.svelte-n6nxcf:hover {
		background: var(--color-base-100);
		color: var(--color-base-700);
	}

	@media (max-width: 860px) {
		.sdocs-unset-btn.svelte-n6nxcf {
			width: 32px;
			height: 32px;
			font-size: 16px;
		}
	}

	.sdocs-component-view.svelte-8cvzua {
		padding: 24px 32px;
		/* Everything sits in a content column capped at the doc's maxWidth
		   (config/entity cascade) — except the resizable preview split, which
		   spans the full view so the stage can grow past the column. */
		display: grid;
		grid-template-columns: minmax(0, var(--sdocs-content-max, 1200px)) 1fr;
		font-family: var(--sans);
	}
	.sdocs-component-view.svelte-8cvzua > :where(.svelte-8cvzua) {
		grid-column: 1;
	}
	.sdocs-component-view.svelte-8cvzua > .sdocs-preview-split:where(.svelte-8cvzua) {
		grid-column: 1 / -1;
	}
	.sdocs-component-view.svelte-8cvzua > .sdocs-example:where(.svelte-8cvzua) {
		grid-column: 1 / -1;
	}
	.sdocs-example.svelte-8cvzua > .sdocs-example-title:where(.svelte-8cvzua),
	.sdocs-example.svelte-8cvzua > .sdocs-block-description:where(.svelte-8cvzua),
	.sdocs-example.svelte-8cvzua > .sdocs-meta-chips:where(.svelte-8cvzua),
	.sdocs-example.svelte-8cvzua > .sdocs-panels:where(.svelte-8cvzua) {
		max-width: var(--sdocs-content-max, 1200px);
	}

	/* The resizable stage: the pane carries the panel chrome; the canvas on the
	   right is the empty room to drag into. */
	.sdocs-preview-split.svelte-8cvzua {
		position: relative;
		margin-bottom: 32px;
		/* Clip the x-overhang (the handle's outer lip, a readout that ran off
		   the page) without creating a scroll container. */
		overflow-x: clip;
		/* The handle bar is invisible until hovered — the grey only appears
		   when the pointer reaches it (or while dragging) — and the grip line
		   sits light until then. */
		--handleBg: transparent;
		--handleColor: var(--color-base-300);
		--hoverHandleColor: var(--color-base-0);
	}
	/* The split is never shorter than the width readout (21px) plus a hair of
	   air, so the chip fits centred even beside a tiny preview. */
	.sdocs-preview-split.svelte-8cvzua .TwoPaneSplit {
		min-height: 25px;
	}
	/* Bare viewport: no border, no radius — the canvas stripes and the handle
	   bar delineate the stage, and the iframe width is exactly the pane's. */
	.sdocs-preview-pane.svelte-8cvzua {
		height: 100%;
		box-sizing: border-box;
		background: var(--color-base-0);
	}
	.sdocs-resize-canvas.svelte-8cvzua {
		height: 100%;
		box-sizing: border-box;
		border-radius: 8px;
		/* The diagonal-hatch tile (an image beats hairline gradients, which
		   shimmer at fractional device-pixel ratios). The 26px tile is a 2x
		   export — displayed at 13px it maps 1:1 to retina device pixels. */
		background-repeat: repeat;
		background-size: 13px 13px;
	}
	/* Rides beside the handle, vertically centred, clamped inside the view so
	   it stays reachable when the window shrinks below the stored width.
	   Clicking it resets the stage to its default width. */
	.sdocs-resize-readout.svelte-8cvzua {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
		display: inline-block;
		padding: 2px 7px;
		border: 1px solid var(--color-base-150);
		border-radius: 4px;
		background: var(--color-base-0);
		font-family: var(--mono, monospace);
		font-size: 11px;
		color: var(--color-base-500);
		white-space: nowrap;
		cursor: pointer;
	}
	.sdocs-resize-readout.svelte-8cvzua:hover {
		background: var(--color-base-50);
		color: var(--color-base-700);
	}
	.sdocs-doc-section.svelte-8cvzua {
		margin-top: 28px;
	}
	.sdocs-doc-section-title.svelte-8cvzua {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 10px;
		font-size: 14px;
		font-weight: 600;
		color: var(--color-base-800);
	}
	.sdocs-doc-section-title.svelte-8cvzua .sdocs-reset-btn:where(.svelte-8cvzua) {
		margin-left: auto;
	}
	.sdocs-reset-btn.svelte-8cvzua {
		padding: 4px 12px;
		border: 1px solid var(--color-base-200);
		border-radius: 4px;
		background: var(--color-base-0);
		font: inherit;
		font-size: 12px;
		color: var(--color-base-600);
		cursor: pointer;
	}
	.sdocs-reset-btn.svelte-8cvzua:hover {
		background: var(--color-base-100);
	}
	.sdocs-forwarded.svelte-8cvzua {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 10px;
		font-size: 12px;
	}
	.sdocs-forwarded-label.svelte-8cvzua {
		color: var(--color-base-500);
	}
	.sdocs-forwarded-chip.svelte-8cvzua {
		padding: 2px 8px;
		border: 1px solid var(--color-base-200);
		border-radius: 999px;
		background: var(--color-base-50);
		font-family: var(--mono);
		font-size: 11px;
		color: var(--color-base-600);
	}
	.sdocs-run-btn.svelte-8cvzua {
		padding: 3px 12px;
		border: 1px solid var(--color-base-200);
		border-radius: 4px;
		background: var(--color-base-0);
		font: inherit;
		font-size: 12px;
		color: var(--color-base-600);
		cursor: pointer;
	}
	.sdocs-run-btn.svelte-8cvzua:hover:not(:disabled) {
		background: var(--color-base-100);
	}
	.sdocs-run-btn.svelte-8cvzua:disabled {
		opacity: 0.4;
		cursor: default;
	}
	.sdocs-preview-tabs.svelte-8cvzua {
		display: flex;
		gap: 4px;
		margin-bottom: 12px;
		border-bottom: 1px solid var(--color-base-200);
		/* Enough tabs — or long enough labels — and the strip ran out of the
		   layout instead of staying inside it. It scrolls like the top bar's
		   section tabs; unlike those, there is no compact mode to fall back
		   to, so scrolling is the whole fix. */
		overflow-x: auto;
		/* Without this a flex item refuses to shrink below its content. */
		min-width: 0;
	}
	.sdocs-preview-tab.svelte-8cvzua {
		flex: none;
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
	/* A lone tab is a label, not a choice: it keeps the active underline and
	   the component's name, but nothing about it invites a click. */
	.sdocs-preview-tab.is-only.svelte-8cvzua {
		cursor: default;
		opacity: 1;
	}

	/* Colour tells the lifecycle apart at a glance: nothing yet is grey, in the
	   workshop is amber, being looked at is blue, unproven is purple, go is
	   green — and retired is grey again.

	   Deprecated is deliberately **not** red. The component still works; it is
	   on the way out, not broken. Red would say "error", would compete with the
	   `bug` note that means something is actually wrong, and would shout at a
	   reader for using something that works today. Grey at both ends of the
	   scale reads as "not for you right now", which is what both mean. */
	.sdocs-status.svelte-8cvzua {
		display: inline-flex;
		align-items: center;
		color: var(--color-base-400);
	}
	.sdocs-status[data-status='wip'].svelte-8cvzua {
		color: var(--color-amber-500);
	}
	.sdocs-status[data-status='review'].svelte-8cvzua {
		color: var(--color-action-500);
	}
	.sdocs-status[data-status='experimental'].svelte-8cvzua {
		color: var(--color-purple-500);
	}
	.sdocs-status[data-status='ready'].svelte-8cvzua {
		color: var(--color-success-500);
	}
	.sdocs-status[data-status='deprecated'].svelte-8cvzua {
		color: var(--color-base-500);
	}
	.sdocs-preview-tab.svelte-8cvzua {
		padding: 7px 14px;
		border: none;
		border-bottom: 2px solid transparent;
		background: none;
		font: inherit;
		font-size: 13px;
		font-weight: 500;
		color: var(--color-base-500);
		cursor: pointer;
	}
	.sdocs-preview-tab.svelte-8cvzua:hover {
		color: var(--color-base-800);
	}
	.sdocs-preview-tab.active.svelte-8cvzua {
		color: var(--color-base-900);
		border-bottom-color: var(--color-accent-500, var(--color-base-900));
		font-weight: 600;
	}
	.sdocs-view-header.svelte-8cvzua {
		margin-bottom: 24px;
	}
	.sdocs-view-title.svelte-8cvzua {
		font-size: 24px;
		font-weight: 700;
		color: var(--color-base-900);
		margin: 0;
	}
	.sdocs-view-header.svelte-8cvzua .Note {
		margin: 10px 0;
	}
	/* The header stacks on margins rather than a gap, so the todo has to bring
	   its own — it was landing flush against the description. Top only: the
	   header's own margin-bottom already spaces whatever follows it. */
	.sdocs-view-header.svelte-8cvzua .sdocs-todo {
		margin-top: 12px;
	}
	/* An example's column already spaces its rows; these only need holding to
	   the content width like their siblings. Without the cap the todo stretched
	   across both grid tracks — past the notes above it and into the room the
	   stage keeps for dragging. */
	.sdocs-example.svelte-8cvzua > .Note,
	.sdocs-example.svelte-8cvzua > .sdocs-todo,
	.sdocs-example.svelte-8cvzua > .sdocs-prose-block {
		max-width: var(--sdocs-content-max, 1200px);
	}
	/* The title and whatever rides at the end of its line. */
	.sdocs-title-row.svelte-8cvzua {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	/* A [PROSE] block sits in the page flow like a paragraph of the entity's
	   own, so its first and last elements do not add margin to the gap the
	   view already sets between blocks. */
	/* Its own elements' margins are trimmed at both ends so the block occupies
	   exactly its text, and the block then sets the gap to what follows it —
	   the tab strip was sitting flush against the last paragraph. */
	.sdocs-prose-block.svelte-8cvzua {
		margin-bottom: 22px;
	}
	/* Held to the content column and spaced like the prose it sits among. */
	.sdocs-glossary-block.svelte-8cvzua {
		max-width: var(--sdocs-content-max, 1200px);
		margin-bottom: 22px;
	}
	.sdocs-prose-block.svelte-8cvzua > :first-child {
		margin-top: 0;
	}
	.sdocs-prose-block.svelte-8cvzua > :last-child {
		margin-bottom: 0;
	}

	.sdocs-view-description.svelte-8cvzua {
		font-size: 14px;
		line-height: 1.5;
		/* 4.35:1 on base-500 — just under the 4.5:1 floor. */
		color: var(--color-base-600);
		margin: 6px 0 0;
	}
	.sdocs-panels.svelte-8cvzua {
		display: flex;
		flex-direction: column;
		gap: 1px;
		border: 1px solid var(--color-base-200);
		background: var(--color-base-200);
		border-radius: 8px;
		overflow: hidden;
	}
	.sdocs-preview-wrapper.svelte-8cvzua {
		/* stage padding lives inside the iframe (config/entity/block cascade) */
		background: var(--color-base-0);
	}
	.sdocs-divider.svelte-8cvzua {
		border: none;
		border-top: 1px solid var(--color-base-200);
		margin: 24px 0;
	}
	.sdocs-section-title.svelte-8cvzua {
		/* Same treatment as a sidebar group label. Measured at 2.72:1 against the
		   page on base-400 — an 11px label needs 4.5:1, so it sits two steps
		   darker. */
		font-size: 11px;
		font-weight: 600;
		color: var(--color-base-600);
		letter-spacing: 0.05em;
		text-transform: uppercase;
		margin: 32px 0 16px;
	}
	.sdocs-example.svelte-8cvzua + .sdocs-example:where(.svelte-8cvzua) {
		margin-top: 40px;
	}
	.sdocs-example.svelte-8cvzua {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	.sdocs-block-description.svelte-8cvzua {
		margin: -2px 0 10px;
		font-size: 13px;
		color: var(--color-base-500);
	}
	/* Under the block's own description, above the stage. Its top margin is
	   trimmed so the two read as one passage rather than two boxes. */
	.sdocs-component-description.svelte-8cvzua {
		max-width: var(--sdocs-content-max, 1200px);
		margin-bottom: 14px;
	}
	.sdocs-component-description.svelte-8cvzua > :first-child {
		margin-top: 0;
	}
	.sdocs-component-description.svelte-8cvzua > :last-child {
		margin-bottom: 0;
	}

	.sdocs-preview-description.svelte-8cvzua {
		margin: 2px 0 12px;
		font-size: 13px;
		line-height: 1.5;
		color: var(--color-base-500);
	}
	.sdocs-meta-chips.svelte-8cvzua {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		/* Clear of the title or description above and the stage below. */
		margin: 2px 0 12px;
		padding: 0;
		list-style: none;
	}
	/* Badges, not pills: the corner is rounded, not run all the way round, and
	   the fill alone carries them — a stroke would ask for more attention than
	   a footnote deserves. */
	.sdocs-meta-chip.svelte-8cvzua {
		padding: 0 5px;
		border-radius: 3px;
		background: var(--color-base-100);
		font-size: 10px;
		line-height: 1.8;
		color: var(--color-base-600);
	}
	/* A component's other names carry more weight than one example's tags. */
	.sdocs-meta-chip.is-md.svelte-8cvzua {
		padding: 1px 6px;
		border-radius: 4px;
		font-size: 12px;
	}
	.sdocs-example-title.svelte-8cvzua {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 15px;
		font-weight: 600;
		color: var(--color-base-800);
		margin: 0;
	}
	.sdocs-code-block.svelte-8cvzua {
		/* The copy button is positioned against this. */
		position: relative;
		overflow-x: auto;
		font-size: 13px;
		line-height: 1.5;
		tab-size: 4;
	}
	.sdocs-code-block.svelte-8cvzua pre {
		margin: 0;
		padding: 12px;
		border-radius: 0;
		overflow-x: auto;
	}
	.sdocs-code-block.svelte-8cvzua code {
		font-family: var(--mono);
	}

	@media (max-width: 860px) {
		.sdocs-component-view.svelte-8cvzua {
			/* The second track existed to give the stage room to be dragged
			   into; without a handle it is just wasted width. */
			display: block;
			padding: 16px;
		}
		.sdocs-view-title.svelte-8cvzua {
			font-size: 20px;
		}
		.sdocs-view-header.svelte-8cvzua {
			margin-bottom: 16px;
		}
		/* Enough previews and the tabs stop fitting — let them scroll rather
		   than wrap into a stack that pushes the stage off the screen. */
		.sdocs-preview-tabs.svelte-8cvzua {
			overflow-x: auto;
			scrollbar-width: none;
		}
		.sdocs-preview-tab.svelte-8cvzua {
			flex-shrink: 0;
			padding: 10px 12px;
		}
		.sdocs-reset-btn.svelte-8cvzua,
		.sdocs-run-btn.svelte-8cvzua {
			min-height: 36px;
		}
	}

	.sdocs-page-view.svelte-94buc1 {
		/* padding comes from the doc entry (config/entity cascade) */
		font-family: var(--sans);
	}
	.sdocs-page-inner.svelte-94buc1 {
		display: flex;
		gap: 24px;
		/* max-width and margin (contentX) come from the doc entry */
	}
	.sdocs-page-main.svelte-94buc1 {
		flex: 1;
		min-width: 0;
		/* The containing block for the corner note control. Without it that
		   control resolves `top: 0` against the app root and its 120×52 hover
		   zone lands over the top bar, swallowing clicks meant for fullscreen
		   and the kebab menu. */
		position: relative;
	}
	.sdocs-view-header.svelte-94buc1 {
		margin-bottom: 24px;
	}
	.sdocs-view-title.svelte-94buc1 {
		font-size: 24px;
		font-weight: 700;
		color: var(--color-base-900);
		margin: 0;
	}
	.sdocs-view-header.svelte-94buc1 .Note,
	.sdocs-doc-note.svelte-94buc1 {
		margin: 10px 0 14px;
	}
	.sdocs-title-row.svelte-94buc1 {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.sdocs-view-description.svelte-94buc1 {
		font-size: 14px;
		line-height: 1.5;
		color: var(--color-base-500);
		margin: 6px 0 0;
	}

	/* ── Page prose: the docs app's own typography ── */
	.sdocs-glossary-block.svelte-94buc1 {
		margin: 1.2em 0;
	}
	.sdocs-page-example.svelte-94buc1 {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 16px 0;
	}
	.sdocs-block-description.svelte-94buc1 {
		margin: -2px 0 10px;
		font-size: 13px;
		color: var(--color-base-500);
	}
	.sdocs-example-title.svelte-94buc1 {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 15px;
		font-weight: 600;
		color: var(--color-base-800);
		margin: 0;
	}
	.sdocs-panels.svelte-94buc1 {
		display: flex;
		flex-direction: column;
		gap: 1px;
		border: 1px solid var(--color-base-200);
		background: var(--color-base-200);
		border-radius: 8px;
		overflow: hidden;
	}
	.sdocs-preview-wrapper.svelte-94buc1 {
		/* stage padding lives inside the iframe (config/block cascade) */
		background: var(--color-base-0);
	}
	.sdocs-code-block.svelte-94buc1 {
		/* The copy button is positioned against this. */
		position: relative;
		overflow-x: auto;
		font-size: 13px;
		line-height: 1.5;
		tab-size: 4;
	}
	.sdocs-code-block.svelte-94buc1 pre {
		margin: 0;
		padding: 12px;
		border-radius: 0;
		overflow-x: auto;
	}
	.sdocs-code-block.svelte-94buc1 code {
		font-family: var(--mono);
	}

	/* ── Table of contents ── */
	.sdocs-toc.svelte-94buc1 {
		width: 200px;
		flex-shrink: 0;
		position: sticky;
		top: 24px;
		align-self: flex-start;
	}
	.sdocs-toc-title.svelte-94buc1 {
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--color-base-600);
		margin: 0 0 8px;
	}
	.sdocs-toc-list.svelte-94buc1 {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.sdocs-toc-item.svelte-94buc1 {
		margin: 0;
	}
	.sdocs-toc-link.svelte-94buc1 {
		display: block;
		padding: 4px 0;
		font-size: 13px;
		color: var(--color-base-600);
		text-decoration: none;
		background: none;
		border: none;
		cursor: pointer;
		text-align: left;
		width: 100%;
		transition: color 0.15s;
	}
	/* base-600 is zinc-600 on white and zinc-400 on the dark ground, and the
	   second of those lands at 4.0:1 — the mirror is not symmetric, so the
	   outline takes one more step in the dark. */
	.sdocs-app[data-sdocs-theme='dark'] .sdocs-toc-link.svelte-94buc1 {
		color: var(--color-base-700);
	}
	.sdocs-toc-link.svelte-94buc1:hover,
	.sdocs-toc-link.is-active.svelte-94buc1 {
		color: var(--color-action-600);
	}

	@media (max-width: 860px) {
		/* One column: the outline stacks above the prose instead of beside it. */
		.sdocs-page-inner.svelte-94buc1 {
			flex-direction: column;
			gap: 16px;
		}
		.sdocs-toc-collapsed.svelte-94buc1 {
			order: -1;
			width: auto;
			position: static;
			/* The sticky column's flex-start would shrink it to its own text,
			   leaving a floating box that doesn't line up with the prose. */
			align-self: stretch;
			padding: 8px 12px;
			border: 1px solid var(--color-base-200);
			border-radius: 8px;
		}
		.sdocs-toc-summary.svelte-94buc1 {
			min-height: 28px;
			display: flex;
			align-items: center;
			gap: 6px;
			font-size: 12px;
			font-weight: 600;
			letter-spacing: 0.05em;
			text-transform: uppercase;
			color: var(--color-base-500);
			cursor: pointer;
			/* `display: flex` drops the native marker — the chevron replaces it. */
			list-style: none;
		}
		.sdocs-toc-summary.svelte-94buc1::-webkit-details-marker {
			display: none;
		}
		.sdocs-toc-summary.svelte-94buc1 .Icon {
			transition: transform 0.15s ease;
		}
		.sdocs-toc-collapsed[open].svelte-94buc1 .sdocs-toc-summary:where(.svelte-94buc1) .Icon {
			transform: rotate(90deg);
		}
		.sdocs-toc-collapsed[open].svelte-94buc1 .sdocs-toc-summary:where(.svelte-94buc1) {
			margin-bottom: 4px;
		}
		.sdocs-toc-link.svelte-94buc1 {
			padding: 8px 0;
			font-size: 14px;
		}
		.sdocs-view-title.svelte-94buc1 {
			font-size: 20px;
		}
		.sdocs-view-header.svelte-94buc1 {
			margin-bottom: 16px;
		}
	}

	.sdocs-page-note.svelte-w08cc2 {
		margin-bottom: 16px;
	}
	.sdocs-svelte-page.svelte-w08cc2 {
		/* The corner note button positions against this. */
		position: relative;
		/* padding comes from the doc entry (config/entity cascade) */
		font-family: var(--sans);
		color: var(--color-base-800);
	}
	.sdocs-svelte-page-inner.svelte-w08cc2 {
		/* max-width and margin (contentX) come from the doc entry */
		min-width: 0;
	}

	.sdocs-layout-view.svelte-1v4ouov {
		position: relative;
		height: 100%;
		/* Clip the x-overhang (handle lip, runaway readout) — no scrollbar. */
		overflow-x: clip;
		display: flex;
		flex-direction: column;
		/* The handle bar is invisible until hovered, like the component view,
		   and the grip line sits light until then. */
		--handleBg: transparent;
		--handleColor: var(--color-base-300);
		--hoverHandleColor: var(--color-base-0);
	}
	.sdocs-layout-view.svelte-1v4ouov > .TwoPaneSplit {
		flex: 1;
		min-height: 0;
	}
	/* Without the split the pane is the direct child and takes its place. */
	.sdocs-layout-view.svelte-1v4ouov > .sdocs-layout-pane:where(.svelte-1v4ouov) {
		flex: 1;
		min-height: 0;
	}
	.sdocs-layout-pane.svelte-1v4ouov {
		height: 100%;
		box-sizing: border-box;
		background: var(--color-base-0);
		/* The full-height PreviewFrame sizes itself with flex: 1 — give it the
		   flex context it had when it was a direct child of the view. */
		display: flex;
		flex-direction: column;
	}
	/* Over the layout, not in front of the handle: the note clears the strip
	   the resize bar rides in, and never eats a click meant for it. */
	.sdocs-layout-note.svelte-1v4ouov {
		display: flex;
		flex-direction: column;
		gap: 6px;
		position: absolute;
		top: 12px;
		left: 12px;
		right: 22px;
		z-index: 4;
	}
	/* Each note casts its own shadow. On the stack instead, the shadow also
	   falls across the gap between two notes, drawing a band where there is
	   nothing — the wrapper itself has no surface of its own. */
	.sdocs-layout-note.svelte-1v4ouov .Note {
		box-shadow: 0 2px 12px rgb(0 0 0 / 0.12);
	}
	.sdocs-resize-canvas.svelte-1v4ouov {
		height: 100%;
		box-sizing: border-box;
		/* The diagonal-hatch tile (an image beats hairline gradients, which
		   shimmer at fractional device-pixel ratios). The 26px tile is a 2x
		   export — displayed at 13px it maps 1:1 to retina device pixels. */
		background-repeat: repeat;
		background-size: 13px 13px;
	}
	/* Rides beside the handle, vertically centred, clamped inside the view so
	   it stays reachable when the window shrinks below the stored width.
	   Clicking it resets the layout to full width. */
	.sdocs-resize-readout.svelte-1v4ouov {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
		display: inline-block;
		padding: 2px 7px;
		border: 1px solid var(--color-base-150);
		border-radius: 4px;
		background: var(--color-base-0);
		font-family: var(--mono, monospace);
		font-size: 11px;
		color: var(--color-base-500);
		white-space: nowrap;
		cursor: pointer;
	}
	.sdocs-resize-readout.svelte-1v4ouov:hover {
		background: var(--color-base-50);
		color: var(--color-base-700);
	}

	.sdocs-home.svelte-j0iup2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		min-height: 400px;
		gap: 32px;
		padding: 24px;
		box-sizing: border-box;
		font-family: var(--sans);
	}
	.sdocs-home-brand.svelte-j0iup2 {
		text-align: center;
	}
	.sdocs-home-logo.svelte-j0iup2 {
		font-size: 36px;
		font-weight: 700;
		color: var(--color-base-900);
		margin: 0;
	}
	.sdocs-home-logo-img.svelte-j0iup2 {
		width: 160px;
		height: 160px;
		object-fit: contain;
	}
	.sdocs-home-tagline.svelte-j0iup2 {
		font-size: 16px;
		color: var(--color-base-500);
		margin: 8px 0 0;
	}
	.sdocs-home-stats.svelte-j0iup2 {
		display: flex;
		gap: 32px;
	}
	.sdocs-stat.svelte-j0iup2 {
		text-align: center;
	}
	.sdocs-stat-value.svelte-j0iup2 {
		display: block;
		font-size: 28px;
		font-weight: 700;
		color: var(--color-action-500);
	}
	.sdocs-stat-label.svelte-j0iup2 {
		font-size: 13px;
		color: var(--color-base-400);
	}
	.sdocs-home-hint.svelte-j0iup2 {
		font-size: 14px;
		color: var(--color-base-400);
	}
	.sdocs-home-link.svelte-j0iup2 {
		color: var(--color-action-500);
		text-decoration: none;
	}
	.sdocs-home-link.svelte-j0iup2:hover {
		text-decoration: underline;
	}
	.sdocs-home-version.svelte-j0iup2 {
		font-family: var(--mono);
		font-size: 13px;
		margin-left: 4px;
	}

	@media (max-width: 860px) {
		.sdocs-home.svelte-j0iup2 {
			gap: 24px;
			min-height: 0;
		}
		/* The 160px mascot and a 36px wordmark crowd out the stats below. The
		   sizes arrive as --w/--h on a wrapper, so re-declaring them on the
		   icon itself is what takes precedence. */
		.sdocs-home.svelte-j0iup2 .Icon {
			--w: 108px;
			--h: 108px;
		}
		.sdocs-home-logo-img.svelte-j0iup2 {
			width: 108px;
			height: 108px;
		}
		.sdocs-home-logo.svelte-j0iup2 {
			font-size: 28px;
		}
		.sdocs-home-stats.svelte-j0iup2 {
			flex-wrap: wrap;
			justify-content: center;
			gap: 24px;
		}
	}

	.sdocs-notfound.svelte-h9fe80 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		min-height: 400px;
		padding: 24px;
		box-sizing: border-box;
		text-align: center;
		font-family: var(--sans);
	}
	/* Big enough to read as the reason for the page, quiet enough not to be
	   the loudest thing on it — the way back matters more than the number. */
	.sdocs-notfound-code.svelte-h9fe80 {
		margin: 0;
		font-size: 64px;
		font-weight: 700;
		line-height: 1;
		color: var(--color-base-200);
	}
	.sdocs-notfound-title.svelte-h9fe80 {
		margin: 16px 0 0;
		font-size: 24px;
		font-weight: 600;
		color: var(--color-base-900);
	}
	.sdocs-notfound-path.svelte-h9fe80 {
		margin: 12px 0 0;
	}
	.sdocs-notfound-path.svelte-h9fe80 code:where(.svelte-h9fe80) {
		font-family: var(--mono, monospace);
		font-size: 14px;
		padding: 3px 8px;
		border-radius: 4px;
		background: var(--color-base-50);
		color: var(--color-base-700);
		word-break: break-all;
	}
	.sdocs-notfound-hint.svelte-h9fe80 {
		margin: 16px 0 0;
		max-width: 46ch;
		font-size: 14px;
		line-height: 1.6;
		color: var(--color-base-500);
	}
	.sdocs-notfound-hint.svelte-h9fe80 code:where(.svelte-h9fe80) {
		font-family: var(--mono, monospace);
		font-size: 13px;
	}
	.sdocs-notfound-links.svelte-h9fe80 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 20px;
		margin-top: 28px;
	}
	.sdocs-notfound-links.svelte-h9fe80 a:where(.svelte-h9fe80) {
		font-size: 14px;
		color: var(--color-action-500);
		text-decoration: none;
	}
	.sdocs-notfound-links.svelte-h9fe80 a:where(.svelte-h9fe80):hover,
	.sdocs-notfound-links.svelte-h9fe80 a:where(.svelte-h9fe80):focus-visible {
		text-decoration: underline;
	}

	.sdocs-changelog-view.svelte-q8t57f {
		padding: 32px;
		/* The measure does the reading width; this only stops the column
		   sprawling on a very wide screen. */
		max-width: 900px;
	}

	.sdocs-changelog-head.svelte-q8t57f h1:where(.svelte-q8t57f) {
		margin: 0;
		font-size: 24px;
		font-weight: 700;
		color: var(--color-base-900);
	}

	.sdocs-changelog-head.svelte-q8t57f p:where(.svelte-q8t57f) {
		margin: 6px 0 0;
		font-size: 14px;
		line-height: 1.5;
		color: var(--color-base-500);
	}

	.sdocs-changelog-body.svelte-q8t57f {
		margin-top: 20px;
	}

	/* Each release opens a section: a rule above it turns a long file into a
	   list of releases rather than one unbroken wall. */
	.sdocs-changelog-body.svelte-q8t57f h2 {
		margin-top: 2em;
		padding-top: 1em;
		border-top: 1px solid var(--color-base-200);
	}

	.sdocs-changelog-empty.svelte-q8t57f {
		margin: 24px 0 0;
		font-size: 14px;
		color: var(--color-base-500);
	}

	.sdocs-errors.svelte-k3faqq {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		min-height: 100%;
		padding: 48px 24px;
		background: var(--color-base-0);
		font-family: var(--sans);
	}
	.sdocs-errors-panel.svelte-k3faqq {
		max-width: 760px;
		width: 100%;
	}
	.sdocs-errors-title.svelte-k3faqq {
		font-size: 22px;
		font-weight: 700;
		color: var(--color-red-500, #d42c29);
		margin: 0 0 8px;
	}
	.sdocs-errors-hint.svelte-k3faqq {
		font-size: 14px;
		color: var(--color-base-500);
		margin: 0 0 24px;
	}
	.sdocs-errors-hint.svelte-k3faqq code:where(.svelte-k3faqq) {
		font-family: var(--mono);
		font-size: 0.92em;
	}
	.sdocs-errors-list.svelte-k3faqq {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.sdocs-error.svelte-k3faqq {
		border: 1px solid var(--color-red-200, #f3b9b8);
		border-left: 3px solid var(--color-red-500, #d42c29);
		border-radius: 6px;
		padding: 12px 16px;
		background: color-mix(in srgb, var(--color-red-500, #d42c29) 4%, transparent);
	}
	.sdocs-error-message.svelte-k3faqq {
		font-size: 14px;
		color: var(--color-base-900);
		margin: 0;
	}
	.sdocs-error-file.svelte-k3faqq {
		font-family: var(--mono);
		font-size: 12px;
		color: var(--color-base-500);
		margin: 6px 0 0;
	}
/* Figtree — variable font (300–900) */
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('/sdocs/assets/figtree-latin-CEHu_veL.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('/sdocs/assets/figtree-latin-ext-C5tEHAKb.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}
@font-face {
	font-family: 'Figtree';
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url('/sdocs/assets/figtree-italic-latin-D-K1-OIr.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Figtree';
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url('/sdocs/assets/figtree-italic-latin-ext-DwXAj4Ry.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* JetBrains Mono — variable font (100–800) */
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url('/sdocs/assets/jetbrains-mono-latin-D000Msq0.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url('/sdocs/assets/jetbrains-mono-latin-ext-Dey_PoKW.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: italic;
	font-weight: 100 800;
	font-display: swap;
	src: url('/sdocs/assets/jetbrains-mono-italic-latin-D64VPgFD.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: italic;
	font-weight: 100 800;
	font-display: swap;
	src: url('/sdocs/assets/jetbrains-mono-italic-latin-ext-Dj3FBkEo.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}
/* sdocs theme tokens
 *
 * Shared foundation imported by both sdocs.css (shell) and demo.css (iframes).
 * Defines font vars, all color primitives, and light-mode semantic aliases on :root.
 */

:root {
	--sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;

	/* zinc — Tailwind v4 zinc (oklch), 150-850 interpolated */
	--color-zinc-0: #fff;
	--color-zinc-50: oklch(0.985 0 0);
	--color-zinc-100: oklch(0.967 0.001 286.375);
	--color-zinc-150: oklch(0.944 0.003 286.348);
	--color-zinc-200: oklch(0.920 0.004 286.32);
	--color-zinc-250: oklch(0.896 0.005 286.303);
	--color-zinc-300: oklch(0.871 0.006 286.286);
	--color-zinc-350: oklch(0.788 0.011 286.177);
	--color-zinc-400: oklch(0.705 0.015 286.067);
	--color-zinc-450: oklch(0.629 0.016 286.003);
	--color-zinc-500: oklch(0.552 0.016 285.938);
	--color-zinc-550: oklch(0.497 0.017 285.862);
	--color-zinc-600: oklch(0.442 0.017 285.786);
	--color-zinc-650: oklch(0.406 0.015 285.796);
	--color-zinc-700: oklch(0.370 0.013 285.805);
	--color-zinc-750: oklch(0.322 0.010 285.919);
	--color-zinc-800: oklch(0.274 0.006 286.033);
	--color-zinc-850: oklch(0.242 0.006 285.959);
	--color-zinc-900: oklch(0.210 0.006 285.885);
	--color-zinc-950: oklch(0.141 0.005 285.823);
	--color-zinc-1000: #000;

	/* blue — Tailwind v4 blue (oklch), 150-850 interpolated */
	--color-blue-50: oklch(0.970 0.014 254.604);
	--color-blue-100: oklch(0.932 0.032 255.585);
	--color-blue-150: oklch(0.907 0.046 254.857);
	--color-blue-200: oklch(0.882 0.059 254.128);
	--color-blue-250: oklch(0.846 0.082 252.971);
	--color-blue-300: oklch(0.809 0.105 251.813);
	--color-blue-350: oklch(0.758 0.135 253.219);
	--color-blue-400: oklch(0.707 0.165 254.624);
	--color-blue-450: oklch(0.665 0.190 257.220);
	--color-blue-500: oklch(0.623 0.214 259.815);
	--color-blue-550: oklch(0.585 0.230 261.348);
	--color-blue-600: oklch(0.546 0.245 262.881);
	--color-blue-650: oklch(0.517 0.244 263.629);
	--color-blue-700: oklch(0.488 0.243 264.376);
	--color-blue-750: oklch(0.456 0.221 265.007);
	--color-blue-800: oklch(0.424 0.199 265.638);
	--color-blue-850: oklch(0.402 0.173 265.580);
	--color-blue-900: oklch(0.379 0.146 265.522);
	--color-blue-950: oklch(0.282 0.091 267.935);

	/* red — Tailwind v4 red (oklch), 150-850 interpolated */
	--color-red-50: oklch(0.971 0.013 17.38);
	--color-red-100: oklch(0.936 0.032 17.717);
	--color-red-150: oklch(0.911 0.047 18.026);
	--color-red-200: oklch(0.885 0.062 18.334);
	--color-red-250: oklch(0.847 0.088 18.953);
	--color-red-300: oklch(0.808 0.114 19.571);
	--color-red-350: oklch(0.756 0.153 20.894);
	--color-red-400: oklch(0.704 0.191 22.216);
	--color-red-450: oklch(0.671 0.214 23.774);
	--color-red-500: oklch(0.637 0.237 25.331);
	--color-red-550: oklch(0.607 0.241 26.328);
	--color-red-600: oklch(0.577 0.245 27.325);
	--color-red-650: oklch(0.541 0.229 27.422);
	--color-red-700: oklch(0.505 0.213 27.518);
	--color-red-750: oklch(0.475 0.195 27.209);
	--color-red-800: oklch(0.444 0.177 26.899);
	--color-red-850: oklch(0.420 0.159 26.311);
	--color-red-900: oklch(0.396 0.141 25.723);
	--color-red-950: oklch(0.258 0.092 26.042);

	/* green — Tailwind v4 green (oklch), 150-850 interpolated */
	--color-green-50: oklch(0.982 0.018 155.826);
	--color-green-100: oklch(0.962 0.044 156.743);
	--color-green-150: oklch(0.944 0.064 156.369);
	--color-green-200: oklch(0.925 0.084 155.995);
	--color-green-250: oklch(0.898 0.117 155.222);
	--color-green-300: oklch(0.871 0.150 154.449);
	--color-green-350: oklch(0.832 0.180 153.080);
	--color-green-400: oklch(0.792 0.209 151.711);
	--color-green-450: oklch(0.758 0.214 150.645);
	--color-green-500: oklch(0.723 0.219 149.579);
	--color-green-550: oklch(0.675 0.207 149.397);
	--color-green-600: oklch(0.627 0.194 149.214);
	--color-green-650: oklch(0.577 0.174 149.642);
	--color-green-700: oklch(0.527 0.154 150.069);
	--color-green-750: oklch(0.488 0.137 150.699);
	--color-green-800: oklch(0.448 0.119 151.328);
	--color-green-850: oklch(0.421 0.107 151.932);
	--color-green-900: oklch(0.393 0.095 152.535);
	--color-green-950: oklch(0.266 0.065 152.934);

	/* orange — Tailwind v4 orange (oklch), 150-850 interpolated */
	--color-orange-50: oklch(0.980 0.016 73.684);
	--color-orange-100: oklch(0.954 0.038 75.164);
	--color-orange-150: oklch(0.928 0.057 72.931);
	--color-orange-200: oklch(0.901 0.076 70.697);
	--color-orange-250: oklch(0.869 0.102 68.494);
	--color-orange-300: oklch(0.837 0.128 66.290);
	--color-orange-350: oklch(0.794 0.156 61.112);
	--color-orange-400: oklch(0.750 0.183 55.934);
	--color-orange-450: oklch(0.728 0.198 51.769);
	--color-orange-500: oklch(0.705 0.213 47.604);
	--color-orange-550: oklch(0.676 0.218 44.360);
	--color-orange-600: oklch(0.646 0.222 41.116);
	--color-orange-650: oklch(0.600 0.209 39.759);
	--color-orange-700: oklch(0.553 0.195 38.402);
	--color-orange-750: oklch(0.512 0.176 37.853);
	--color-orange-800: oklch(0.470 0.157 37.304);
	--color-orange-850: oklch(0.439 0.140 37.738);
	--color-orange-900: oklch(0.408 0.123 38.172);
	--color-orange-950: oklch(0.266 0.079 36.259);

	/* yellow — Tailwind v4 yellow (oklch), 150-850 interpolated */
	--color-yellow-50: oklch(0.987 0.026 102.212);
	--color-yellow-100: oklch(0.973 0.071 103.193);
	--color-yellow-150: oklch(0.959 0.100 102.367);
	--color-yellow-200: oklch(0.945 0.129 101.540);
	--color-yellow-250: oklch(0.925 0.156 99.826);
	--color-yellow-300: oklch(0.905 0.182 98.111);
	--color-yellow-350: oklch(0.879 0.191 95.024);
	--color-yellow-400: oklch(0.852 0.199 91.936);
	--color-yellow-450: oklch(0.824 0.192 88.992);
	--color-yellow-500: oklch(0.795 0.184 86.047);
	--color-yellow-550: oklch(0.738 0.173 80.941);
	--color-yellow-600: oklch(0.681 0.162 75.834);
	--color-yellow-650: oklch(0.618 0.149 71.138);
	--color-yellow-700: oklch(0.554 0.135 66.442);
	--color-yellow-750: oklch(0.515 0.125 64.175);
	--color-yellow-800: oklch(0.476 0.114 61.907);
	--color-yellow-850: oklch(0.449 0.105 59.808);
	--color-yellow-900: oklch(0.421 0.095 57.708);
	--color-yellow-950: oklch(0.286 0.066 53.813);

	/* purple — Tailwind v4 purple (oklch), 150-850 interpolated */
	--color-purple-50: oklch(0.977 0.014 308.299);
	--color-purple-100: oklch(0.946 0.033 307.174);
	--color-purple-150: oklch(0.924 0.048 306.939);
	--color-purple-200: oklch(0.902 0.063 306.703);
	--color-purple-250: oklch(0.865 0.091 306.543);
	--color-purple-300: oklch(0.827 0.119 306.383);
	--color-purple-350: oklch(0.771 0.161 305.944);
	--color-purple-400: oklch(0.714 0.203 305.504);
	--color-purple-450: oklch(0.671 0.234 304.702);
	--color-purple-500: oklch(0.627 0.265 303.900);
	--color-purple-550: oklch(0.593 0.277 303.111);
	--color-purple-600: oklch(0.558 0.288 302.321);
	--color-purple-650: oklch(0.527 0.277 302.123);
	--color-purple-700: oklch(0.496 0.265 301.924);
	--color-purple-750: oklch(0.467 0.242 302.824);
	--color-purple-800: oklch(0.438 0.218 303.724);
	--color-purple-850: oklch(0.410 0.197 304.356);
	--color-purple-900: oklch(0.381 0.176 304.987);
	--color-purple-950: oklch(0.291 0.149 302.717);

	/* lime — Tailwind v4 lime (oklch), 150-850 interpolated */
	--color-lime-50: oklch(0.986 0.031 120.757);
	--color-lime-100: oklch(0.967 0.067 122.328);
	--color-lime-150: oklch(0.953 0.097 123.325);
	--color-lime-200: oklch(0.938 0.127 124.321);
	--color-lime-250: oklch(0.918 0.162 125.493);
	--color-lime-300: oklch(0.897 0.196 126.665);
	--color-lime-350: oklch(0.869 0.217 127.758);
	--color-lime-400: oklch(0.841 0.238 128.850);
	--color-lime-450: oklch(0.805 0.236 129.850);
	--color-lime-500: oklch(0.768 0.233 130.850);
	--color-lime-550: oklch(0.708 0.217 131.267);
	--color-lime-600: oklch(0.648 0.200 131.684);
	--color-lime-650: oklch(0.590 0.179 131.637);
	--color-lime-700: oklch(0.532 0.157 131.589);
	--color-lime-750: oklch(0.493 0.141 131.261);
	--color-lime-800: oklch(0.453 0.124 130.933);
	--color-lime-850: oklch(0.429 0.113 130.998);
	--color-lime-900: oklch(0.405 0.101 131.063);
	--color-lime-950: oklch(0.274 0.072 132.109);

	/* cyan — Tailwind v4 cyan (oklch), 150-850 interpolated */
	--color-cyan-50: oklch(0.984 0.019 200.873);
	--color-cyan-100: oklch(0.956 0.045 203.388);
	--color-cyan-150: oklch(0.937 0.063 204.215);
	--color-cyan-200: oklch(0.917 0.080 205.041);
	--color-cyan-250: oklch(0.891 0.104 206.060);
	--color-cyan-300: oklch(0.865 0.127 207.078);
	--color-cyan-350: oklch(0.827 0.141 209.304);
	--color-cyan-400: oklch(0.789 0.154 211.530);
	--color-cyan-450: oklch(0.752 0.149 213.376);
	--color-cyan-500: oklch(0.715 0.143 215.221);
	--color-cyan-550: oklch(0.662 0.135 218.472);
	--color-cyan-600: oklch(0.609 0.126 221.723);
	--color-cyan-650: oklch(0.565 0.116 222.426);
	--color-cyan-700: oklch(0.520 0.105 223.128);
	--color-cyan-750: oklch(0.485 0.095 223.706);
	--color-cyan-800: oklch(0.450 0.085 224.283);
	--color-cyan-850: oklch(0.424 0.078 225.838);
	--color-cyan-900: oklch(0.398 0.070 227.392);
	--color-cyan-950: oklch(0.302 0.056 229.695);

	/* slate — Tailwind v4 slate (oklch), 150-850 interpolated */
	--color-slate-50: oklch(0.984 0.003 247.858);
	--color-slate-100: oklch(0.968 0.007 247.896);
	--color-slate-150: oklch(0.949 0.010 251.702);
	--color-slate-200: oklch(0.929 0.013 255.508);
	--color-slate-250: oklch(0.899 0.018 254.201);
	--color-slate-300: oklch(0.869 0.022 252.894);
	--color-slate-350: oklch(0.787 0.031 254.841);
	--color-slate-400: oklch(0.704 0.040 256.788);
	--color-slate-450: oklch(0.629 0.043 257.103);
	--color-slate-500: oklch(0.554 0.046 257.417);
	--color-slate-550: oklch(0.500 0.045 257.349);
	--color-slate-600: oklch(0.446 0.043 257.281);
	--color-slate-650: oklch(0.409 0.044 257.284);
	--color-slate-700: oklch(0.372 0.044 257.287);
	--color-slate-750: oklch(0.326 0.043 258.659);
	--color-slate-800: oklch(0.279 0.041 260.031);
	--color-slate-850: oklch(0.244 0.042 262.893);
	--color-slate-900: oklch(0.208 0.042 265.755);
	--color-slate-950: oklch(0.129 0.042 264.695);

	/* neutral — Tailwind v4 neutral (oklch), 150-850 interpolated */
	--color-neutral-50: oklch(0.985 0 0);
	--color-neutral-100: oklch(0.970 0 0);
	--color-neutral-150: oklch(0.946 0 0);
	--color-neutral-200: oklch(0.922 0 0);
	--color-neutral-250: oklch(0.896 0 0);
	--color-neutral-300: oklch(0.870 0 0);
	--color-neutral-350: oklch(0.789 0 0);
	--color-neutral-400: oklch(0.708 0 0);
	--color-neutral-450: oklch(0.632 0 0);
	--color-neutral-500: oklch(0.556 0 0);
	--color-neutral-550: oklch(0.498 0 0);
	--color-neutral-600: oklch(0.439 0 0);
	--color-neutral-650: oklch(0.405 0 0);
	--color-neutral-700: oklch(0.371 0 0);
	--color-neutral-750: oklch(0.320 0 0);
	--color-neutral-800: oklch(0.269 0 0);
	--color-neutral-850: oklch(0.237 0 0);
	--color-neutral-900: oklch(0.205 0 0);
	--color-neutral-950: oklch(0.145 0 0);

	/* stone — Tailwind v4 stone (oklch), 150-850 interpolated */
	--color-stone-50: oklch(0.985 0.001 106.423);
	--color-stone-100: oklch(0.970 0.001 106.424);
	--color-stone-150: oklch(0.947 0.002 77.571);
	--color-stone-200: oklch(0.923 0.003 48.717);
	--color-stone-250: oklch(0.896 0.004 52.542);
	--color-stone-300: oklch(0.869 0.005 56.366);
	--color-stone-350: oklch(0.789 0.008 56.313);
	--color-stone-400: oklch(0.709 0.010 56.259);
	--color-stone-450: oklch(0.631 0.012 57.165);
	--color-stone-500: oklch(0.553 0.013 58.071);
	--color-stone-550: oklch(0.499 0.012 65.855);
	--color-stone-600: oklch(0.444 0.011 73.639);
	--color-stone-650: oklch(0.409 0.011 70.599);
	--color-stone-700: oklch(0.374 0.010 67.558);
	--color-stone-750: oklch(0.321 0.009 50.928);
	--color-stone-800: oklch(0.268 0.007 34.298);
	--color-stone-850: oklch(0.242 0.007 45.171);
	--color-stone-900: oklch(0.216 0.006 56.043);
	--color-stone-950: oklch(0.147 0.004 49.250);

	/* amber — Tailwind v4 amber (oklch), 150-850 interpolated */
	--color-amber-50: oklch(0.987 0.022 95.277);
	--color-amber-100: oklch(0.962 0.059 95.617);
	--color-amber-150: oklch(0.943 0.090 95.682);
	--color-amber-200: oklch(0.924 0.120 95.746);
	--color-amber-250: oklch(0.902 0.145 93.676);
	--color-amber-300: oklch(0.879 0.169 91.605);
	--color-amber-350: oklch(0.854 0.179 88.017);
	--color-amber-400: oklch(0.828 0.189 84.429);
	--color-amber-450: oklch(0.799 0.189 77.255);
	--color-amber-500: oklch(0.769 0.188 70.080);
	--color-amber-550: oklch(0.718 0.184 64.199);
	--color-amber-600: oklch(0.666 0.179 58.318);
	--color-amber-650: oklch(0.611 0.171 53.658);
	--color-amber-700: oklch(0.555 0.163 48.998);
	--color-amber-750: oklch(0.514 0.150 47.600);
	--color-amber-800: oklch(0.473 0.137 46.201);
	--color-amber-850: oklch(0.444 0.125 46.053);
	--color-amber-900: oklch(0.414 0.112 45.904);
	--color-amber-950: oklch(0.279 0.077 45.635);

	/* emerald — Tailwind v4 emerald (oklch), 150-850 interpolated */
	--color-emerald-50: oklch(0.979 0.021 166.113);
	--color-emerald-100: oklch(0.950 0.052 163.051);
	--color-emerald-150: oklch(0.928 0.073 163.601);
	--color-emerald-200: oklch(0.905 0.093 164.150);
	--color-emerald-250: oklch(0.875 0.118 164.564);
	--color-emerald-300: oklch(0.845 0.143 164.978);
	--color-emerald-350: oklch(0.805 0.160 164.101);
	--color-emerald-400: oklch(0.765 0.177 163.223);
	--color-emerald-450: oklch(0.731 0.174 162.852);
	--color-emerald-500: oklch(0.696 0.170 162.480);
	--color-emerald-550: oklch(0.646 0.158 162.853);
	--color-emerald-600: oklch(0.596 0.145 163.225);
	--color-emerald-650: oklch(0.552 0.132 164.419);
	--color-emerald-700: oklch(0.508 0.118 165.612);
	--color-emerald-750: oklch(0.470 0.107 166.263);
	--color-emerald-800: oklch(0.432 0.095 166.913);
	--color-emerald-850: oklch(0.405 0.086 167.927);
	--color-emerald-900: oklch(0.378 0.077 168.940);
	--color-emerald-950: oklch(0.262 0.051 172.552);

	/* teal — Tailwind v4 teal (oklch), 150-850 interpolated */
	--color-teal-50: oklch(0.984 0.014 180.720);
	--color-teal-100: oklch(0.953 0.051 180.801);
	--color-teal-150: oklch(0.932 0.074 180.614);
	--color-teal-200: oklch(0.910 0.096 180.426);
	--color-teal-250: oklch(0.883 0.117 180.749);
	--color-teal-300: oklch(0.855 0.138 181.071);
	--color-teal-350: oklch(0.816 0.145 181.492);
	--color-teal-400: oklch(0.777 0.152 181.912);
	--color-teal-450: oklch(0.741 0.146 182.208);
	--color-teal-500: oklch(0.704 0.140 182.503);
	--color-teal-550: oklch(0.652 0.129 183.604);
	--color-teal-600: oklch(0.600 0.118 184.704);
	--color-teal-650: oklch(0.556 0.107 185.548);
	--color-teal-700: oklch(0.511 0.096 186.391);
	--color-teal-750: oklch(0.474 0.087 187.304);
	--color-teal-800: oklch(0.437 0.078 188.216);
	--color-teal-850: oklch(0.412 0.071 188.316);
	--color-teal-900: oklch(0.386 0.063 188.416);
	--color-teal-950: oklch(0.277 0.046 192.524);

	/* sky — Tailwind v4 sky (oklch), 150-850 interpolated */
	--color-sky-50: oklch(0.977 0.013 236.620);
	--color-sky-100: oklch(0.951 0.026 236.824);
	--color-sky-150: oklch(0.926 0.042 233.863);
	--color-sky-200: oklch(0.901 0.058 230.902);
	--color-sky-250: oklch(0.865 0.085 230.610);
	--color-sky-300: oklch(0.828 0.111 230.318);
	--color-sky-350: oklch(0.787 0.136 231.490);
	--color-sky-400: oklch(0.746 0.160 232.661);
	--color-sky-450: oklch(0.716 0.165 234.992);
	--color-sky-500: oklch(0.685 0.169 237.323);
	--color-sky-550: oklch(0.637 0.164 239.645);
	--color-sky-600: oklch(0.588 0.158 241.966);
	--color-sky-650: oklch(0.544 0.146 242.358);
	--color-sky-700: oklch(0.500 0.134 242.749);
	--color-sky-750: oklch(0.472 0.122 241.770);
	--color-sky-800: oklch(0.443 0.110 240.790);
	--color-sky-850: oklch(0.417 0.100 240.833);
	--color-sky-900: oklch(0.391 0.090 240.876);
	--color-sky-950: oklch(0.293 0.066 243.157);

	/* indigo — Tailwind v4 indigo (oklch), 150-850 interpolated */
	--color-indigo-50: oklch(0.962 0.018 272.314);
	--color-indigo-100: oklch(0.930 0.034 272.788);
	--color-indigo-150: oklch(0.900 0.050 273.414);
	--color-indigo-200: oklch(0.870 0.065 274.039);
	--color-indigo-250: oklch(0.828 0.090 274.376);
	--color-indigo-300: oklch(0.785 0.115 274.713);
	--color-indigo-350: oklch(0.729 0.149 275.824);
	--color-indigo-400: oklch(0.673 0.182 276.935);
	--color-indigo-450: oklch(0.629 0.208 277.026);
	--color-indigo-500: oklch(0.585 0.233 277.117);
	--color-indigo-550: oklch(0.548 0.248 277.042);
	--color-indigo-600: oklch(0.511 0.262 276.966);
	--color-indigo-650: oklch(0.484 0.251 276.995);
	--color-indigo-700: oklch(0.457 0.240 277.023);
	--color-indigo-750: oklch(0.428 0.218 277.195);
	--color-indigo-800: oklch(0.398 0.195 277.366);
	--color-indigo-850: oklch(0.379 0.170 278.032);
	--color-indigo-900: oklch(0.359 0.144 278.697);
	--color-indigo-950: oklch(0.257 0.090 281.288);

	/* violet — Tailwind v4 violet (oklch), 150-850 interpolated */
	--color-violet-50: oklch(0.969 0.016 293.756);
	--color-violet-100: oklch(0.943 0.029 294.588);
	--color-violet-150: oklch(0.919 0.043 293.936);
	--color-violet-200: oklch(0.894 0.057 293.283);
	--color-violet-250: oklch(0.853 0.084 293.427);
	--color-violet-300: oklch(0.811 0.111 293.571);
	--color-violet-350: oklch(0.757 0.147 293.556);
	--color-violet-400: oklch(0.702 0.183 293.541);
	--color-violet-450: oklch(0.654 0.217 293.129);
	--color-violet-500: oklch(0.606 0.250 292.717);
	--color-violet-550: oklch(0.574 0.266 292.863);
	--color-violet-600: oklch(0.541 0.281 293.009);
	--color-violet-650: oklch(0.516 0.276 292.795);
	--color-violet-700: oklch(0.491 0.270 292.581);
	--color-violet-750: oklch(0.462 0.251 292.670);
	--color-violet-800: oklch(0.432 0.232 292.759);
	--color-violet-850: oklch(0.406 0.211 293.252);
	--color-violet-900: oklch(0.380 0.189 293.745);
	--color-violet-950: oklch(0.283 0.141 291.089);

	/* fuchsia — Tailwind v4 fuchsia (oklch), 150-850 interpolated */
	--color-fuchsia-50: oklch(0.977 0.017 320.058);
	--color-fuchsia-100: oklch(0.952 0.037 318.852);
	--color-fuchsia-150: oklch(0.928 0.057 319.236);
	--color-fuchsia-200: oklch(0.903 0.076 319.620);
	--color-fuchsia-250: oklch(0.868 0.111 320.527);
	--color-fuchsia-300: oklch(0.833 0.145 321.434);
	--color-fuchsia-350: oklch(0.787 0.192 321.797);
	--color-fuchsia-400: oklch(0.740 0.238 322.160);
	--color-fuchsia-450: oklch(0.704 0.267 322.155);
	--color-fuchsia-500: oklch(0.667 0.295 322.150);
	--color-fuchsia-550: oklch(0.629 0.294 322.523);
	--color-fuchsia-600: oklch(0.591 0.293 322.896);
	--color-fuchsia-650: oklch(0.555 0.273 323.423);
	--color-fuchsia-700: oklch(0.518 0.253 323.949);
	--color-fuchsia-750: oklch(0.485 0.232 324.270);
	--color-fuchsia-800: oklch(0.452 0.211 324.591);
	--color-fuchsia-850: oklch(0.427 0.191 325.102);
	--color-fuchsia-900: oklch(0.401 0.170 325.612);
	--color-fuchsia-950: oklch(0.293 0.136 325.661);

	/* pink — Tailwind v4 pink (oklch), 150-850 interpolated */
	--color-pink-50: oklch(0.971 0.014 343.198);
	--color-pink-100: oklch(0.948 0.028 342.258);
	--color-pink-150: oklch(0.924 0.045 342.745);
	--color-pink-200: oklch(0.899 0.061 343.231);
	--color-pink-250: oklch(0.861 0.091 344.625);
	--color-pink-300: oklch(0.823 0.120 346.018);
	--color-pink-350: oklch(0.771 0.161 347.890);
	--color-pink-400: oklch(0.718 0.202 349.761);
	--color-pink-450: oklch(0.687 0.222 352.035);
	--color-pink-500: oklch(0.656 0.241 354.308);
	--color-pink-550: oklch(0.624 0.245 357.446);
	--color-pink-600: oklch(0.592 0.249 0.584);
	--color-pink-650: oklch(0.559 0.236 2.271);
	--color-pink-700: oklch(0.525 0.223 3.958);
	--color-pink-750: oklch(0.492 0.205 3.887);
	--color-pink-800: oklch(0.459 0.187 3.815);
	--color-pink-850: oklch(0.434 0.170 3.124);
	--color-pink-900: oklch(0.408 0.153 2.432);
	--color-pink-950: oklch(0.284 0.109 3.907);

	/* rose — Tailwind v4 rose (oklch), 150-850 interpolated */
	--color-rose-50: oklch(0.969 0.015 12.422);
	--color-rose-100: oklch(0.941 0.030 12.580);
	--color-rose-150: oklch(0.917 0.044 11.291);
	--color-rose-200: oklch(0.892 0.058 10.001);
	--color-rose-250: oklch(0.851 0.088 10.820);
	--color-rose-300: oklch(0.810 0.117 11.638);
	--color-rose-350: oklch(0.761 0.156 12.533);
	--color-rose-400: oklch(0.712 0.194 13.428);
	--color-rose-450: oklch(0.679 0.220 14.934);
	--color-rose-500: oklch(0.645 0.246 16.439);
	--color-rose-550: oklch(0.616 0.250 17.012);
	--color-rose-600: oklch(0.586 0.253 17.585);
	--color-rose-650: oklch(0.550 0.238 17.260);
	--color-rose-700: oklch(0.514 0.222 16.935);
	--color-rose-750: oklch(0.485 0.205 15.316);
	--color-rose-800: oklch(0.455 0.188 13.697);
	--color-rose-850: oklch(0.430 0.170 13.072);
	--color-rose-900: oklch(0.404 0.152 12.447);
	--color-rose-950: oklch(0.271 0.105 12.094);

	/* base — layouts, backgrounds, surfaces, borders, text (light mode) */
	--color-base-0: var(--color-zinc-0);
	--color-base-50: var(--color-zinc-50);
	--color-base-100: var(--color-zinc-100);
	--color-base-150: var(--color-zinc-150);
	--color-base-200: var(--color-zinc-200);
	--color-base-250: var(--color-zinc-250);
	--color-base-300: var(--color-zinc-300);
	--color-base-350: var(--color-zinc-350);
	--color-base-400: var(--color-zinc-400);
	--color-base-450: var(--color-zinc-450);
	--color-base-500: var(--color-zinc-500);
	--color-base-550: var(--color-zinc-550);
	--color-base-600: var(--color-zinc-600);
	--color-base-650: var(--color-zinc-650);
	--color-base-700: var(--color-zinc-700);
	--color-base-750: var(--color-zinc-750);
	--color-base-800: var(--color-zinc-800);
	--color-base-850: var(--color-zinc-850);
	--color-base-900: var(--color-zinc-900);
	--color-base-950: var(--color-zinc-950);
	--color-base-1000: var(--color-zinc-1000);
	/* success */
	--color-success-50: var(--color-green-50);
	--color-success-100: var(--color-green-100);
	--color-success-150: var(--color-green-150);
	--color-success-200: var(--color-green-200);
	--color-success-250: var(--color-green-250);
	--color-success-300: var(--color-green-300);
	--color-success-350: var(--color-green-350);
	--color-success-400: var(--color-green-400);
	--color-success-450: var(--color-green-450);
	--color-success-500: var(--color-green-500);
	--color-success-550: var(--color-green-550);
	--color-success-600: var(--color-green-600);
	--color-success-650: var(--color-green-650);
	--color-success-700: var(--color-green-700);
	--color-success-750: var(--color-green-750);
	--color-success-800: var(--color-green-800);
	--color-success-850: var(--color-green-850);
	--color-success-900: var(--color-green-900);
	--color-success-950: var(--color-green-950);
	/* danger */
	--color-danger-50: var(--color-red-50);
	--color-danger-100: var(--color-red-100);
	--color-danger-150: var(--color-red-150);
	--color-danger-200: var(--color-red-200);
	--color-danger-250: var(--color-red-250);
	--color-danger-300: var(--color-red-300);
	--color-danger-350: var(--color-red-350);
	--color-danger-400: var(--color-red-400);
	--color-danger-450: var(--color-red-450);
	--color-danger-500: var(--color-red-500);
	--color-danger-550: var(--color-red-550);
	--color-danger-600: var(--color-red-600);
	--color-danger-650: var(--color-red-650);
	--color-danger-700: var(--color-red-700);
	--color-danger-750: var(--color-red-750);
	--color-danger-800: var(--color-red-800);
	--color-danger-850: var(--color-red-850);
	--color-danger-900: var(--color-red-900);
	--color-danger-950: var(--color-red-950);
	/* warning */
	--color-warning-50: var(--color-orange-50);
	--color-warning-100: var(--color-orange-100);
	--color-warning-150: var(--color-orange-150);
	--color-warning-200: var(--color-orange-200);
	--color-warning-250: var(--color-orange-250);
	--color-warning-300: var(--color-orange-300);
	--color-warning-350: var(--color-orange-350);
	--color-warning-400: var(--color-orange-400);
	--color-warning-450: var(--color-orange-450);
	--color-warning-500: var(--color-orange-500);
	--color-warning-550: var(--color-orange-550);
	--color-warning-600: var(--color-orange-600);
	--color-warning-650: var(--color-orange-650);
	--color-warning-700: var(--color-orange-700);
	--color-warning-750: var(--color-orange-750);
	--color-warning-800: var(--color-orange-800);
	--color-warning-850: var(--color-orange-850);
	--color-warning-900: var(--color-orange-900);
	--color-warning-950: var(--color-orange-950);
	/* focus */
	--color-focus-50: var(--color-yellow-50);
	--color-focus-100: var(--color-yellow-100);
	--color-focus-150: var(--color-yellow-150);
	--color-focus-200: var(--color-yellow-200);
	--color-focus-250: var(--color-yellow-250);
	--color-focus-300: var(--color-yellow-300);
	--color-focus-350: var(--color-yellow-350);
	--color-focus-400: var(--color-yellow-400);
	--color-focus-450: var(--color-yellow-450);
	--color-focus-500: var(--color-yellow-500);
	--color-focus-550: var(--color-yellow-550);
	--color-focus-600: var(--color-yellow-600);
	--color-focus-650: var(--color-yellow-650);
	--color-focus-700: var(--color-yellow-700);
	--color-focus-750: var(--color-yellow-750);
	--color-focus-800: var(--color-yellow-800);
	--color-focus-850: var(--color-yellow-850);
	--color-focus-900: var(--color-yellow-900);
	--color-focus-950: var(--color-yellow-950);
	/* component */
	--color-component-50: var(--color-pink-50);
	--color-component-100: var(--color-pink-100);
	--color-component-150: var(--color-pink-150);
	--color-component-200: var(--color-pink-200);
	--color-component-250: var(--color-pink-250);
	--color-component-300: var(--color-pink-300);
	--color-component-350: var(--color-pink-350);
	--color-component-400: var(--color-pink-400);
	--color-component-450: var(--color-pink-450);
	--color-component-500: var(--color-pink-500);
	--color-component-550: var(--color-pink-550);
	--color-component-600: var(--color-pink-600);
	--color-component-650: var(--color-pink-650);
	--color-component-700: var(--color-pink-700);
	--color-component-750: var(--color-pink-750);
	--color-component-800: var(--color-pink-800);
	--color-component-850: var(--color-pink-850);
	--color-component-900: var(--color-pink-900);
	--color-component-950: var(--color-pink-950);
	/* layout */
	--color-layout-50: var(--color-purple-50);
	--color-layout-100: var(--color-purple-100);
	--color-layout-150: var(--color-purple-150);
	--color-layout-200: var(--color-purple-200);
	--color-layout-250: var(--color-purple-250);
	--color-layout-300: var(--color-purple-300);
	--color-layout-350: var(--color-purple-350);
	--color-layout-400: var(--color-purple-400);
	--color-layout-450: var(--color-purple-450);
	--color-layout-500: var(--color-purple-500);
	--color-layout-550: var(--color-purple-550);
	--color-layout-600: var(--color-purple-600);
	--color-layout-650: var(--color-purple-650);
	--color-layout-700: var(--color-purple-700);
	--color-layout-750: var(--color-purple-750);
	--color-layout-800: var(--color-purple-800);
	--color-layout-850: var(--color-purple-850);
	--color-layout-900: var(--color-purple-900);
	--color-layout-950: var(--color-purple-950);

	--color-pattern-50: var(--color-emerald-50);
	--color-pattern-100: var(--color-emerald-100);
	--color-pattern-150: var(--color-emerald-150);
	--color-pattern-200: var(--color-emerald-200);
	--color-pattern-250: var(--color-emerald-250);
	--color-pattern-300: var(--color-emerald-300);
	--color-pattern-350: var(--color-emerald-350);
	--color-pattern-400: var(--color-emerald-400);
	--color-pattern-450: var(--color-emerald-450);
	--color-pattern-500: var(--color-emerald-500);
	--color-pattern-550: var(--color-emerald-550);
	--color-pattern-600: var(--color-emerald-600);
	--color-pattern-650: var(--color-emerald-650);
	--color-pattern-700: var(--color-emerald-700);
	--color-pattern-750: var(--color-emerald-750);
	--color-pattern-800: var(--color-emerald-800);
	--color-pattern-850: var(--color-emerald-850);
	--color-pattern-900: var(--color-emerald-900);
	--color-pattern-950: var(--color-emerald-950);
	/* example */
	--color-example-50: var(--color-cyan-50);
	--color-example-100: var(--color-cyan-100);
	--color-example-150: var(--color-cyan-150);
	--color-example-200: var(--color-cyan-200);
	--color-example-250: var(--color-cyan-250);
	--color-example-300: var(--color-cyan-300);
	--color-example-350: var(--color-cyan-350);
	--color-example-400: var(--color-cyan-400);
	--color-example-450: var(--color-cyan-450);
	--color-example-500: var(--color-cyan-500);
	--color-example-550: var(--color-cyan-550);
	--color-example-600: var(--color-cyan-600);
	--color-example-650: var(--color-cyan-650);
	--color-example-700: var(--color-cyan-700);
	--color-example-750: var(--color-cyan-750);
	--color-example-800: var(--color-cyan-800);
	--color-example-850: var(--color-cyan-850);
	--color-example-900: var(--color-cyan-900);
	--color-example-950: var(--color-cyan-950);
	/* docs */
	--color-docs-50: var(--color-amber-50);
	--color-docs-100: var(--color-amber-100);
	--color-docs-150: var(--color-amber-150);
	--color-docs-200: var(--color-amber-200);
	--color-docs-250: var(--color-amber-250);
	--color-docs-300: var(--color-amber-300);
	--color-docs-350: var(--color-amber-350);
	--color-docs-400: var(--color-amber-400);
	--color-docs-450: var(--color-amber-450);
	--color-docs-500: var(--color-amber-500);
	--color-docs-550: var(--color-amber-550);
	--color-docs-600: var(--color-amber-600);
	--color-docs-650: var(--color-amber-650);
	--color-docs-700: var(--color-amber-700);
	--color-docs-750: var(--color-amber-750);
	--color-docs-800: var(--color-amber-800);
	--color-docs-850: var(--color-amber-850);
	--color-docs-900: var(--color-amber-900);
	--color-docs-950: var(--color-amber-950);
	/* page */
	--color-page-50: var(--color-yellow-50);
	--color-page-100: var(--color-yellow-100);
	--color-page-150: var(--color-yellow-150);
	--color-page-200: var(--color-yellow-200);
	--color-page-250: var(--color-yellow-250);
	--color-page-300: var(--color-yellow-300);
	--color-page-350: var(--color-yellow-350);
	--color-page-400: var(--color-yellow-400);
	--color-page-450: var(--color-yellow-450);
	--color-page-500: var(--color-yellow-500);
	--color-page-550: var(--color-yellow-550);
	--color-page-600: var(--color-yellow-600);
	--color-page-650: var(--color-yellow-650);
	--color-page-700: var(--color-yellow-700);
	--color-page-750: var(--color-yellow-750);
	--color-page-800: var(--color-yellow-800);
	--color-page-850: var(--color-yellow-850);
	--color-page-900: var(--color-yellow-900);
	--color-page-950: var(--color-yellow-950);
	/* action */
	--color-action-50: var(--color-blue-50);
	--color-action-100: var(--color-blue-100);
	--color-action-150: var(--color-blue-150);
	--color-action-200: var(--color-blue-200);
	--color-action-250: var(--color-blue-250);
	--color-action-300: var(--color-blue-300);
	--color-action-350: var(--color-blue-350);
	--color-action-400: var(--color-blue-400);
	--color-action-450: var(--color-blue-450);
	--color-action-500: var(--color-blue-500);
	--color-action-550: var(--color-blue-550);
	--color-action-600: var(--color-blue-600);
	--color-action-650: var(--color-blue-650);
	--color-action-700: var(--color-blue-700);
	--color-action-750: var(--color-blue-750);
	--color-action-800: var(--color-blue-800);
	--color-action-850: var(--color-blue-850);
	--color-action-900: var(--color-blue-900);
	--color-action-950: var(--color-blue-950);
}

/* sdocs shell styles — scoped to .sdocs-app
 *
 * Used by the sdocs UI (sidebar, panels, nav).
 * Scoped to .sdocs-app so it doesn't leak into the host app when embedded.
 */

.sdocs-app {
	margin: 0;
	font-family: var(--sans);
	color: var(--color-base-900);
}

/* Guard the Explorer's typography against host element rules when embedded:
 * hosts commonly style bare `code`/`pre`/`a` (e.g. font-size: 0.875em), which
 * would otherwise reach into the Explorer. Sizing stays wrapper-driven. */
.sdocs-app code,
.sdocs-app pre {
	font-family: var(--mono);
	font-size: inherit;
	line-height: inherit;
}

.sdocs-app a {
	color: inherit;
	text-decoration: none;
}

/* Highlighted code blocks always render shiki's dark theme — a dark stage
 * for code in both app themes (the inline light-theme colors lose to the
 * dual-theme --shiki-dark variables). */
.sdocs-app pre.shiki,
.sdocs-app pre.shiki span {
	color: var(--shiki-dark) !important;
	background-color: var(--shiki-dark-bg) !important;
}

/* Inline markdown in descriptions — `code` renders as a chip, like doc prose */
.sdocs-view-description code,
.sdocs-block-description code,
.sdocs-api-desc code {
	font-size: 0.92em;
	background: var(--color-base-100);
	border-radius: 4px;
	padding: 1px 5px;
}

/* Type chips and value literals, color-coded by kind (shared by doc tables) */
.sdocs-app code[class*='sdocs-type-'] {
	font-family: var(--mono);
	font-size: 12px;
	padding: 1px 4px;
	border-radius: 3px;
}
.sdocs-app code.sdocs-type-string { color: var(--color-green-700); background: var(--color-green-100); }
.sdocs-app code.sdocs-type-number { color: var(--color-amber-700); background: var(--color-amber-100); }
.sdocs-app code.sdocs-type-boolean { color: var(--color-purple-700); background: var(--color-purple-100); }
.sdocs-app code.sdocs-type-function { color: var(--color-blue-700); background: var(--color-blue-100); }
.sdocs-app code.sdocs-type-snippet { color: var(--color-pink-700); background: var(--color-pink-100); }
.sdocs-app code.sdocs-type-color { color: var(--color-cyan-700); background: var(--color-cyan-100); }
.sdocs-app code.sdocs-type-dimension { color: var(--color-amber-700); background: var(--color-amber-100); }
.sdocs-app code.sdocs-type-void { color: var(--color-slate-500); background: var(--color-slate-100); }
.sdocs-app code.sdocs-type-other { color: var(--color-base-700); background: var(--color-base-100); }

.sdocs-app .sdocs-typesep {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--color-base-300);
}

.sdocs-app .sdocs-value {
	font-family: var(--mono);
	font-size: 12px;
}
.sdocs-app .sdocs-value-string { color: var(--color-green-700); }
.sdocs-app .sdocs-value-number { color: var(--color-amber-700); }
.sdocs-app .sdocs-value-boolean { color: var(--color-purple-700); }
.sdocs-app .sdocs-value-dimension { color: var(--color-amber-700); }
.sdocs-app .sdocs-value-mixed { color: var(--color-base-500); font-style: italic; cursor: help; }
.sdocs-app .sdocs-value-color { color: var(--color-cyan-700); }
.sdocs-app .sdocs-value-other { color: var(--color-base-600); }

/* Raw hue tokens don't invert with the theme; flip shades for dark */
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-string { color: var(--color-green-400); background: var(--color-green-950); }
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-number { color: var(--color-amber-400); background: var(--color-amber-950); }
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-boolean { color: var(--color-purple-400); background: var(--color-purple-950); }
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-function { color: var(--color-blue-400); background: var(--color-blue-950); }
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-snippet { color: var(--color-pink-400); background: var(--color-pink-950); }
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-color { color: var(--color-cyan-400); background: var(--color-cyan-950); }
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-dimension { color: var(--color-amber-400); background: var(--color-amber-950); }
.sdocs-app[data-sdocs-theme='dark'] code.sdocs-type-void { color: var(--color-slate-400); background: var(--color-slate-950); }
.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-string { color: var(--color-green-400); }
.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-number { color: var(--color-amber-400); }
.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-boolean { color: var(--color-purple-400); }
.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-dimension { color: var(--color-amber-400); }
.sdocs-app[data-sdocs-theme='dark'] .sdocs-value-color { color: var(--color-cyan-400); }

.sdocs-app[data-sdocs-theme='dark'] {
	/* base — layouts, backgrounds, surfaces, borders, text (inverted) */
	--color-base-0: var(--color-zinc-1000);
	--color-base-50: var(--color-zinc-950);
	--color-base-100: var(--color-zinc-900);
	--color-base-150: var(--color-zinc-850);
	--color-base-200: var(--color-zinc-800);
	--color-base-250: var(--color-zinc-750);
	--color-base-300: var(--color-zinc-700);
	--color-base-350: var(--color-zinc-650);
	--color-base-400: var(--color-zinc-600);
	--color-base-450: var(--color-zinc-500);
	/* The mirror pivots here, and a straight mirror puts the same mid-grey on
	   both grounds — which does not work, because contrast is not symmetric.
	   zinc-500 reads at 4.8:1 on white and 4.35:1 on near-black, and base-500
	   is the secondary-text step: descriptions, API notes, glossary subtitles,
	   the inactive preview tab. Half a step lighter clears 4.5 for all of
	   them. */
	--color-base-500: var(--color-zinc-450);
	--color-base-550: var(--color-zinc-400);
	--color-base-600: var(--color-zinc-400);
	--color-base-650: var(--color-zinc-350);
	--color-base-700: var(--color-zinc-300);
	--color-base-750: var(--color-zinc-250);
	--color-base-800: var(--color-zinc-200);
	--color-base-850: var(--color-zinc-150);
	--color-base-900: var(--color-zinc-100);
	--color-base-950: var(--color-zinc-50);
	--color-base-1000: var(--color-zinc-0);
	/* success (inverted) */
	--color-success-50: var(--color-green-950);
	--color-success-100: var(--color-green-900);
	--color-success-150: var(--color-green-850);
	--color-success-200: var(--color-green-800);
	--color-success-250: var(--color-green-750);
	--color-success-300: var(--color-green-700);
	--color-success-350: var(--color-green-650);
	--color-success-400: var(--color-green-600);
	--color-success-450: var(--color-green-550);
	--color-success-500: var(--color-green-500);
	--color-success-550: var(--color-green-450);
	--color-success-600: var(--color-green-400);
	--color-success-650: var(--color-green-350);
	--color-success-700: var(--color-green-300);
	--color-success-750: var(--color-green-250);
	--color-success-800: var(--color-green-200);
	--color-success-850: var(--color-green-150);
	--color-success-900: var(--color-green-100);
	--color-success-950: var(--color-green-50);
	/* danger (inverted) */
	--color-danger-50: var(--color-red-950);
	--color-danger-100: var(--color-red-900);
	--color-danger-150: var(--color-red-850);
	--color-danger-200: var(--color-red-800);
	--color-danger-250: var(--color-red-750);
	--color-danger-300: var(--color-red-700);
	--color-danger-350: var(--color-red-650);
	--color-danger-400: var(--color-red-600);
	--color-danger-450: var(--color-red-550);
	--color-danger-500: var(--color-red-500);
	--color-danger-550: var(--color-red-450);
	--color-danger-600: var(--color-red-400);
	--color-danger-650: var(--color-red-350);
	--color-danger-700: var(--color-red-300);
	--color-danger-750: var(--color-red-250);
	--color-danger-800: var(--color-red-200);
	--color-danger-850: var(--color-red-150);
	--color-danger-900: var(--color-red-100);
	--color-danger-950: var(--color-red-50);
	/* warning (inverted) */
	--color-warning-50: var(--color-orange-950);
	--color-warning-100: var(--color-orange-900);
	--color-warning-150: var(--color-orange-850);
	--color-warning-200: var(--color-orange-800);
	--color-warning-250: var(--color-orange-750);
	--color-warning-300: var(--color-orange-700);
	--color-warning-350: var(--color-orange-650);
	--color-warning-400: var(--color-orange-600);
	--color-warning-450: var(--color-orange-550);
	--color-warning-500: var(--color-orange-500);
	--color-warning-550: var(--color-orange-450);
	--color-warning-600: var(--color-orange-400);
	--color-warning-650: var(--color-orange-350);
	--color-warning-700: var(--color-orange-300);
	--color-warning-750: var(--color-orange-250);
	--color-warning-800: var(--color-orange-200);
	--color-warning-850: var(--color-orange-150);
	--color-warning-900: var(--color-orange-100);
	--color-warning-950: var(--color-orange-50);
	/* focus (inverted) */
	--color-focus-50: var(--color-yellow-950);
	--color-focus-100: var(--color-yellow-900);
	--color-focus-150: var(--color-yellow-850);
	--color-focus-200: var(--color-yellow-800);
	--color-focus-250: var(--color-yellow-750);
	--color-focus-300: var(--color-yellow-700);
	--color-focus-350: var(--color-yellow-650);
	--color-focus-400: var(--color-yellow-600);
	--color-focus-450: var(--color-yellow-550);
	--color-focus-500: var(--color-yellow-500);
	--color-focus-550: var(--color-yellow-450);
	--color-focus-600: var(--color-yellow-400);
	--color-focus-650: var(--color-yellow-350);
	--color-focus-700: var(--color-yellow-300);
	--color-focus-750: var(--color-yellow-250);
	--color-focus-800: var(--color-yellow-200);
	--color-focus-850: var(--color-yellow-150);
	--color-focus-900: var(--color-yellow-100);
	--color-focus-950: var(--color-yellow-50);
	/* component (inverted) */
	--color-component-50: var(--color-pink-950);
	--color-component-100: var(--color-pink-900);
	--color-component-150: var(--color-pink-850);
	--color-component-200: var(--color-pink-800);
	--color-component-250: var(--color-pink-750);
	--color-component-300: var(--color-pink-700);
	--color-component-350: var(--color-pink-650);
	--color-component-400: var(--color-pink-600);
	--color-component-450: var(--color-pink-550);
	--color-component-500: var(--color-pink-500);
	--color-component-550: var(--color-pink-450);
	--color-component-600: var(--color-pink-400);
	--color-component-650: var(--color-pink-350);
	--color-component-700: var(--color-pink-300);
	--color-component-750: var(--color-pink-250);
	--color-component-800: var(--color-pink-200);
	--color-component-850: var(--color-pink-150);
	--color-component-900: var(--color-pink-100);
	--color-component-950: var(--color-pink-50);
	/* layout (inverted) */
	--color-layout-50: var(--color-purple-950);
	--color-layout-100: var(--color-purple-900);
	--color-layout-150: var(--color-purple-850);
	--color-layout-200: var(--color-purple-800);
	--color-layout-250: var(--color-purple-750);
	--color-layout-300: var(--color-purple-700);
	--color-layout-350: var(--color-purple-650);
	--color-layout-400: var(--color-purple-600);
	--color-layout-450: var(--color-purple-550);
	--color-layout-500: var(--color-purple-500);
	--color-layout-550: var(--color-purple-450);
	--color-layout-600: var(--color-purple-400);
	--color-layout-650: var(--color-purple-350);
	--color-layout-700: var(--color-purple-300);
	--color-layout-750: var(--color-purple-250);
	--color-layout-800: var(--color-purple-200);
	--color-layout-850: var(--color-purple-150);
	--color-layout-900: var(--color-purple-100);
	--color-layout-950: var(--color-purple-50);

	--color-pattern-50: var(--color-emerald-950);
	--color-pattern-100: var(--color-emerald-900);
	--color-pattern-150: var(--color-emerald-850);
	--color-pattern-200: var(--color-emerald-800);
	--color-pattern-250: var(--color-emerald-750);
	--color-pattern-300: var(--color-emerald-700);
	--color-pattern-350: var(--color-emerald-650);
	--color-pattern-400: var(--color-emerald-600);
	--color-pattern-450: var(--color-emerald-550);
	--color-pattern-500: var(--color-emerald-500);
	--color-pattern-550: var(--color-emerald-450);
	--color-pattern-600: var(--color-emerald-400);
	--color-pattern-650: var(--color-emerald-350);
	--color-pattern-700: var(--color-emerald-300);
	--color-pattern-750: var(--color-emerald-250);
	--color-pattern-800: var(--color-emerald-200);
	--color-pattern-850: var(--color-emerald-150);
	--color-pattern-900: var(--color-emerald-100);
	--color-pattern-950: var(--color-emerald-50);
	/* example (inverted) */
	--color-example-50: var(--color-cyan-950);
	--color-example-100: var(--color-cyan-900);
	--color-example-150: var(--color-cyan-850);
	--color-example-200: var(--color-cyan-800);
	--color-example-250: var(--color-cyan-750);
	--color-example-300: var(--color-cyan-700);
	--color-example-350: var(--color-cyan-650);
	--color-example-400: var(--color-cyan-600);
	--color-example-450: var(--color-cyan-550);
	--color-example-500: var(--color-cyan-500);
	--color-example-550: var(--color-cyan-450);
	--color-example-600: var(--color-cyan-400);
	--color-example-650: var(--color-cyan-350);
	--color-example-700: var(--color-cyan-300);
	--color-example-750: var(--color-cyan-250);
	--color-example-800: var(--color-cyan-200);
	--color-example-850: var(--color-cyan-150);
	--color-example-900: var(--color-cyan-100);
	--color-example-950: var(--color-cyan-50);
	/* docs (inverted) */
	--color-docs-50: var(--color-amber-950);
	--color-docs-100: var(--color-amber-900);
	--color-docs-150: var(--color-amber-850);
	--color-docs-200: var(--color-amber-800);
	--color-docs-250: var(--color-amber-750);
	--color-docs-300: var(--color-amber-700);
	--color-docs-350: var(--color-amber-650);
	--color-docs-400: var(--color-amber-600);
	--color-docs-450: var(--color-amber-550);
	--color-docs-500: var(--color-amber-500);
	--color-docs-550: var(--color-amber-450);
	--color-docs-600: var(--color-amber-400);
	--color-docs-650: var(--color-amber-350);
	--color-docs-700: var(--color-amber-300);
	--color-docs-750: var(--color-amber-250);
	--color-docs-800: var(--color-amber-200);
	--color-docs-850: var(--color-amber-150);
	--color-docs-900: var(--color-amber-100);
	--color-docs-950: var(--color-amber-50);
	/* page (inverted) */
	--color-page-50: var(--color-yellow-950);
	--color-page-100: var(--color-yellow-900);
	--color-page-150: var(--color-yellow-850);
	--color-page-200: var(--color-yellow-800);
	--color-page-250: var(--color-yellow-750);
	--color-page-300: var(--color-yellow-700);
	--color-page-350: var(--color-yellow-650);
	--color-page-400: var(--color-yellow-600);
	--color-page-450: var(--color-yellow-550);
	--color-page-500: var(--color-yellow-500);
	--color-page-550: var(--color-yellow-450);
	--color-page-600: var(--color-yellow-400);
	--color-page-650: var(--color-yellow-350);
	--color-page-700: var(--color-yellow-300);
	--color-page-750: var(--color-yellow-250);
	--color-page-800: var(--color-yellow-200);
	--color-page-850: var(--color-yellow-150);
	--color-page-900: var(--color-yellow-100);
	--color-page-950: var(--color-yellow-50);
	/* action (inverted) */
	--color-action-50: var(--color-blue-950);
	--color-action-100: var(--color-blue-900);
	--color-action-150: var(--color-blue-850);
	--color-action-200: var(--color-blue-800);
	--color-action-250: var(--color-blue-750);
	--color-action-300: var(--color-blue-700);
	--color-action-350: var(--color-blue-650);
	--color-action-400: var(--color-blue-600);
	--color-action-450: var(--color-blue-550);
	--color-action-500: var(--color-blue-500);
	--color-action-550: var(--color-blue-450);
	--color-action-600: var(--color-blue-400);
	--color-action-650: var(--color-blue-350);
	--color-action-700: var(--color-blue-300);
	--color-action-750: var(--color-blue-250);
	--color-action-800: var(--color-blue-200);
	--color-action-850: var(--color-blue-150);
	--color-action-900: var(--color-blue-100);
	--color-action-950: var(--color-blue-50);
}

/* ── Rendered prose ────────────────────────────────────────────────────────
 *
 * The typography of a rendered markdown body, shared by everything that has
 * one: a [DOC]'s content and a [SHOWCASE]'s [PROSE] blocks. Global rather than
 * component-scoped because the markup it styles is compiled at build time and
 * arrives as its own component — there is no scope to share with it.
 */
.sdocs-prose {
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-base-800);
}
.sdocs-prose h1,
.sdocs-prose h2,
.sdocs-prose h3,
.sdocs-prose h4,
.sdocs-prose h5,
.sdocs-prose h6 {
	color: var(--color-base-900);
	font-weight: 650;
	line-height: 1.3;
	margin: 1.6em 0 0.5em;
	scroll-margin-top: 16px;
}
/* The body h1 serves as the page title — match .sdocs-view-title */
.sdocs-prose h1 {
	font-size: 24px;
	font-weight: 700;
}
.sdocs-prose h2 { font-size: 18px; }
.sdocs-prose h3 { font-size: 15px; }
.sdocs-prose h4,
.sdocs-prose h5,
.sdocs-prose h6 { font-size: 14px; }
.sdocs-prose h1:first-child,
.sdocs-prose h2:first-child,
.sdocs-prose h3:first-child {
	margin-top: 0;
}
/* The measure, not the column.
 *
 * Prose set to the full content width runs 102 characters per line at 1280px
 * and 139 at 1920 — roughly double what is comfortable to read. The column
 * itself has to stay wide, since tables, stages and code all want the room, so
 * the cap goes on the text elements instead.
 *
 * Fixed rather than configurable: every other content knob (`maxWidth`,
 * `padding`, `contentX`) sizes a container, while a measure is a typographic
 * constant. A project that wants narrower prose narrows the whole column with
 * `maxWidth` on the entity. */
.sdocs-prose p,
.sdocs-prose li,
.sdocs-prose blockquote {
	max-width: 70ch;
}
.sdocs-prose p {
	margin: 0.7em 0;
}
/* `action` is an aliased ramp and inverts with the theme, so one step covers
   both grounds — unlike the raw `blue`/`red` ramps below, which do not, and
   which each need saying twice. At action-500 a link sat at 3.4:1 on the
   tinted chip an inline `code` carries, which is the shape most of these
   links have. */
.sdocs-prose a {
	color: var(--color-action-600, var(--color-base-900));
	text-decoration: underline;
	text-underline-offset: 2px;
}
.sdocs-prose ul,
.sdocs-prose ol {
	margin: 0.7em 0;
	padding-left: 1.6em;
}
.sdocs-prose li {
	margin: 0.25em 0;
}
.sdocs-prose blockquote {
	margin: 0.9em 0;
	padding: 2px 16px;
	border-left: 3px solid var(--color-base-200);
	color: var(--color-base-600);
}
.sdocs-prose hr {
	border: none;
	border-top: 1px solid var(--color-base-200);
	margin: 24px 0;
}
.sdocs-prose code {
	font-family: var(--mono);
	font-size: 0.92em;
}
/* Inline code only — a `code` that is not a direct child of a `pre`. The
   parens matter: `:not(pre > code)` matches nearly every element on the page,
   and puts this chip's background and padding behind all of them. */
.sdocs-prose :not(pre) > code {
	background: var(--color-base-100);
	border-radius: 4px;
	padding: 1px 5px;
}
.sdocs-prose pre {
	margin: 0.9em 0;
	padding: 12px;
	border-radius: 6px;
	overflow-x: auto;
	font-size: 13px;
	line-height: 1.5;
	tab-size: 4;
}
.sdocs-prose table {
	border-collapse: collapse;
	margin: 0.9em 0;
	display: block;
	max-width: 100%;
	overflow-x: auto;
}
.sdocs-prose th,
.sdocs-prose td {
	border: 1px solid var(--color-base-200);
	padding: 6px 12px;
	text-align: left;
}
.sdocs-prose td[align='center'],
.sdocs-prose th[align='center'] {
	text-align: center;
}
.sdocs-prose td[align='right'],
.sdocs-prose th[align='right'] {
	text-align: right;
}
.sdocs-prose th {
	background: var(--color-base-50);
	font-weight: 600;
}
.sdocs-prose img {
	max-width: 100%;
	border-radius: 6px;
}

/* Task lists: GitHub-style checkboxes, no bullet */
.sdocs-prose li:has(> input[type='checkbox']:first-child) {
	list-style: none;
	margin-left: -1.3em;
}
.sdocs-prose li > input[type='checkbox'] {
	margin-right: 6px;
	vertical-align: -2px;
}

/* GitHub-style alerts: > [!NOTE] / [!TIP] / [!IMPORTANT] / [!WARNING] / [!CAUTION] */
.sdocs-prose .sdocs-alert {
	margin: 0.9em 0;
	padding: 8px 16px;
	border-left: 3px solid var(--sdocs-alert-color);
	border-radius: 0 6px 6px 0;
	background: color-mix(in srgb, var(--sdocs-alert-color) 6%, transparent);
}
/* The label is text and needs 4.5:1; the rule beside it is not, and 3:1 is
   enough there. One token each, so the border keeps the weight it was drawn
   with instead of darkening to satisfy a rule that isn't about it. */
.sdocs-prose .sdocs-alert-label {
	font-size: 13px;
	font-weight: 650;
	color: var(--sdocs-alert-text, var(--sdocs-alert-color));
	margin: 0.25em 0 0;
}
.sdocs-app[data-sdocs-theme='dark'] {
	--sdocs-required-color: var(--color-red-400);
}
.sdocs-app[data-sdocs-theme='dark'] .sdocs-prose .sdocs-alert-label {
	color: var(--sdocs-alert-text-dark, var(--sdocs-alert-color));
}
.sdocs-prose .sdocs-alert-note {
	--sdocs-alert-color: var(--color-blue-500);
	--sdocs-alert-text: var(--color-blue-600);
	--sdocs-alert-text-dark: var(--color-blue-400);
}
.sdocs-prose .sdocs-alert-tip {
	--sdocs-alert-color: var(--color-green-500);
	--sdocs-alert-text: var(--color-green-600);
	--sdocs-alert-text-dark: var(--color-green-400);
}
.sdocs-prose .sdocs-alert-important {
	--sdocs-alert-color: var(--color-purple-500);
	--sdocs-alert-text: var(--color-purple-600);
	--sdocs-alert-text-dark: var(--color-purple-400);
}
.sdocs-prose .sdocs-alert-warning {
	--sdocs-alert-color: var(--color-amber-500);
	--sdocs-alert-text: var(--color-amber-600);
	--sdocs-alert-text-dark: var(--color-amber-400);
}
.sdocs-prose .sdocs-alert-caution {
	--sdocs-alert-color: var(--color-red-500);
	--sdocs-alert-text: var(--color-red-600);
	--sdocs-alert-text-dark: var(--color-red-400);
}

/* ── Example stages in the page flow ── */

/* A heading links to its own section — it inherits the heading's type entirely,
 * so the only sign it is a link is the cursor. */
.sdocs-prose .sdocs-heading-link {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.sdocs-prose .sdocs-heading-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--color-base-300);
}

/* Passed-through HTML.
 *
 * Markdown has no syntax for these, so they only appear when an author writes
 * the tag directly. Unstyled, a <kbd> reads as ordinary prose and a
 * <figcaption> as a stray paragraph — an element that renders wrong is worse
 * than one that does not render at all. */
.sdocs-prose kbd {
	display: inline-block;
	min-width: 1em;
	padding: 1px 5px;
	border: 1px solid var(--color-base-200);
	/* The bottom edge is what reads as a key's depth — a full border with an
	   even shadow reads as a chip instead. */
	border-bottom-width: 2px;
	border-radius: 4px;
	background: var(--color-base-50);
	font-family: var(--mono);
	font-size: 0.85em;
	line-height: 1.4;
	color: var(--color-base-800);
	text-align: center;
	white-space: nowrap;
}

.sdocs-prose figure {
	margin: 1.2em 0;
	/* Wide figures scroll inside themselves rather than the page. */
	overflow-x: auto;
}

.sdocs-prose figure > :first-child {
	margin-top: 0;
}

.sdocs-prose figcaption {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-base-600);
}

.sdocs-prose sup,
.sdocs-prose sub {
	font-size: 0.75em;
	/* Keeps a line with a footnote marker on the same rhythm as one without. */
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

.sdocs-prose sup {
	top: -0.5em;
}

.sdocs-prose sub {
	bottom: -0.25em;
}

/* ── Copy button ───────────────────────────────────────────────────────────
 *
 * Created as a DOM node by the copyCode attachment rather than as a component:
 * the code it sits on is `{@html}` in every case — a rendered fence, a shiki
 * panel — so there is no markup to hang a component off. Global for the same
 * reason: the button is not inside any component's scope. */
.sdocs-copy {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--color-base-200);
	border-radius: 5px;
	background: var(--color-base-0);
	color: var(--color-base-600);
	cursor: pointer;
	/* Hidden until the pointer or focus finds it, but always in the layout —
	   appearing out of display:none has nothing to transition from. */
	opacity: 0;
	transition: opacity 120ms ease;
}

.sdocs-copy-host:hover > .sdocs-copy,
.sdocs-copy:focus-visible {
	opacity: 1;
}

.sdocs-copy:hover {
	border-color: var(--color-base-300);
	color: var(--color-base-900);
}

.sdocs-copy.is-copied {
	color: var(--color-success-600, var(--color-base-900));
}

/* Touch has no hover: on a coarse pointer the button is simply always there. */
@media (hover: none) {
	.sdocs-copy {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sdocs-copy {
		transition: none;
	}
}

	/* Off-screen until focused, which is the whole trick: it costs a sighted
	   reader nothing and saves a keyboard user thirty tab presses. */
	.sdocs-skip-link.svelte-1f1lvrk {
		position: absolute;
		top: 8px;
		left: 8px;
		z-index: 100;
		padding: 8px 14px;
		border-radius: 6px;
		background: var(--color-base-0);
		border: 1px solid var(--color-base-300);
		font-size: 13px;
		color: var(--color-base-900);
		text-decoration: none;
		transform: translateY(calc(-100% - 16px));
	}

	/* `:focus`, not `:focus-visible`. A skip link is only ever reached by
	   keyboard, and it has to appear the moment it takes focus — including
	   when focus arrives programmatically, which the focus-visible heuristic
	   does not count. */
	.sdocs-skip-link.svelte-1f1lvrk:focus {
		transform: none;
	}

	@media (prefers-reduced-motion: no-preference) {
		.sdocs-skip-link.svelte-1f1lvrk {
			transition: transform 120ms ease;
		}
	}

	.sdocs-app.svelte-1f1lvrk {
		/* The top bar's height, shared: the drawer hangs off the bottom of it. */
		--sdocs-topbar-h: 48px;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* Mobile browsers shrink the visual viewport as their toolbars slide
		   away — dvh tracks that, 100vh would leave the last rows cut off. */
		height: 100dvh;
		overflow: hidden;
		position: relative;
	}
	.sdocs-body.svelte-1f1lvrk {
		display: flex;
		flex: 1;
		min-height: 0;
	}
	.sdocs-main.svelte-1f1lvrk {
		flex: 1;
		/* The other half: a flex item's automatic minimum is its content, so
		   without this the content column can't shrink below whatever its
		   widest child demands and pushes on its sibling instead. It scrolls
		   its own overflow now rather than taking width from the nav. */
		min-width: 0;
		overflow-y: auto;
		/* Same reservation as the sidebar tree: a long DOC scrolls and a short
		   component page doesn't, so without this the content column changed
		   width as you moved between them. */
		scrollbar-gutter: stable;
		background: var(--color-base-0);
	}
	.sdocs-main-fullscreen.svelte-1f1lvrk {
		overflow-y: auto;
	}
	/* A layout page is exactly the height of the view and never scrolls, so
	   the reserved gutter is dead space at the right edge — and it holds the
	   layout's resize handle that far off the edge of the window. */
	.sdocs-main-flush.svelte-1f1lvrk {
		scrollbar-gutter: auto;
		overflow: hidden;
	}
	/* The hover target: big enough to find blind, small enough to not sit on
	   content clicks (the content's top-left padding area). */
	.sdocs-exit-zone.svelte-1f1lvrk {
		position: fixed;
		top: 0;
		left: 0;
		width: 160px;
		height: 56px;
		z-index: 100;
	}
	.sdocs-exit-fullscreen.svelte-1f1lvrk {
		position: absolute;
		top: 12px;
		left: 12px;
		padding: 6px 12px;
		border: 1px solid var(--color-base-200);
		border-radius: 6px;
		background: var(--color-base-0);
		font-size: 12px;
		color: var(--color-base-600);
		cursor: pointer;
		font-family: var(--sans);
		opacity: 0;
		transform: translateY(-4px);
		transition:
			opacity 0.15s ease,
			transform 0.15s ease;
	}
	.sdocs-exit-zone.svelte-1f1lvrk:hover .sdocs-exit-fullscreen:where(.svelte-1f1lvrk),
	.sdocs-exit-fullscreen.svelte-1f1lvrk:focus-visible {
		opacity: 1;
		transform: translateY(0);
	}
	.sdocs-exit-fullscreen.svelte-1f1lvrk:hover {
		background: var(--color-base-100);
	}

	@media (max-width: 860px) {
		.sdocs-app.svelte-1f1lvrk {
			/* A taller bar so its controls can carry 40px touch targets. */
			--sdocs-topbar-h: 52px;
		}
		/* Reveal-on-hover is a pointer affordance. Touch never hovers, so the
		   way out of fullscreen has to be visible from the start. */
		.sdocs-exit-fullscreen.svelte-1f1lvrk {
			opacity: 1;
			transform: none;
			padding: 10px 14px;
		}
	}