/*
 * Synapse identity over mkdocs-material, ported from the design system
 * tokens (packages/design-system/src/tokens.css): one monospace family,
 * squared shapes, 1px lines, the indigo-on-white palette in light and the
 * crimson-slate palette in dark, uppercase letter-spaced labels and the
 * diamond section marker.
 */

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
		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: 700;
	font-display: swap;
	src: url('fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
		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: 400;
	font-display: swap;
	src: url('fonts/jetbrains-mono-latin-ext-400-normal.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: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/jetbrains-mono-latin-ext-700-normal.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;
}

:root {
	--synapse-font:
		'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono',
		monospace;
	--tracking-label: 0.08em;
}

/* --- Palette: indigo on white (light) --- */
[data-md-color-scheme='default'] {
	--md-default-bg-color: #ffffff;
	--md-default-fg-color: #1a1a2e;
	--md-default-fg-color--light: #4a4a68;
	--md-default-fg-color--lighter: #6b6b85;
	--md-default-fg-color--lightest: #e3e5ee;

	--md-primary-fg-color: #4f46e5;
	--md-primary-fg-color--light: #6b6b85;
	--md-primary-fg-color--dark: #4338ca;
	--md-primary-bg-color: #1a1a2e;
	--md-primary-bg-color--light: #4a4a68;

	--md-accent-fg-color: #4338ca;
	--md-accent-fg-color--transparent: rgba(79, 70, 229, 0.1);

	--md-typeset-color: #1a1a2e;
	--md-typeset-a-color: #4f46e5;

	--md-code-bg-color: #f4f5fb;
	--md-code-fg-color: #1a1a2e;

	--md-footer-bg-color: #ffffff;
	--md-footer-bg-color--dark: #f4f5fb;
	--md-footer-fg-color: #1a1a2e;
	--md-footer-fg-color--light: #4a4a68;
	--md-footer-fg-color--lighter: #6b6b85;

	--synapse-line: #e3e5ee;
	--synapse-panel-2: #f4f5fb;
	--synapse-accent: #4f46e5;
	--synapse-ink-faint: #6b6b85;

	/* Mermaid diagrams, drawn with the same tokens as the rest of the page. */
	--md-mermaid-font-family: var(--synapse-font);
	--md-mermaid-edge-color: #6b6b85;
	--md-mermaid-node-bg-color: rgba(79, 70, 229, 0.08);
	--md-mermaid-node-fg-color: #4f46e5;
	--md-mermaid-label-bg-color: #ffffff;
	--md-mermaid-label-fg-color: #1a1a2e;
	--md-mermaid-sequence-actor-bg-color: #f4f5fb;
	--md-mermaid-sequence-actor-fg-color: #1a1a2e;
	--md-mermaid-sequence-actor-border-color: #4f46e5;
	--md-mermaid-sequence-actor-line-color: #6b6b85;
	--md-mermaid-sequence-actorman-bg-color: #f4f5fb;
	--md-mermaid-sequence-actorman-line-color: #4f46e5;
	--md-mermaid-sequence-box-bg-color: rgba(79, 70, 229, 0.05);
	--md-mermaid-sequence-box-fg-color: #1a1a2e;
	--md-mermaid-sequence-label-bg-color: #ffffff;
	--md-mermaid-sequence-label-fg-color: #1a1a2e;
	--md-mermaid-sequence-loop-bg-color: #f4f5fb;
	--md-mermaid-sequence-loop-fg-color: #4a4a68;
	--md-mermaid-sequence-loop-border-color: #6b6b85;
	--md-mermaid-sequence-message-fg-color: #1a1a2e;
	--md-mermaid-sequence-message-line-color: #4a4a68;
	--md-mermaid-sequence-note-bg-color: #f4f5fb;
	--md-mermaid-sequence-note-fg-color: #1a1a2e;
	--md-mermaid-sequence-note-border-color: #6b6b85;
	--md-mermaid-sequence-number-bg-color: #4f46e5;
	--md-mermaid-sequence-number-fg-color: #ffffff;
}

/* --- Palette: crimson slate (dark) --- */
[data-md-color-scheme='slate'] {
	--md-default-bg-color: #101114;
	--md-default-fg-color: #e7e8ec;
	--md-default-fg-color--light: #a9adb8;
	--md-default-fg-color--lighter: #838996;
	--md-default-fg-color--lightest: #2c2f38;

	--md-primary-fg-color: #17181c;
	--md-primary-fg-color--light: #a9adb8;
	--md-primary-fg-color--dark: #101114;
	--md-primary-bg-color: #e7e8ec;
	--md-primary-bg-color--light: #a9adb8;

	--md-accent-fg-color: #e2555f;
	--md-accent-fg-color--transparent: rgba(226, 85, 95, 0.14);

	--md-typeset-color: #e7e8ec;
	--md-typeset-a-color: #e2555f;

	--md-code-bg-color: #1e2026;
	--md-code-fg-color: #e7e8ec;

	--md-footer-bg-color: #101114;
	--md-footer-bg-color--dark: #17181c;
	--md-footer-fg-color: #e7e8ec;
	--md-footer-fg-color--light: #a9adb8;
	--md-footer-fg-color--lighter: #838996;

	--synapse-line: #2c2f38;
	--synapse-panel-2: #17181c;
	--synapse-accent: #e2555f;
	--synapse-ink-faint: #838996;

	/* Mermaid diagrams on the dark ground: panel fills, light ink, crimson
	   strokes. Without these Material falls back to colors that were never
	   meant for this palette and the diagrams turn illegible. */
	--md-mermaid-font-family: var(--synapse-font);
	--md-mermaid-edge-color: #a9adb8;
	--md-mermaid-node-bg-color: rgba(226, 85, 95, 0.14);
	--md-mermaid-node-fg-color: #e2555f;
	--md-mermaid-label-bg-color: #101114;
	--md-mermaid-label-fg-color: #e7e8ec;
	--md-mermaid-sequence-actor-bg-color: #17181c;
	--md-mermaid-sequence-actor-fg-color: #e7e8ec;
	--md-mermaid-sequence-actor-border-color: #e2555f;
	--md-mermaid-sequence-actor-line-color: #838996;
	--md-mermaid-sequence-actorman-bg-color: #17181c;
	--md-mermaid-sequence-actorman-line-color: #e2555f;
	--md-mermaid-sequence-box-bg-color: rgba(226, 85, 95, 0.06);
	--md-mermaid-sequence-box-fg-color: #e7e8ec;
	--md-mermaid-sequence-label-bg-color: #17181c;
	--md-mermaid-sequence-label-fg-color: #e7e8ec;
	--md-mermaid-sequence-loop-bg-color: #17181c;
	--md-mermaid-sequence-loop-fg-color: #a9adb8;
	--md-mermaid-sequence-loop-border-color: #2c2f38;
	--md-mermaid-sequence-message-fg-color: #e7e8ec;
	--md-mermaid-sequence-message-line-color: #a9adb8;
	--md-mermaid-sequence-note-bg-color: #1e2026;
	--md-mermaid-sequence-note-fg-color: #e7e8ec;
	--md-mermaid-sequence-note-border-color: #838996;
	--md-mermaid-sequence-number-bg-color: #e2555f;
	--md-mermaid-sequence-number-fg-color: #101114;
}

/* --- One monospace family, at the app's type scale ---
   Material's root is 20px; the app's scale is 13/14/15/17/22 px. */
body,
.md-typeset,
.md-header,
.md-nav,
.md-search,
.md-footer,
input {
	font-family: var(--synapse-font);
}
.md-typeset {
	font-size: 0.7rem; /* 14px - the app's body size */
	line-height: 1.65;
}
.md-typeset code,
.md-typeset pre {
	font-family: var(--synapse-font);
	font-size: 0.65rem; /* 13px */
}
.md-nav {
	font-size: 0.65rem; /* 13px */
}

/* Lucide icons are strokes, not fills; the theme fills icons by default. */
.md-icon svg,
.md-header__button svg:not(.synapse-mark),
.md-search__icon svg,
.md-top svg,
.md-footer__button svg {
	fill: none !important;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Squared shapes, 1px lines --- */
.md-search__form,
.md-search__output,
.md-typeset code,
.md-typeset pre > code,
.md-typeset .admonition,
.md-typeset details,
.md-typeset .md-button,
.md-top,
.md-tag,
.md-clipboard:after {
	border-radius: 0 !important;
}

/* --- Search: the app's text field, not Material's grey pill ---
   Match base.css input: transparent fill, a 1px hairline, ink text, a faint
   placeholder, and an accent border on focus (no glow). The form keeps its
   squared corners from the rule above. */
.md-search__form {
	background: transparent;
	border: 1px solid var(--synapse-line);
	box-shadow: none;
}
.md-search__form:hover {
	background: transparent;
	border-color: var(--synapse-ink-faint);
}
[data-md-toggle='search']:checked ~ .md-header .md-search__form {
	border-color: var(--synapse-accent);
}
.md-search__input {
	color: var(--md-default-fg-color);
	font-size: 0.65rem; /* 13px */
}
.md-search__input::placeholder {
	color: var(--synapse-ink-faint);
}
.md-search__input + .md-search__icon,
.md-search__icon {
	color: var(--synapse-ink-faint);
}
/* The dropdown of results wears the same panel + hairline as everything else. */
.md-search__output {
	border: 1px solid var(--synapse-line);
	box-shadow: none;
}
.md-search-result__meta {
	background: var(--synapse-panel-2);
	color: var(--synapse-ink-faint);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	font-size: 0.55rem;
}

/* --- Header: app top bar (bg-colored, ink text, hairline below) --- */
.md-header {
	background: var(--md-default-bg-color);
	color: var(--md-default-fg-color);
	border-bottom: 1px solid var(--synapse-line);
	box-shadow: none;
}
[data-md-color-scheme='default'] .md-header .md-logo img,
[data-md-color-scheme='default'] .md-header .md-logo svg {
	filter: none;
}
/* The header mirrors the app's top bar: the bare S mark, then a stacked
   eyebrow + bold title, the section nav inline on the right (the header
   template is overridden to put the tabs inside the flex row). */
.md-header__inner {
	height: 3.2rem; /* 64px, the app bar's presence */
}
.md-header__button.md-logo {
	padding: 0.2rem;
	margin: 0.2rem 0 0.2rem 0.2rem;
	color: var(--synapse-accent);
	background: none;
}
.md-header__button.md-logo:hover {
	opacity: 1;
}
/* The theme sizes .md-logo children itself; outrank it explicitly. */
.md-header__button.md-logo svg.synapse-mark {
	height: 2rem; /* 40px, like the app's brand mark */
	width: 2.1rem;
	max-height: none;
	display: block;
	fill: none;
}
/* Just the site title, vertically centred on the brand mark: no crumbs.
   The row itself does the centring, so the title never drifts when the
   header grows (wrapped tabs, narrow viewports). */
.md-header__inner {
	align-items: center;
}
.md-header__title {
	display: flex;
	align-items: center;
	height: auto;
	font-size: 1rem; /* 20px bold title */
	line-height: 1.2;
	margin-left: 0.2rem;
	flex-grow: 1;
	white-space: nowrap;
	overflow: visible;
}
.md-header__title .md-header__ellipsis {
	overflow: visible;
	white-space: nowrap;
}
.md-header__title .md-header__topic {
	font-weight: 700;
	position: static;
	transform: none;
	opacity: 1;
}

/* The top-level sections ride inside the header, styled like the app's nav
   links: uppercase, letter-spaced, accent when active. Home is the logo. */
.md-header .md-tabs {
	position: static;
	width: auto;
	background: transparent;
	border: 0;
	overflow: visible;
	margin-right: 0.4rem;
}
.md-header .md-tabs .md-grid {
	margin: 0;
}
.md-header .md-tabs__list {
	margin: 0;
	display: flex;
	gap: 1.2rem;
	white-space: nowrap;
}
.md-header .md-tabs__item {
	height: auto;
	padding: 0;
	display: block;
}
.md-header .md-tabs__item:first-child {
	display: none;
}
.md-header .md-tabs__link {
	margin: 0;
	font-size: 0.65rem; /* 13px */
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	color: var(--md-default-fg-color--light);
	opacity: 1;
	transform: none;
}
.md-header .md-tabs__link--active,
.md-header .md-tabs__link:hover {
	color: var(--synapse-accent);
}
/* The theme's scroll animation must never fade or disable the header nav
   (its hidden state also turns off pointer events on the links). */
.md-header .md-tabs[hidden] .md-tabs__link {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
/* On narrow screens the sections live in the drawer, like the app's menu. */
@media screen and (max-width: 76.234em) {
	.md-header .md-tabs {
		display: none;
	}
	/* The drawer wears the app identity too: flat panels, hairlines, the
	   bare mark, no primary-coloured band. */
	.md-nav--primary .md-nav__title {
		background: var(--md-default-bg-color);
		color: var(--md-default-fg-color);
		border-bottom: 1px solid var(--synapse-line);
		font-weight: 700;
		letter-spacing: var(--tracking-label);
		height: auto;
		padding: 3rem 0.8rem 0.6rem;
	}
	.md-nav--primary .md-nav__title .md-nav__button.md-logo {
		color: var(--synapse-accent);
	}
	.md-nav--primary .md-nav__title .md-nav__button.md-logo img {
		display: none;
	}
	.md-nav--primary .md-nav__title[for='__drawer'] {
		background: var(--md-default-bg-color);
		color: var(--md-default-fg-color);
	}
	.md-nav--primary .md-nav__item {
		border-top: 0;
	}
	.md-nav--primary .md-nav__link {
		text-transform: none;
		letter-spacing: 0;
		font-size: 0.7rem;
		color: var(--md-default-fg-color);
	}
	.md-nav--primary .md-nav__item--section > .md-nav__link {
		text-transform: uppercase;
		letter-spacing: var(--tracking-label);
		font-size: 0.6rem;
		color: var(--synapse-ink-faint) !important;
	}
	.md-nav--primary .md-nav__link--active {
		color: var(--synapse-accent);
	}
}

/* --- Headings: the diamond section marker, label-style h2 eyebrow --- */
.md-typeset h1 {
	color: var(--md-default-fg-color);
	font-weight: 700;
	letter-spacing: -0.01em;
	font-size: 1.1rem; /* 22px - the app's large title */
}
.md-typeset h2 {
	font-size: 0.75rem; /* 15px */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	color: var(--md-default-fg-color);
	margin-top: 2rem;
}
.md-typeset h3 {
	font-size: 0.7rem; /* 14px */
	font-weight: 700;
}
.md-typeset h2::before {
	content: '\25C6';
	color: var(--synapse-accent);
	font-size: 0.6em;
	margin-right: 0.6em;
	vertical-align: 0.2em;
}

/* --- Nav: uppercase section labels, accent for the active page --- */
.md-nav__title,
.md-nav__item--section > .md-nav__link {
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	font-size: 0.6rem; /* 12px */
	color: var(--synapse-ink-faint) !important;
}
.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
	color: var(--synapse-accent);
}

/* --- Content details --- */
.md-typeset a {
	text-underline-offset: 3px;
}
.md-typeset table:not([class]) {
	border: 1px solid var(--synapse-line);
	border-radius: 0;
	box-shadow: none;
	font-size: 0.65rem; /* 13px */
}
.md-typeset table:not([class]) th {
	background: var(--synapse-panel-2);
	color: var(--md-default-fg-color);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	font-size: 0.6rem; /* 12px */
}
.md-typeset table:not([class]) td {
	border-top: 1px solid var(--synapse-line);
}
.md-typeset pre > code {
	border: 1px solid var(--synapse-line);
}
.md-typeset .admonition,
.md-typeset details {
	border: 1px solid var(--synapse-line);
	box-shadow: none;
}
.md-footer {
	border-top: 1px solid var(--synapse-line);
}

/* Wide tables scroll inside their own container. */
.md-typeset__table {
	overflow-x: auto;
}

/* --- Landing page --- */
.synapse-hero {
	text-align: center;
	padding: 2.4rem 0 1.6rem;
}
/* The call-to-action buttons (a paragraph of links right after the copy):
   a centred, wrapping flex row with real gaps, so three buttons never
   overlap the way inline-block + line-height did. */
.synapse-hero p:has(> .synapse-btn) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1.4rem;
}
/* The app's animated brand mark (Logo.svelte), ported for a static page. */
.md-typeset svg.synapse-logo {
	display: block;
	height: 4.4rem !important;
	width: 4.7rem;
	margin: 0 auto;
	color: var(--synapse-accent);
}
.synapse-logo .m-draw {
	opacity: 0;
}
.synapse-logo .h1w {
	transform-box: fill-box;
	transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
	.synapse-logo .m {
		animation: brand-appear 0.01s linear 0.58s both;
	}
	.synapse-logo .m-draw {
		animation:
			brand-deploy 0.58s cubic-bezier(0.55, 0, 0.3, 1) both,
			brand-vanish 0.01s linear 0.58s both;
	}
	.synapse-logo .e {
		opacity: 0;
		animation: brand-in 0.3s ease-out 0.5s forwards;
	}
	.synapse-logo .h1w {
		animation: brand-pop 0.25s ease-out 0.62s both;
	}
}
@keyframes brand-deploy {
	from {
		opacity: 1;
		stroke-dasharray: 0 1;
		stroke-dashoffset: -0.5;
	}
	to {
		opacity: 1;
		stroke-dasharray: 1 1;
		stroke-dashoffset: 0;
	}
}
@keyframes brand-appear {
	from {
		opacity: 0;
	}
}
@keyframes brand-vanish {
	to {
		opacity: 0;
	}
}
@keyframes brand-in {
	to {
		opacity: 1;
	}
}
@keyframes brand-pop {
	from {
		opacity: 0;
		transform: scale(0.4);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
.synapse-hero h1 {
	font-size: 1.4rem !important; /* 28px */
	margin: 0.8rem 0 0.4rem;
}
.synapse-hero p {
	max-width: 30rem;
	margin: 0 auto 1.2rem;
	color: var(--md-default-fg-color--light);
}
.synapse-btn {
	display: inline-block;
	border: 1px solid var(--synapse-accent);
	color: var(--synapse-accent) !important;
	padding: 0.45rem 0.9rem;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
}
.synapse-btn:hover {
	background: var(--md-accent-fg-color--transparent);
}
.synapse-btn-primary {
	background: var(--synapse-accent);
	color: var(--md-default-bg-color) !important;
}
.synapse-btn-primary:hover {
	background: var(--synapse-accent);
	opacity: 0.9;
}
/* The try page's platform row: the browser demo is live, the native builds are
   placeholders until the first public release. */
.md-typeset .synapse-platforms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.2rem 0;
}
.synapse-btn.is-soon {
	border-color: var(--synapse-line);
	color: var(--synapse-ink-faint) !important;
	cursor: default;
	pointer-events: none;
}
.synapse-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.8rem;
	margin: 1.6rem 0;
}
.synapse-card {
	border: 1px solid var(--synapse-line);
	background: var(--md-default-bg-color);
	padding: 1rem 1.1rem;
}
.synapse-card:hover {
	border-color: var(--synapse-accent);
}
.synapse-card h2 {
	margin-top: 0 !important;
	font-size: 0.7rem !important;
}
.synapse-card p {
	color: var(--md-default-fg-color--light);
	margin-bottom: 0.6rem;
}

/* Screenshots of the app, framed with the same hairline as everything else. */
.md-typeset img.synapse-shot {
	border: 1px solid var(--synapse-line);
	display: block;
	margin: 1rem auto;
}
.md-typeset img.synapse-hero-shot {
	max-width: 44rem;
	width: 100%;
	margin-top: 1.6rem;
}

/* --- Landing gallery: small framed thumbs, one palette each, click to
   enlarge (glightbox). Two columns on desktop, one on narrow screens. --- */
.md-typeset .synapse-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.1rem;
	max-width: 40rem;
	margin: 1.8rem auto 0;
}
.md-typeset .synapse-gallery figure {
	margin: 0;
	width: 100%;
}
.md-typeset .synapse-gallery img.synapse-shot {
	margin: 0;
	width: 100%;
}
.md-typeset .synapse-gallery figcaption {
	font-size: 0.6rem; /* 12px */
	font-style: normal;
	color: var(--synapse-ink-faint);
	margin: 0.4rem auto 0;
	max-width: none;
}
.md-typeset .synapse-gallery + p {
	font-size: 0.6rem;
	color: var(--synapse-ink-faint);
	margin-top: 0.9rem;
}
@media screen and (max-width: 44.9375em) {
	.md-typeset .synapse-gallery {
		grid-template-columns: 1fr;
	}
}

