/* Floating chrome — bottom dock, FABs, a11y preferences panel */

.tw-mobile-bottom-nav {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	background: var(--tw-color-surface, #fff);
	border-top: 1px solid var(--tw-color-border, #e2e8f0);
	padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}

.tw-mobile-bottom-nav__list {
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-mobile-bottom-nav__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	min-width: 3.25rem;
	padding: 0.35rem 0.4rem;
	border-radius: var(--tw-radius-button, 9999px);
	color: var(--tw-color-muted, #475569);
	text-decoration: none;
	font-size: 0.7rem;
	line-height: 1.2;
}

.tw-mobile-bottom-nav__link.is-current,
.tw-mobile-bottom-nav__link[aria-current='page'] {
	color: var(--tw-color-brand-primary, #4f46e5);
	font-weight: 600;
}

.tw-mobile-bottom-nav__svg {
	width: 1.25rem;
	height: 1.25rem;
}

body.tw-has-mobile-bottom-nav {
	padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
	.tw-mobile-bottom-nav {
		display: none !important;
	}
	body.tw-has-mobile-bottom-nav {
		padding-bottom: 0;
	}
}

.tw-float-icons {
	--tw-chrome-inset-x: var(--tw-chrome-inset-x-mobile, 16px);
	--tw-chrome-inset-y: var(--tw-chrome-inset-y-mobile, 16px);
	position: fixed;
	z-index: 45;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	pointer-events: none;
}

/* A11y stack above consent (99990) / popups — always visible when open.
 * font-size:16px locks panel rem/em so page text zoom never enlarges the chrome. */
.tw-a11y-root {
	--tw-chrome-inset-x: var(--tw-chrome-inset-x-mobile, 16px);
	--tw-chrome-inset-y: var(--tw-chrome-inset-y-mobile, 16px);
	position: fixed;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	pointer-events: none;
	font-size: 16px;
}

@media (min-width: 768px) {
	.tw-float-icons,
	.tw-a11y-root {
		--tw-chrome-inset-x: var(--tw-chrome-inset-x-desktop, 16px);
		--tw-chrome-inset-y: var(--tw-chrome-inset-y-desktop, 16px);
	}
}

.tw-float-icons > *,
.tw-a11y-root > * {
	pointer-events: auto;
}

.tw-float-icons[data-position-mobile='bottom_end'],
.tw-a11y-root[data-position-mobile='bottom_end'] {
	inset-inline-end: var(--tw-chrome-inset-x);
	bottom: var(--tw-chrome-inset-y);
	top: auto;
	inset-inline-start: auto;
}

.tw-float-icons[data-position-mobile='bottom_start'],
.tw-a11y-root[data-position-mobile='bottom_start'] {
	inset-inline-start: var(--tw-chrome-inset-x);
	bottom: var(--tw-chrome-inset-y);
	top: auto;
	inset-inline-end: auto;
}

.tw-float-icons[data-position-mobile='top_end'],
.tw-a11y-root[data-position-mobile='top_end'] {
	inset-inline-end: var(--tw-chrome-inset-x);
	top: var(--tw-chrome-inset-y);
	bottom: auto;
	inset-inline-start: auto;
}

.tw-float-icons[data-position-mobile='top_start'],
.tw-a11y-root[data-position-mobile='top_start'] {
	inset-inline-start: var(--tw-chrome-inset-x);
	top: var(--tw-chrome-inset-y);
	bottom: auto;
	inset-inline-end: auto;
}

.tw-float-icons[data-position-mobile='middle_end'],
.tw-a11y-root[data-position-mobile='middle_end'] {
	inset-inline-end: var(--tw-chrome-inset-x);
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	inset-inline-start: auto;
}

.tw-float-icons[data-position-mobile='middle_start'],
.tw-a11y-root[data-position-mobile='middle_start'] {
	inset-inline-start: var(--tw-chrome-inset-x);
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	inset-inline-end: auto;
}


.tw-float-icons[data-position-mobile='bottom_center'],
.tw-a11y-root[data-position-mobile='bottom_center'] {
	inset-inline-start: 50%;
	inset-inline-end: auto;
	bottom: var(--tw-chrome-inset-y);
	top: auto;
	transform: translateX(-50%);
}

.tw-float-icons[data-position-mobile='top_center'],
.tw-a11y-root[data-position-mobile='top_center'] {
	inset-inline-start: 50%;
	inset-inline-end: auto;
	top: var(--tw-chrome-inset-y);
	bottom: auto;
	transform: translateX(-50%);
}

@media (min-width: 768px) {
	.tw-float-icons[data-position-desktop='bottom_end'],
	.tw-a11y-root[data-position-desktop='bottom_end'] {
		inset-inline-end: var(--tw-chrome-inset-x);
		bottom: var(--tw-chrome-inset-y);
		top: auto;
		inset-inline-start: auto;
		transform: none;
	}
	.tw-float-icons[data-position-desktop='bottom_start'],
	.tw-a11y-root[data-position-desktop='bottom_start'] {
		inset-inline-start: var(--tw-chrome-inset-x);
		bottom: var(--tw-chrome-inset-y);
		top: auto;
		inset-inline-end: auto;
		transform: none;
	}
	.tw-float-icons[data-position-desktop='top_end'],
	.tw-a11y-root[data-position-desktop='top_end'] {
		inset-inline-end: var(--tw-chrome-inset-x);
		top: var(--tw-chrome-inset-y);
		bottom: auto;
		inset-inline-start: auto;
		transform: none;
	}
	.tw-float-icons[data-position-desktop='top_start'],
	.tw-a11y-root[data-position-desktop='top_start'] {
		inset-inline-start: var(--tw-chrome-inset-x);
		top: var(--tw-chrome-inset-y);
		bottom: auto;
		inset-inline-end: auto;
		transform: none;
	}
	.tw-float-icons[data-position-desktop='middle_end'],
	.tw-a11y-root[data-position-desktop='middle_end'] {
		inset-inline-end: var(--tw-chrome-inset-x);
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		inset-inline-start: auto;
	}
	.tw-float-icons[data-position-desktop='middle_start'],
	.tw-a11y-root[data-position-desktop='middle_start'] {
		inset-inline-start: var(--tw-chrome-inset-x);
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		inset-inline-end: auto;
	}

	.tw-float-icons[data-position-desktop='bottom_center'],
	.tw-a11y-root[data-position-desktop='bottom_center'] {
		inset-inline-start: 50%;
		inset-inline-end: auto;
		bottom: var(--tw-chrome-inset-y);
		top: auto;
		transform: translateX(-50%);
	}
	.tw-float-icons[data-position-desktop='top_center'],
	.tw-a11y-root[data-position-desktop='top_center'] {
		inset-inline-start: 50%;
		inset-inline-end: auto;
		top: var(--tw-chrome-inset-y);
		bottom: auto;
		transform: translateX(-50%);
	}
}

body.tw-has-mobile-bottom-nav .tw-float-icons[data-position-mobile^='bottom'],
body.tw-has-mobile-bottom-nav .tw-a11y-root[data-position-mobile^='bottom'] {
	bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px) + var(--tw-chrome-inset-y));
}

@media (min-width: 768px) {
	body.tw-has-mobile-bottom-nav .tw-float-icons[data-position-desktop^='bottom'],
	body.tw-has-mobile-bottom-nav .tw-a11y-root[data-position-desktop^='bottom'] {
		bottom: var(--tw-chrome-inset-y);
	}
}

.tw-a11y-root.tw-a11y--offset-stack-mobile[data-position-mobile^='bottom'] {
	bottom: calc(var(--tw-chrome-inset-y) + 3.5rem + 0.5rem);
}
body.tw-has-mobile-bottom-nav .tw-a11y-root.tw-a11y--offset-stack-mobile[data-position-mobile^='bottom'] {
	bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px) + var(--tw-chrome-inset-y) + 3.5rem + 0.5rem);
}
.tw-a11y-root.tw-a11y--offset-stack-mobile[data-position-mobile^='top'] {
	top: calc(var(--tw-chrome-inset-y) + 3.5rem + 0.5rem);
}
.tw-a11y-root.tw-a11y--offset-stack-mobile[data-position-mobile^='middle'] {
	margin-top: calc(-3.5rem - 0.5rem);
}