/* --- Screenshot carousel: a horizontal, swipeable strip. One captured
   screen leads, the next peeks in so the strip reads as scrollable, and it
   only ever takes one image's worth of height instead of stacking. Snaps
   per image; click any to enlarge (glightbox). Tall phone captures use the
   -phones modifier for a shorter cap. --- */
.md-typeset .synapse-carousel {
	display: flex;
	gap: 1rem;
	margin: 1.4rem 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 1rem;
	padding-bottom: 0.5rem;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
/* md_in_html wraps the images in a single <p> (and glightbox wraps each in an
   <a>). Dissolve the <p> so the anchors/images become the flex items, not one
   stacked paragraph. */
.md-typeset .synapse-carousel > p {
	display: contents;
}
.md-typeset .synapse-carousel > p > a,
.md-typeset .synapse-carousel > a,
.md-typeset .synapse-carousel > img {
	flex: 0 0 auto;
	scroll-snap-align: center;
	margin: 0;
}
.md-typeset .synapse-carousel img.synapse-shot {
	width: auto;
	height: 26rem;
	max-height: 70vh;
	margin: 0;
}
.md-typeset .synapse-carousel.synapse-phones img.synapse-shot {
	height: 30rem;
}
/* A quiet track under the thumb, so the strip reads as scrollable at a glance. */
.md-typeset .synapse-carousel::-webkit-scrollbar {
	height: 0.4rem;
}
.md-typeset .synapse-carousel::-webkit-scrollbar-thumb {
	background: var(--synapse-line);
	border-radius: 0.2rem;
}
@media screen and (max-width: 44.9375em) {
	.md-typeset .synapse-carousel img.synapse-shot {
		height: 20rem;
	}
	.md-typeset .synapse-carousel.synapse-phones img.synapse-shot {
		height: 24rem;
	}
}

/* Enlarged screenshots (glightbox): never overflow the viewport, whatever
   the image's natural size (the captures are 2x retina). */
.glightbox-container .gslide-image img {
	max-width: 95vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
}