@media (min-width: 768px) {
	.tw-a11y-root.tw-a11y--offset-stack-desktop[data-position-desktop^='bottom'] {
		bottom: calc(var(--tw-chrome-inset-y) + 3.5rem + 0.5rem);
	}
	body.tw-has-mobile-bottom-nav .tw-a11y-root.tw-a11y--offset-stack-desktop[data-position-desktop^='bottom'] {
		bottom: calc(var(--tw-chrome-inset-y) + 3.5rem + 0.5rem);
	}
	.tw-a11y-root.tw-a11y--offset-stack-desktop[data-position-desktop^='top'] {
		top: calc(var(--tw-chrome-inset-y) + 3.5rem + 0.5rem);
	}
	.tw-a11y-root.tw-a11y--offset-stack-desktop[data-position-desktop^='middle'] {
		margin-top: calc(-3.5rem - 0.5rem);
	}
}

.tw-float-icons__btn,
.tw-a11y-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tw-float-size, 3rem);
	height: var(--tw-float-size, 3rem);
	border-radius: 9999px;
	background: var(--tw-float-bg, var(--tw-color-brand-primary, #4f46e5));
	color: var(--tw-float-ink, #fff);
	border: 0;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
	cursor: pointer;
	text-decoration: none;
}

.tw-a11y-trigger {
	position: relative;
	z-index: 100002;
	width: max(2.75rem, var(--tw-a11y-size, 3rem));
	height: max(2.75rem, var(--tw-a11y-size, 3rem));
	background: var(--tw-a11y-bg, var(--tw-color-text, #0f172a));
	color: var(--tw-a11y-ink, #fff);
}

.tw-a11y-trigger:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 3px;
}

.tw-float-icons__svg,
.tw-a11y-trigger__svg {
	width: 1.35rem;
	height: 1.35rem;
}

.tw-a11y-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100001;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(15, 23, 42, 0.42);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	cursor: pointer;
	pointer-events: auto;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.tw-a11y-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

.tw-a11y-backdrop.is-closing {
	opacity: 0;
	visibility: hidden;
}

.tw-a11y-backdrop[hidden] {
	display: none !important;
}

/* Side drawer — fixed to viewport (ported to body so root transforms don't clip). */
.tw-a11y-panel {
	--tw-a11y-drawer-w: min(22.5rem, 100vw);
	position: fixed;
	inset-block: 0;
	inset-inline-end: calc(-1 * var(--tw-a11y-drawer-w));
	inset-inline-start: auto;
	z-index: 100002;
	display: flex;
	flex-direction: column;
	width: var(--tw-a11y-drawer-w);
	max-width: 100vw;
	height: 100%;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-inline-start: 1px solid #cbd5e1;
	border-radius: var(--tw-radius-card, 1rem) 0 0 var(--tw-radius-card, 1rem);
	background: #fff;
	color: #0f172a;
	box-shadow: -18px 0 48px rgba(15, 23, 42, 0.22);
	visibility: hidden;
	pointer-events: none;
	transition:
		inset-inline-end 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		inset-inline-start 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.tw-a11y-panel[data-drawer-side='start'] {
	inset-inline-end: auto;
	inset-inline-start: calc(-1 * var(--tw-a11y-drawer-w));
	border-inline-start: 0;
	border-inline-end: 1px solid #cbd5e1;
	border-radius: 0 var(--tw-radius-card, 1rem) var(--tw-radius-card, 1rem) 0;
	box-shadow: 18px 0 48px rgba(15, 23, 42, 0.22);
}

.tw-a11y-panel.is-open {
	inset-inline-end: 0;
	visibility: visible;
	pointer-events: auto;
}

.tw-a11y-panel[data-drawer-side='start'].is-open {
	inset-inline-end: auto;
	inset-inline-start: 0;
}

.tw-a11y-panel.is-closing {
	inset-inline-end: calc(-1 * var(--tw-a11y-drawer-w));
	visibility: hidden;
	pointer-events: none;
}

.tw-a11y-panel[data-drawer-side='start'].is-closing {
	inset-inline-end: auto;
	inset-inline-start: calc(-1 * var(--tw-a11y-drawer-w));
}

html.tw-a11y-pause-motion .tw-a11y-panel,
html.tw-a11y-pause-motion .tw-a11y-backdrop {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.tw-a11y-panel,
	.tw-a11y-backdrop {
		transition: none !important;
	}
}

.tw-a11y-panel[hidden] {
	display: none !important;
}

.tw-a11y-panel__icon {
	width: 1.15rem;
	height: 1.15rem;
	display: block;
}

.tw-a11y-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex-shrink: 0;
	margin: 0;
	padding: 1rem 1.1rem;
	background: #0f172a;
	color: #fff;
	border-radius: 0;
}

.tw-a11y-panel__brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.tw-a11y-panel__brand-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: #fff;
}

.tw-a11y-panel__brand-icon .tw-a11y-panel__icon {
	width: 1.35rem;
	height: 1.35rem;
}

.tw-a11y-panel__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.tw-a11y-panel__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 1rem 1.1rem 1.15rem;
}

.tw-a11y-panel__intro {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: #475569;
}

.tw-a11y-panel__section {
	margin-bottom: 1.05rem;
}

.tw-a11y-panel__section:last-child {
	margin-bottom: 0;
}

.tw-a11y-panel__section-title {
	margin: 0 0 0.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #64748b;
}

.tw-a11y-panel__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	min-width: 2.75rem;
	border: 1px solid #cbd5e1;
	border-radius: 0.5rem;
	background: #f8fafc;
	color: #0f172a;
	cursor: pointer;
	padding: 0;
}

.tw-a11y-panel__header .tw-a11y-panel__icon-btn {
	border-color: rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.tw-a11y-panel__icon-btn:focus-visible,
.tw-a11y-panel__tile:focus-visible,
.tw-a11y-panel__swatch:focus-visible,
.tw-a11y-panel__reset:focus-visible,
.tw-a11y-panel__link:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 2px;
}

.tw-a11y-panel__stepper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.tw-a11y-panel__stepper-value {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	background: #f8fafc;
	font-size: 0.9rem;
	font-weight: 600;
}

.tw-a11y-panel__swatches {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.4rem;
}

.tw-a11y-panel__swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	min-height: 4.25rem;
	padding: 0.4rem 0.25rem;
	border: 2px solid #e2e8f0;
	border-radius: 0.5rem;
	background: #fff;
	color: #0f172a;
	cursor: pointer;
	font-size: 0.65rem;
	font-weight: 600;
	line-height: 1.15;
}

.tw-a11y-panel__swatch-preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	border: 1px solid currentColor;
}

.tw-a11y-panel__swatch--off .tw-a11y-panel__swatch-preview {
	background: #f8fafc;
	color: #0f172a;
}

.tw-a11y-panel__swatch--high .tw-a11y-panel__swatch-preview {
	background: #fff;
	color: #000;
	border-color: #000;
}

.tw-a11y-panel__swatch--dark .tw-a11y-panel__swatch-preview {
	background: #000;
	color: #fff;
	border-color: #000;
}

.tw-a11y-panel__swatch--gray .tw-a11y-panel__swatch-preview {
	background: #e5e5e5;
	color: #525252;
	border-color: #737373;
}

.tw-a11y-panel__swatch.is-active,
.tw-a11y-panel__swatch[aria-checked='true'] {
	border-color: #0f172a !important;
	background: #e2e8f0 !important;
	box-shadow: 0 0 0 2px #0f172a !important;
	color: #0f172a !important;
}

.tw-a11y-panel__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.4rem;
}

.tw-a11y-panel__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	min-height: 4.5rem;
	padding: 0.65rem 0.6rem;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	background: #f8fafc;
	color: #0f172a;
	cursor: pointer;
	text-align: start;
}

.tw-a11y-panel__tile-icon {
	display: inline-flex;
	color: #334155;
}

.tw-a11y-panel__tile-label {
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.25;
}

.tw-a11y-panel__badge {
	position: absolute;
	top: 0.35rem;
	inset-inline-end: 0.35rem;
	color: #fff;
}

/* Author display must not defeat [hidden] (Tailwind preflight is not !important). */
.tw-a11y-panel__badge[hidden],
.tw-a11y-panel__badge:not(.is-on) {
	display: none !important;
}

.tw-a11y-panel__badge.is-on:not([hidden]) {
	display: inline-flex;
}

.tw-a11y-panel__badge .tw-a11y-panel__icon {
	width: 0.95rem;
	height: 0.95rem;
}

.tw-a11y-panel__tile.is-active,
.tw-a11y-panel__tile[aria-pressed='true'] {
	background: #0f172a;
	border-color: #0f172a;
	color: #fff;
}

.tw-a11y-panel__tile.is-active .tw-a11y-panel__tile-icon,
.tw-a11y-panel__tile[aria-pressed='true'] .tw-a11y-panel__tile-icon {
	color: #fff;
}

.tw-a11y-panel__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
	flex-shrink: 0;
	margin: 0;
	padding: 0.85rem 1.1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid #e2e8f0;
	background: #fff;
}

.tw-a11y-panel__reset {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	padding: 0.4rem 0.85rem;
	border: 1px solid #cbd5e1;
	border-radius: 0.5rem;
	background: #fff;
	color: #0f172a;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.tw-a11y-panel__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #0f172a;
	text-decoration: underline;
}

/* —— Preference effects ——
 * Text size uses zoom on page chrome (NOT html font-size) so the a11y panel
 * stays a fixed control surface. Contrast forces page surfaces; panel excluded.
 */

html.tw-a11y-text-large #page,
html.tw-a11y-text-large .tw-mobile-bottom-nav,
html.tw-a11y-text-large .tw-float-icons {
	zoom: 1.125;
}

html.tw-a11y-text-larger #page,
html.tw-a11y-text-larger .tw-mobile-bottom-nav,
html.tw-a11y-text-larger .tw-float-icons {
	zoom: 1.25;
}

html.tw-a11y-text-xlarge #page,
html.tw-a11y-text-xlarge .tw-mobile-bottom-nav,
html.tw-a11y-text-xlarge .tw-float-icons {
	zoom: 1.5;
}

html.tw-a11y-font-readable {
	--tw-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--tw-font-heading: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

html.tw-a11y-font-readable body,
html.tw-a11y-font-readable #page,
html.tw-a11y-font-readable #page :where(
	h1, h2, h3, h4, h5, h6,
	p, li, a, button, label, input, textarea, select,
	span, strong, em, small, blockquote, figcaption, td, th, dt, dd
) {
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

html.tw-a11y-spacing #page :where(p, li, td, th, dd, blockquote, label) {
	line-height: 1.75 !important;
	letter-spacing: 0.04em !important;
	word-spacing: 0.12em !important;
}

/*
 * Contrast modes — TOKEN-SCOPED (preserve product design).
 *
 * Remap Design CSS vars INCLUDING --tw-brand-*-rgb (Tailwind bg-brand-* / text-brand-*
 * use rgb(var(--tw-brand-primary-rgb) / …) — hex-only remap leaves pink leftovers).
 *
 * Forbidden:
 * - nuclear h1–p { color:!important } (breaks text-white overlays + dark heroes)
 * - hardcoded link yellow/blue that fights header surfaces
 * - background-image: none on #page descendants
 * - page-wide box-shadow: none / filter:grayscale(1) on #page
 * - changing --tw-radius-* / button shape
 */

/* High contrast — light page, black ink */
html.tw-a11y-contrast-high {
	--tw-color-page: #ffffff;
	--tw-color-surface: #ffffff;
	--tw-color-surface-alt: #f1f5f9;
	--tw-color-text: #000000;
	--tw-color-muted: #1a1a1a;
	--tw-color-border: #000000;
	--tw-color-brand-primary: #000000;
	--tw-color-brand-secondary: #1a1a1a;
	--tw-color-brand-accent: #333333;
	--tw-color-on-primary: #ffffff;
	--tw-brand-primary-rgb: 0 0 0;
	--tw-brand-secondary-rgb: 26 26 26;
	--tw-brand-accent-rgb: 51 51 51;
	color-scheme: light;
}

/* Dark contrast — dark page, light ink */
html.tw-a11y-contrast-dark {
	--tw-color-page: #0a0a0a;
	--tw-color-surface: #141414;
	--tw-color-surface-alt: #1f1f1f;
	--tw-color-text: #ffffff;
	--tw-color-muted: #e5e5e5;
	--tw-color-border: #ffffff;
	--tw-color-brand-primary: #ffffff;
	--tw-color-brand-secondary: #e5e5e5;
	--tw-color-brand-accent: #d4d4d4;
	--tw-color-on-primary: #000000;
	--tw-brand-primary-rgb: 255 255 255;
	--tw-brand-secondary-rgb: 229 229 229;
	--tw-brand-accent-rgb: 212 212 212;
	color-scheme: dark;
}

/* Grayscale — desaturate brand tokens only (no page filter) */
html.tw-a11y-contrast-gray {
	--tw-color-brand-primary: #404040;
	--tw-color-brand-secondary: #525252;
	--tw-color-brand-accent: #737373;
	--tw-color-on-primary: #ffffff;
	--tw-color-border: #525252;
	--tw-color-muted: #525252;
	--tw-brand-primary-rgb: 64 64 64;
	--tw-brand-secondary-rgb: 82 82 82;
	--tw-brand-accent-rgb: 115 115 115;
}

html.tw-a11y-contrast-high body,
html.tw-a11y-contrast-dark body {
	background-color: var(--tw-color-page) !important;
	color: var(--tw-color-text) !important;
}

html.tw-a11y-contrast-high #page,
html.tw-a11y-contrast-dark #page {
	background-color: var(--tw-color-page);
	color: var(--tw-color-text);
}

/*
 * Hardcoded header chrome (floating / sticky_blur use bg-white/*) — map to surface.
 * Do not paint media/section wrappers.
 */
/* Light floating bars only — dark header.bg-theme-text is locked below. */
html.tw-a11y-contrast-high #page .tw-site-header :where(header, .tw-header-floating-shell):not(.bg-theme-text),
html.tw-a11y-contrast-dark #page .tw-site-header :where(header, .tw-header-floating-shell):not(.bg-theme-text),
html.tw-a11y-contrast-gray #page .tw-site-header :where(header, .tw-header-floating-shell):not(.bg-theme-text) {
	background-color: var(--tw-color-surface) !important;
	color: var(--tw-color-text);
	border-color: var(--tw-color-border) !important;
}

/* Links: inherit ink (theme text/muted) + underline — never yellow/blue on white bars */
html.tw-a11y-contrast-high #page a:not(.tw-btn):not([class*='tw-btn']),
html.tw-a11y-contrast-dark #page a:not(.tw-btn):not([class*='tw-btn']),
html.tw-a11y-contrast-gray #page a:not(.tw-btn):not([class*='tw-btn']) {
	color: inherit !important;
	text-decoration: underline !important;
	text-underline-offset: 0.15em;
}

html.tw-a11y-contrast-high #page :where(.text-theme-text, .tw-header-logo a),
html.tw-a11y-contrast-dark #page :where(.text-theme-text, .tw-header-logo a),
html.tw-a11y-contrast-gray #page :where(.text-theme-text, .tw-header-logo a) {
	color: var(--tw-color-text) !important;
}
html.tw-a11y-contrast-high #page .tw-site-header :where(header, .tw-header-floating-shell):not(.bg-theme-text) .tw-nav-link,
html.tw-a11y-contrast-dark #page .tw-site-header :where(header, .tw-header-floating-shell):not(.bg-theme-text) .tw-nav-link,
html.tw-a11y-contrast-gray #page .tw-site-header :where(header, .tw-header-floating-shell):not(.bg-theme-text) .tw-nav-link {
	color: var(--tw-color-text) !important;
}

html.tw-a11y-contrast-high #page :where(.text-theme-muted, .tw-header-desktop-nav),
html.tw-a11y-contrast-dark #page :where(.text-theme-muted, .tw-header-desktop-nav),
html.tw-a11y-contrast-gray #page :where(.text-theme-muted, .tw-header-desktop-nav) {
	color: var(--tw-color-muted) !important;
}

/* Buttons: solid fill from remapped brand; keep radius */
html.tw-a11y-contrast-high #page :where(
	button.tw-btn, a.tw-btn, .tw-btn, [type='submit'].tw-btn, [type='button'].tw-btn
),
html.tw-a11y-contrast-dark #page :where(
	button.tw-btn, a.tw-btn, .tw-btn, [type='submit'].tw-btn, [type='button'].tw-btn
),
html.tw-a11y-contrast-gray #page :where(
	button.tw-btn, a.tw-btn, .tw-btn, [type='submit'].tw-btn, [type='button'].tw-btn
) {
	background-color: var(--tw-color-brand-primary) !important;
	background-image: none !important;
	color: var(--tw-color-on-primary) !important;
	border-color: var(--tw-color-brand-primary) !important;
	box-shadow: none !important;
}

html.tw-a11y-contrast-high #page :where(button.tw-btn, a.tw-btn, .tw-btn) :where(span, i, svg),
html.tw-a11y-contrast-dark #page :where(button.tw-btn, a.tw-btn, .tw-btn) :where(span, i, svg),
html.tw-a11y-contrast-gray #page :where(button.tw-btn, a.tw-btn, .tw-btn) :where(span, i, svg) {
	background-color: transparent !important;
	color: inherit !important;
	fill: currentColor;
}

/* :where() above is specificity-zero — beat leftover text-white on dark CTAs. */
html.tw-a11y-contrast-dark #page a.tw-btn,
html.tw-a11y-contrast-dark #page button.tw-btn,
html.tw-a11y-contrast-dark #page .tw-btn {
	background-color: var(--tw-color-brand-primary) !important;
	color: var(--tw-color-on-primary) !important;
}
html.tw-a11y-contrast-dark #page .tw-btn [class*='text-white'],
html.tw-a11y-contrast-dark #page .tw-btn span {
	color: var(--tw-color-on-primary) !important;
}

/* Outline / ghost buttons on dark header — keep readable */
html.tw-a11y-contrast-dark #page .tw-site-header :where(
	a.tw-btn--outline, button.tw-btn--outline, .tw-btn--outline,
	a.tw-btn--ghost, button.tw-btn--ghost, .tw-btn--ghost
) {
	background-color: transparent !important;
	color: var(--tw-color-text) !important;
	border-color: var(--tw-color-border) !important;
}

/* Card edges without page-wide box-shadow:none */
html.tw-a11y-contrast-high #page :where(
	.bg-theme-surface, .bg-theme-page, .bg-theme-surfaceAlt,
	[class*='ring-theme-border'], [class*='rounded-card']
) {
	box-shadow: inset 0 0 0 1px var(--tw-color-border), var(--tw-shadow-soft, 0 1px 2px rgb(0 0 0 / 0.06));
}

html.tw-a11y-contrast-dark #page :where(
	.bg-theme-surface, .bg-theme-page, .bg-theme-surfaceAlt,
	[class*='ring-theme-border'], [class*='rounded-card']
) {
	box-shadow: inset 0 0 0 1px var(--tw-color-border), var(--tw-shadow-soft, 0 1px 2px rgb(0 0 0 / 0.2));
}

/*
 * Light leftover text-white. Do not use [class*="bg-white"] — that matches
 * photo overlays (bg-white/10) and paints black ink on dark photos.
 */
/* Light shells only — photo heroes keep text-white. */
html.tw-a11y-contrast-high #page .bg-white [class*='text-white'],
html.tw-a11y-contrast-high #page .bg-theme-surface [class*='text-white'],
html.tw-a11y-contrast-high #page .bg-theme-surfaceAlt [class*='text-white'],
html.tw-a11y-contrast-gray #page .bg-white [class*='text-white'],
html.tw-a11y-contrast-gray #page .bg-theme-surface [class*='text-white'],
html.tw-a11y-contrast-gray #page .bg-theme-surfaceAlt [class*='text-white'] {
	color: var(--tw-color-text) !important;
}

html.tw-a11y-contrast-dark #page .bg-white [class*='text-white'] {
	color: var(--tw-color-page) !important;
}

/* Dark leftover utility ink (text-slate-950 etc.) on the page wash. */
html.tw-a11y-contrast-dark #page :is(
	[class*='text-slate-9'],
	[class*='text-slate-8'],
	[class*='text-gray-9'],
	[class*='text-neutral-9'],
	[class*='text-zinc-9']
) {
	color: var(--tw-color-text) !important;
}
html.tw-a11y-contrast-dark #page :is(.bg-white, .bg-theme-surface, .bg-theme-surfaceAlt) :is(
	[class*='text-slate-9'],
	[class*='text-slate-8'],
	[class*='text-gray-9'],
	[class*='text-neutral-9'],
	[class*='text-zinc-9']
) {
	color: var(--tw-color-page) !important;
}

/* Dark page wash: ink is text, never page (page==fill would be black-on-black). */
html.tw-a11y-contrast-dark #page .bg-theme-page {
	background-color: var(--tw-color-page) !important;
	color: var(--tw-color-text) !important;
}

html.tw-a11y-contrast-dark #page .bg-theme-page :is(h1, h2, h3, h4, h5, h6, p, span, a, li, small, strong, label) {
	color: inherit !important;
}

html.tw-a11y-contrast-dark #page .bg-theme-page :is(
	[class*='text-slate-9'],
	[class*='text-slate-8'],
	[class*='text-gray-9'],
	[class*='text-neutral-9'],
	[class*='text-zinc-9']
) {
	color: var(--tw-color-text) !important;
}

html.tw-a11y-contrast-dark #page .bg-theme-surface,
html.tw-a11y-contrast-dark #page .bg-theme-surfaceAlt {
	color: var(--tw-color-text) !important;
}
html.tw-a11y-contrast-dark #page .bg-theme-surface :is(h1, h2, h3, h4, h5, h6, p, span, a, li, small, strong, label),
html.tw-a11y-contrast-dark #page .bg-theme-surfaceAlt :is(h1, h2, h3, h4, h5, h6, p, span, a, li, small, strong, label) {
	color: inherit !important;
}
html.tw-a11y-contrast-dark #page .bg-theme-surface :is(
	[class*='text-slate-9'],
	[class*='text-slate-8'],
	[class*='text-gray-9'],
	[class*='text-neutral-9'],
	[class*='text-zinc-9']
),
html.tw-a11y-contrast-dark #page .bg-theme-surfaceAlt :is(
	[class*='text-slate-9'],
	[class*='text-slate-8'],
	[class*='text-gray-9'],
	[class*='text-neutral-9'],
	[class*='text-zinc-9']
) {
	color: var(--tw-color-text) !important;
}


html.tw-a11y-contrast-high #page footer [class*='text-white'],
html.tw-a11y-contrast-dark #page footer [class*='text-white'],
html.tw-a11y-contrast-gray #page footer [class*='text-white'] {
	color: #ffffff !important;
}

/*
 * Inverted cards (bg-theme-text + text-theme-page) — NOT footers, NOT header.
 * High/gray only: text token is still dark, so the fill stays a dark band and
 * page ink on it is readable. Dark is handled below (token remap turns this
 * fill white and would hide text-white).
 */
html.tw-a11y-contrast-high #page .bg-theme-text:not(footer):not(.tw-site-footer):not(header),
html.tw-a11y-contrast-gray #page .bg-theme-text:not(footer):not(.tw-site-footer):not(header) {
	color: var(--tw-color-page) !important;
}

html.tw-a11y-contrast-high #page .bg-theme-text:not(footer):not(.tw-site-footer):not(header) :is(h1, h2, h3, h4, h5, h6, p, span, a, li, small, strong, label),
html.tw-a11y-contrast-gray #page .bg-theme-text:not(footer):not(.tw-site-footer):not(header) :is(h1, h2, h3, h4, h5, h6, p, span, a, li, small, strong, label) {
	color: inherit !important;
}

html.tw-a11y-contrast-high #page .bg-theme-text:not(footer):not(.tw-site-footer):not(header) [class*='bg-brand'],
html.tw-a11y-contrast-gray #page .bg-theme-text:not(footer):not(.tw-site-footer):not(header) [class*='bg-brand'] {
	color: inherit !important;
	border-color: currentColor !important;
}

/*
 * Dark force: --tw-color-text becomes #fff, so .bg-theme-text (section media
 * layers AND cards) paints a white slab under text-white → invisible copy.
 * Keep those shells as dark bands, same contract as header/footer.
 */
html.tw-a11y-contrast-dark #page .bg-theme-text,
html.tw-a11y-contrast-dark #page .tw-section-bg__media.bg-theme-text {
	background-color: #0a0a0a !important;
	color: #ffffff !important;
}

html.tw-a11y-contrast-dark #page .bg-theme-text :is(h1, h2, h3, h4, h5, h6, p, span, a, li, small, strong, label),
html.tw-a11y-contrast-dark #page .bg-theme-text [class*='text-white'],
html.tw-a11y-contrast-dark #page .bg-theme-text .text-theme-page {
	color: #ffffff !important;
}

/* Brand-gradient section fills remap to white in dark — same white-slab trap. */
html.tw-a11y-contrast-dark #page div.tw-section-bg__media[class*='from-brand'],
html.tw-a11y-contrast-dark #page div.tw-section-bg__media[class*='via-brand'],
html.tw-a11y-contrast-dark #page div.tw-section-bg__media[class*='to-brand'],
html.tw-a11y-contrast-dark #page div.tw-section-bg__media[class*='bg-brand'] {
	background-color: #0a0a0a !important;
	background-image: linear-gradient(to bottom right, #0a0a0a, #262626) !important;
}

/*
 * Footer dark band (bg-theme-text text-white) — stay black + white ink in all force modes.
 * Token remap would turn the band white and leave text-white/70 invisible (white-on-white)
 * or force link ink black on black via [class*="text-white"].
 */
html.tw-a11y-contrast-high #page footer.bg-theme-text,
html.tw-a11y-contrast-dark #page footer.bg-theme-text,
html.tw-a11y-contrast-gray #page footer.bg-theme-text,
html.tw-a11y-contrast-high #page footer.tw-site-footer.bg-theme-text,
html.tw-a11y-contrast-dark #page footer.tw-site-footer.bg-theme-text,
html.tw-a11y-contrast-gray #page footer.tw-site-footer.bg-theme-text,
html.tw-a11y-contrast-high #page header.bg-theme-text,
html.tw-a11y-contrast-dark #page header.bg-theme-text,
html.tw-a11y-contrast-gray #page header.bg-theme-text,
html.tw-a11y-contrast-high #page .tw-site-header .bg-theme-text,
html.tw-a11y-contrast-dark #page .tw-site-header .bg-theme-text,
html.tw-a11y-contrast-gray #page .tw-site-header .bg-theme-text {
	background-color: #0a0a0a !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
}

html.tw-a11y-contrast-high #page footer.bg-theme-text :is(a, p, span, small, li, h2, h3, h4, ul, div),
html.tw-a11y-contrast-dark #page footer.bg-theme-text :is(a, p, span, small, li, h2, h3, h4, ul, div),
html.tw-a11y-contrast-gray #page footer.bg-theme-text :is(a, p, span, small, li, h2, h3, h4, ul, div),
html.tw-a11y-contrast-high #page header.bg-theme-text :is(a, p, span, small, li, nav, div, button),
html.tw-a11y-contrast-dark #page header.bg-theme-text :is(a, p, span, small, li, nav, div, button),
html.tw-a11y-contrast-gray #page header.bg-theme-text :is(a, p, span, small, li, nav, div, button),
html.tw-a11y-contrast-high #page header.bg-theme-text .tw-nav-link,
html.tw-a11y-contrast-dark #page header.bg-theme-text .tw-nav-link,
html.tw-a11y-contrast-gray #page header.bg-theme-text .tw-nav-link,
html.tw-a11y-contrast-high #page footer.bg-theme-text [class*='text-white'],
html.tw-a11y-contrast-dark #page footer.bg-theme-text [class*='text-white'],
html.tw-a11y-contrast-gray #page footer.bg-theme-text [class*='text-white'],
html.tw-a11y-contrast-high #page header.bg-theme-text [class*='text-white'],
html.tw-a11y-contrast-dark #page header.bg-theme-text [class*='text-white'],
html.tw-a11y-contrast-gray #page header.bg-theme-text [class*='text-white'],
html.tw-a11y-contrast-high #page footer.bg-theme-text .tw-consent-manage-wrap,
html.tw-a11y-contrast-dark #page footer.bg-theme-text .tw-consent-manage-wrap,
html.tw-a11y-contrast-gray #page footer.bg-theme-text .tw-consent-manage-wrap,
html.tw-a11y-contrast-high #page footer.bg-theme-text .tw-consent-manage-wrap a,
html.tw-a11y-contrast-dark #page footer.bg-theme-text .tw-consent-manage-wrap a,
html.tw-a11y-contrast-gray #page footer.bg-theme-text .tw-consent-manage-wrap a {
	color: #ffffff !important;
}

/*
 * Solid CTAs: on-primary ink must beat later inherit.
 * Dark remaps --tw-color-brand-primary to #fff; .bg-theme-page :is(a,span)
 * and header :is(a,span) were painting that white fill with white type.
 */
html.tw-a11y-contrast-high #page a.tw-btn,
html.tw-a11y-contrast-high #page button.tw-btn,
html.tw-a11y-contrast-high #page .tw-btn,
html.tw-a11y-contrast-dark #page a.tw-btn,
html.tw-a11y-contrast-dark #page button.tw-btn,
html.tw-a11y-contrast-dark #page .tw-btn,
html.tw-a11y-contrast-gray #page a.tw-btn,
html.tw-a11y-contrast-gray #page button.tw-btn,
html.tw-a11y-contrast-gray #page .tw-btn,
html.tw-a11y-contrast-high #page header.bg-theme-text a.tw-btn,
html.tw-a11y-contrast-dark #page header.bg-theme-text a.tw-btn,
html.tw-a11y-contrast-gray #page header.bg-theme-text a.tw-btn,
html.tw-a11y-contrast-high #page header.bg-theme-text button.tw-btn,
html.tw-a11y-contrast-dark #page header.bg-theme-text button.tw-btn,
html.tw-a11y-contrast-gray #page header.bg-theme-text button.tw-btn {
	background-color: var(--tw-color-brand-primary) !important;
	color: var(--tw-color-on-primary) !important;
}

html.tw-a11y-contrast-high #page .tw-btn :is(span, i, svg),
html.tw-a11y-contrast-dark #page .tw-btn :is(span, i, svg),
html.tw-a11y-contrast-gray #page .tw-btn :is(span, i, svg),
html.tw-a11y-contrast-high #page header.bg-theme-text .tw-btn :is(span, i, svg, small),
html.tw-a11y-contrast-dark #page header.bg-theme-text .tw-btn :is(span, i, svg, small),
html.tw-a11y-contrast-gray #page header.bg-theme-text .tw-btn :is(span, i, svg, small) {
	color: var(--tw-color-on-primary) !important;
	background-color: transparent !important;
}

html.tw-a11y-contrast-high #page :is(a.tw-btn, button.tw-btn, .tw-btn).tw-btn--outline,
html.tw-a11y-contrast-dark #page :is(a.tw-btn, button.tw-btn, .tw-btn).tw-btn--outline,
html.tw-a11y-contrast-gray #page :is(a.tw-btn, button.tw-btn, .tw-btn).tw-btn--outline,
html.tw-a11y-contrast-high #page :is(a.tw-btn, button.tw-btn, .tw-btn).tw-btn--ghost,
html.tw-a11y-contrast-dark #page :is(a.tw-btn, button.tw-btn, .tw-btn).tw-btn--ghost,
html.tw-a11y-contrast-gray #page :is(a.tw-btn, button.tw-btn, .tw-btn).tw-btn--ghost {
	background-color: transparent !important;
	color: var(--tw-color-text) !important;
	border-color: var(--tw-color-text) !important;
	box-shadow: none !important;
}

html.tw-a11y-contrast-high #page header.bg-theme-text :is(.tw-btn--outline, .tw-btn--ghost),
html.tw-a11y-contrast-dark #page header.bg-theme-text :is(.tw-btn--outline, .tw-btn--ghost),
html.tw-a11y-contrast-gray #page header.bg-theme-text :is(.tw-btn--outline, .tw-btn--ghost),
html.tw-a11y-contrast-high #page footer.bg-theme-text :is(.tw-btn--outline, .tw-btn--ghost),
html.tw-a11y-contrast-dark #page footer.bg-theme-text :is(.tw-btn--outline, .tw-btn--ghost),
html.tw-a11y-contrast-gray #page footer.bg-theme-text :is(.tw-btn--outline, .tw-btn--ghost) {
	background-color: transparent !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
}

html.tw-a11y-contrast-high #page header.bg-theme-text :is(.tw-btn--outline, .tw-btn--ghost) :is(span, i, svg),
html.tw-a11y-contrast-dark #page header.bg-theme-text :is(.tw-btn--outline, .tw-btn--ghost) :is(span, i, svg),
html.tw-a11y-contrast-gray #page header.bg-theme-text :is(.tw-btn--outline, .tw-btn--ghost) :is(span, i, svg) {
	color: #ffffff !important;
}

/* Consent / float stay readable under dark page */
html.tw-a11y-contrast-high .tw-consent__panel,
html.tw-a11y-contrast-dark .tw-consent__panel,
html.tw-a11y-contrast-gray .tw-consent__panel {
	background: #fff !important;
	color: #0f172a !important;
	border-color: #cbd5e1 !important;
}
html.tw-a11y-contrast-high .tw-consent__panel :is(p, a, span, button, h2),
html.tw-a11y-contrast-dark .tw-consent__panel :is(p, a, span, button, h2),
html.tw-a11y-contrast-gray .tw-consent__panel :is(p, a, span, button, h2) {
	color: #0f172a !important;
}
html.tw-a11y-contrast-high .tw-consent__action.tw-btn--primary,
html.tw-a11y-contrast-dark .tw-consent__action.tw-btn--primary,
html.tw-a11y-contrast-gray .tw-consent__action.tw-btn--primary {
	background: #0f172a !important;
	color: #fff !important;
	border-color: #0f172a !important;
}

html.tw-a11y-underline #page a {
	text-decoration: underline !important;
	text-underline-offset: 0.15em;
}

html.tw-a11y-focus #page *:focus-visible {
	outline: 3px solid #000000 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #000000 !important;
}

html.tw-a11y-pause-motion *,
html.tw-a11y-pause-motion *::before,
html.tw-a11y-pause-motion *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
}

/*
 * Panel chrome is outside #page — do NOT restyle its controls under contrast modes.
 * Only neutralize filter on the root and keep the shell light so it stays readable.
 */
html.tw-a11y-contrast-high .tw-a11y-root,
html.tw-a11y-contrast-dark .tw-a11y-root,
html.tw-a11y-contrast-gray .tw-a11y-root,
html.tw-a11y-contrast-high .tw-a11y-backdrop,
html.tw-a11y-contrast-dark .tw-a11y-backdrop,
html.tw-a11y-contrast-gray .tw-a11y-backdrop {
	filter: none !important;
}

html.tw-a11y-contrast-high .tw-a11y-panel,
html.tw-a11y-contrast-dark .tw-a11y-panel,
html.tw-a11y-contrast-gray .tw-a11y-panel {
	filter: none !important;
	background: #fff !important;
	color: #0f172a !important;
	border-color: #cbd5e1 !important;
}

html.tw-a11y-contrast-high .tw-a11y-panel :is(
	.tw-a11y-panel__intro,
	.tw-a11y-panel__section-title,
	.tw-a11y-panel__tile,
	.tw-a11y-panel__tile-label,
	.tw-a11y-panel__swatch,
	.tw-a11y-panel__stepper-value,
	.tw-a11y-panel__reset
),
html.tw-a11y-contrast-dark .tw-a11y-panel :is(
	.tw-a11y-panel__intro,
	.tw-a11y-panel__section-title,
	.tw-a11y-panel__tile,
	.tw-a11y-panel__tile-label,
	.tw-a11y-panel__swatch,
	.tw-a11y-panel__stepper-value,
	.tw-a11y-panel__reset
),
html.tw-a11y-contrast-gray .tw-a11y-panel :is(
	.tw-a11y-panel__intro,
	.tw-a11y-panel__section-title,
	.tw-a11y-panel__tile,
	.tw-a11y-panel__tile-label,
	.tw-a11y-panel__swatch,
	.tw-a11y-panel__stepper-value,
	.tw-a11y-panel__reset
) {
	color: #0f172a !important;
}

html.tw-a11y-contrast-high .tw-a11y-panel__intro,
html.tw-a11y-contrast-dark .tw-a11y-panel__intro,
html.tw-a11y-contrast-gray .tw-a11y-panel__intro,
html.tw-a11y-contrast-high .tw-a11y-panel__section-title,
html.tw-a11y-contrast-dark .tw-a11y-panel__section-title,
html.tw-a11y-contrast-gray .tw-a11y-panel__section-title {
	color: #475569 !important;
}

html.tw-a11y-contrast-high .tw-a11y-panel__header,
html.tw-a11y-contrast-dark .tw-a11y-panel__header,
html.tw-a11y-contrast-gray .tw-a11y-panel__header,
html.tw-a11y-contrast-high .tw-a11y-panel__title,
html.tw-a11y-contrast-dark .tw-a11y-panel__title,
html.tw-a11y-contrast-gray .tw-a11y-panel__title,
html.tw-a11y-contrast-high .tw-a11y-panel__header .tw-a11y-panel__icon-btn,
html.tw-a11y-contrast-dark .tw-a11y-panel__header .tw-a11y-panel__icon-btn,
html.tw-a11y-contrast-gray .tw-a11y-panel__header .tw-a11y-panel__icon-btn {
	color: #fff !important;
}

html.tw-a11y-contrast-high .tw-a11y-panel__link,
html.tw-a11y-contrast-dark .tw-a11y-panel__link,
html.tw-a11y-contrast-gray .tw-a11y-panel__link {
	color: #0f172a !important;
}

@media (prefers-reduced-motion: reduce) {
	.tw-float-icons__btn,
	.tw-a11y-trigger,
	.tw-a11y-backdrop {
		transition: none;
	}
}