/**
 * Monitee — everything visible.
 *
 * Tokens come from theme.json as --wp--preset--* custom properties. The dark
 * theme (section 12) swaps the token values under :root[data-theme="dark"],
 * so nothing below names a hex except the two store-badge masks.
 *
 * Sections
 *   1. Base
 *   2. Header
 *   3. Sections and headings
 *   4. Hero
 *   5. Buttons
 *   6. Cards and feature grid
 *   7. Screenshots row
 *   8. Steps
 *   9. Plans and the comparison table
 *  10. FAQ, routes, small parts
 *  11. Footer and prose pages
 *  12. Dark theme
 *  13. Theme toggle
 *  14. Rendered markdown (Documents from Git)
 *  15. Motion
 */

/* ==========================================================================
   1. Base
   ========================================================================== */

:root {
	--mnt-header-h: 64px;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mnt-header-h) + 1rem);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--text);
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

.mnt-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.92em;
}

::selection {
	background: var(--wp--preset--color--primary-container);
}

.mnt-main {
	padding-bottom: var(--wp--preset--spacing--80);
}

/* ==========================================================================
   2. Header
   ========================================================================== */

.mnt-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

@supports not (color-mix(in srgb, red 50%, blue)) {
	.mnt-header { background: var(--wp--preset--color--base); }
}

.mnt-header__row {
	min-height: var(--mnt-header-h);
	padding-block: 0.625rem;
}

.mnt-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.mnt-brand:hover {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

/* The app icon (a chip with the pulse cut out) as an alpha mask, filled with
   the text colour: black on light, white on dark, from the one image. */
.mnt-brand__mark {
	display: block;
	width: 40px;
	height: 40px;
	background: currentColor;
	-webkit-mask: url(../img/mark.png) center / contain no-repeat;
	mask: url(../img/mark.png) center / contain no-repeat;
}

.mnt-header__nav {
	gap: var(--wp--preset--spacing--40);
}

.wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.25rem 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--70);
	font-size: var(--wp--preset--font-size--lead);
}

/* ==========================================================================
   3. Sections and headings
   ========================================================================== */

.mnt-section {
	padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.25rem);
}

.mnt-eyebrow {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mnt-section > h2,
.mnt-section > h1 {
	margin: 0.375rem 0 0;
}

.mnt-lead {
	margin: 0.625rem 0 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--lead);
	max-width: 60ch;
}

.mnt-note {
	margin: 0;
	color: var(--wp--preset--color--text-faint);
	font-size: var(--wp--preset--font-size--small);
}

.mnt-section > .mnt-grid,
.mnt-section > .mnt-steps,
.mnt-section > .mnt-plans,
.mnt-section > .mnt-shots,
.mnt-section > .mnt-faq,
.mnt-section > .mnt-compare,
.mnt-section > .mnt-cta,
.mnt-section > .mnt-sp-stats,
.mnt-section > .mnt-sp-wall {
	margin-top: 1.75rem;
}

.mnt-section > .mnt-sp-stats + .mnt-sp-wall {
	margin-top: 1rem;
}

.mnt-section > .mnt-more {
	margin-top: 1.25rem;
	font-weight: 600;
}

/* A hairline between the big landing sections, so the page has a rhythm
   without background bands. */
.mnt-section--rule {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* ==========================================================================
   4. Hero
   ========================================================================== */

.mnt-hero {
	padding-block: clamp(2rem, 1rem + 4vw, 3.5rem) clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

.mnt-hero .wp-block-columns {
	align-items: center;
	gap: var(--wp--preset--spacing--60);
}

.mnt-hero__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.06;
	letter-spacing: -0.025em;
}

.mnt-hero .mnt-lede {
	margin: 1rem 0 1.5rem;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--lead);
	max-width: 36ch;
}

.mnt-hero .mnt-cta + .mnt-note {
	margin-top: 0.875rem;
}

.mnt-hero__art {
	display: flex;
	justify-content: center;
}

.mnt-phone {
	margin: 0;
	max-width: 300px;
}

.mnt-phone img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--xl);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--wp--preset--shadow--float);
	background: var(--wp--preset--color--surface);
}

@media (max-width: 781px) {
	.mnt-hero {
		text-align: center;
	}

	.mnt-hero .mnt-lede {
		margin-inline: auto;
	}

	.mnt-hero .wp-block-buttons {
		justify-content: center;
	}

	.mnt-phone {
		max-width: 240px;
		margin-top: 0.5rem;
	}
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease, filter 120ms ease;
}

.wp-block-button__link:hover {
	text-decoration: none;
}

.wp-block-button.is-style-quiet .wp-block-button__link {
	background: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-quiet .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--primary);
	filter: brightness(0.97);
}

/* A button with no href is a label, not a link. */
.wp-block-button__link:not([href]) {
	cursor: default;
}

/* Store marks, painted in currentColor through a mask so they follow the
   button's text colour in both themes. */
.mnt-btn--play .wp-block-button__link::before,
.mnt-btn--apple .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 1.125em;
	height: 1.125em;
	background: currentColor;
	-webkit-mask: var(--mnt-mark) center / contain no-repeat;
	mask: var(--mnt-mark) center / contain no-repeat;
}

.mnt-btn--play .wp-block-button__link::before {
	--mnt-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 3.3v17.4a1 1 0 0 0 1.5.86l14.6-8.7a1 1 0 0 0 0-1.72L6 2.44a1 1 0 0 0-1.5.86z'/%3E%3C/svg%3E");
}

.mnt-btn--apple .wp-block-button__link::before {
	--mnt-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E");
}

/* ==========================================================================
   6. Cards and feature grid
   ========================================================================== */

.mnt-card,
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	padding: 1.375rem;
	box-shadow: var(--wp--preset--shadow--card);
}

.mnt-card > h3,
.is-style-card > h3 {
	margin: 0.625rem 0 0.375rem;
	font-size: var(--wp--preset--font-size--heading-3);
}

.mnt-card > h3.mnt-card__title,
.is-style-card > h3.mnt-card__title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-top: 0;
}

.mnt-card > p,
.is-style-card > p {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.mnt-card > p + p {
	margin-top: 0.625rem;
}

.mnt-card > :first-child {
	margin-top: 0;
}

/* A bare line glyph on the title row, no tile behind it. */
.mnt-icon {
	display: inline-flex;
	flex: none;
	color: var(--wp--preset--color--primary);
}

.mnt-icon svg {
	width: 22px;
	height: 22px;
}

/* A card that is itself a link (install routes). */
a.mnt-card {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: border-color 120ms ease, transform 160ms ease;
}

a.mnt-card:hover {
	color: inherit;
	text-decoration: none;
	border-color: var(--wp--preset--color--line-strong);
	transform: translateY(-2px);
}

/* ==========================================================================
   7. Screenshots row
   ========================================================================== */

.mnt-shots {
	display: flex;
	gap: 1.125rem;
	overflow-x: auto;
	padding: 0.5rem 0.25rem 1.25rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.mnt-shots > * {
	flex: none;
	width: min(72vw, 270px);
	margin: 0;
	scroll-snap-align: center;
}

.mnt-shots img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--xl);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--wp--preset--shadow--float);
	background: var(--wp--preset--color--surface);
}

/* ==========================================================================
   8. Steps
   ========================================================================== */

.mnt-step,
.wp-block-group.is-style-step {
	padding: 1.375rem;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--primary-container);
}

.mnt-step > .mnt-step__num {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: 0.625rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1;
}

.mnt-step > h3,
.is-style-step > h3 {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--text);
	font-size: 1.125rem;
}

.mnt-step > p,
.is-style-step > p {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.mnt-step > p + p {
	margin-top: 0.625rem;
}

/* ==========================================================================
   9. Plans and the comparison table
   ========================================================================== */

.mnt-plan {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	padding: 1.625rem;
}

.mnt-plan--pro {
	border-color: var(--wp--preset--color--primary);
	background: linear-gradient(180deg, var(--wp--preset--color--surface), var(--wp--preset--color--primary-container));
}

.mnt-plan > h3 {
	margin: 0;
	font-size: 1.375rem;
}

.mnt-plan > .mnt-price {
	margin: 0.5rem 0 0.125rem;
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.mnt-plan > .mnt-price small {
	display: block;
	margin-top: 0.125rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--text-muted);
}

.mnt-plan > ul {
	margin: 0.875rem 0 0;
	padding-left: 1.25rem;
	color: var(--wp--preset--color--text-muted);
}

.mnt-plan > ul li {
	margin: 0.375rem 0;
}

.mnt-plan > ul li::marker {
	color: var(--wp--preset--color--primary);
}

.mnt-plan > p {
	margin: 0.875rem 0 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.mnt-compare {
	overflow-x: auto;
}

.mnt-compare table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.mnt-compare th,
.mnt-compare td {
	padding: 0.75rem 0.875rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}

.mnt-compare th {
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

.mnt-compare thead th {
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-faint);
	border-bottom-color: var(--wp--preset--color--line-strong);
}

.mnt-compare td {
	color: var(--wp--preset--color--text-muted);
}

.mnt-compare th:not(:first-child),
.mnt-compare td:not(:first-child) {
	width: 22%;
	white-space: nowrap;
}

.mnt-compare .mnt-compare__group td {
	padding-top: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--text);
	border-bottom-color: var(--wp--preset--color--line-strong);
}

.mnt-compare .mnt-compare__pro {
	background: color-mix(in srgb, var(--wp--preset--color--primary-container) 55%, transparent);
}

.mnt-compare .mnt-yes {
	color: var(--wp--preset--color--success);
	font-weight: 600;
}

.mnt-compare .mnt-no {
	color: var(--wp--preset--color--text-faint);
}

/* ==========================================================================
   10. FAQ, routes, small parts
   ========================================================================== */

.mnt-faq {
	display: grid;
	gap: 0.625rem;
	max-width: 760px;
}

.mnt-faq__item summary {
	cursor: pointer;
	font-weight: 600;
}

.mnt-faq__item p {
	margin: 0.625rem 0 0;
	color: var(--wp--preset--color--text-muted);
}

.mnt-routes {
	list-style: none;
	margin: 0.875rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.mnt-routes a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.mnt-routes a:hover {
	border-color: var(--wp--preset--color--line-strong);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.mnt-tag {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--text-faint);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	white-space: nowrap;
}

.mnt-tag--primary {
	background: var(--wp--preset--color--primary-container);
	border-color: transparent;
	color: var(--wp--preset--color--primary);
}

.mnt-addr {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	border-radius: var(--wp--custom--radius--sm);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--success) 40%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--success) 8%, transparent);
	color: var(--wp--preset--color--success);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   11. Footer and prose pages
   ========================================================================== */

.mnt-footer {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-block: 1.75rem 3rem;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.mnt-footer__row {
	gap: 0.875rem 1.5rem;
}

.mnt-footer p {
	margin: 0;
}

.mnt-footer a {
	color: var(--wp--preset--color--text-muted);
}

.mnt-footer a:hover {
	color: var(--wp--preset--color--text);
}

.mnt-prose {
	padding-top: var(--wp--preset--spacing--70);
}

.mnt-prose > h1,
.mnt-prose > .wp-block-post-title {
	margin-bottom: var(--wp--preset--spacing--50);
}

.mnt-prose .wp-block-post-date + .wp-block-post-title {
	margin-top: 0.25rem;
}

.mnt-prose .mnt-card > h3 {
	margin-top: 0.25rem;
}

.wp-block-search__button {
	border-radius: var(--wp--custom--radius--sm);
}

.wp-block-search__input {
	border-radius: var(--wp--custom--radius--md);
	border-color: var(--wp--preset--color--line-strong);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
}

/* ==========================================================================
   12. Dark theme
   ==========================================================================
   theme.json writes the light presets onto :root; overriding them under an
   attribute selector wins on specificity, so every rule above resolves to
   the dark values untouched. Each text colour clears 4.5:1 on base and
   surface.
   ========================================================================== */

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

	--wp--preset--color--base: #0D0E12;
	--wp--preset--color--base-sunken: #0B0C0F;
	--wp--preset--color--surface: #181920;
	--wp--preset--color--surface-raised: #23252E;

	--wp--preset--color--line: #22242D;
	--wp--preset--color--line-strong: #353B4D;

	--wp--preset--color--text: #E4E5F0;
	--wp--preset--color--text-muted: #A9AAB5;
	--wp--preset--color--text-faint: #7B839F;

	--wp--preset--color--primary: #AEBBFF;
	--wp--preset--color--primary-soft: #BFC9FF;
	--wp--preset--color--primary-container: #2C345E;
	--wp--preset--color--on-primary: #0D0E12;

	--wp--preset--color--success: #00A15D;
	--wp--preset--color--warning: #FFAE58;
	--wp--preset--color--danger: #E36688;

	/* Shadows read as nothing on near-black; a top highlight carries depth instead. */
	--wp--preset--shadow--card: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 1px 2px rgba(0, 0, 0, 0.5);
	--wp--preset--shadow--float: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}

:root[data-theme="dark"] ::selection {
	background: rgba(186, 197, 238, 0.28);
}

/* The tint is darker than the page here, so muted text needs a step up. */
:root[data-theme="dark"] .mnt-step > p,
:root[data-theme="dark"] .is-style-step > p,
:root[data-theme="dark"] .mnt-plan--pro > ul,
:root[data-theme="dark"] .mnt-plan--pro > p {
	color: var(--wp--preset--color--text);
	opacity: 0.85;
}

:root[data-theme="dark"] .wp-block-button.is-style-quiet .wp-block-button__link:hover {
	filter: brightness(1.15);
}

:root[data-theme="dark"] .mnt-header {
	background: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
}

/* ==========================================================================
   13. Theme toggle
   ========================================================================== */

.mnt-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: none;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
	transition: color 120ms ease, border-color 120ms ease;
}

.mnt-theme-toggle:hover {
	color: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--primary);
}

.mnt-theme-toggle svg {
	width: 17px;
	height: 17px;
}

/* Show the icon for the theme you would switch TO. Keyed off :not(dark) so it
   is right before the boot script runs and when it never runs. */
:root:not([data-theme="dark"]) .mnt-theme-toggle__moon { display: block; }
:root:not([data-theme="dark"]) .mnt-theme-toggle__sun  { display: none; }
:root[data-theme="dark"] .mnt-theme-toggle__moon { display: none; }
:root[data-theme="dark"] .mnt-theme-toggle__sun  { display: block; }

/* Without JS the button cannot do anything, so do not offer it. */
html:not(.js) .mnt-theme-toggle { display: none; }

/* ==========================================================================
   14. Rendered markdown (Documents from Git)
   ==========================================================================
   The changelogs and guides are GitHub markdown dropped into .markdown-body
   with github-markdown-css, a light-only stylesheet of literal greys. Its
   sheet loads before this one, so matching specificity is enough to win and
   put it on the tokens — which also makes it follow the dark theme.
   ========================================================================== */

.markdown-body {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: var(--wp--preset--color--text);
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
	margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--40);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text);
	border: 0;
	padding: 0;
}

.markdown-body h1 { font-size: 2rem; }
.markdown-body h2 { font-size: 1.5rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--wp--preset--color--line); }
.markdown-body h3 { font-size: var(--wp--preset--font-size--heading-3); }
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 { font-size: var(--wp--preset--font-size--body); }

.markdown-body .markdown-heading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--40);
}

.markdown-body .markdown-heading > :where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	min-width: 0;
}

.markdown-body .markdown-heading:has(> h2) {
	padding-bottom: 0.375rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.markdown-body .markdown-heading:has(> h2) > h2 {
	padding-bottom: 0;
	border-bottom: 0;
}

.markdown-body .anchor {
	display: none;
}

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body pre,
.markdown-body table,
.markdown-body details,
.markdown-body blockquote,
.markdown-body .highlight {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--40);
}

.markdown-body a { color: var(--wp--preset--color--primary); text-decoration: none; }
.markdown-body a:hover { color: var(--wp--preset--color--text); text-decoration: underline; }
.markdown-body strong, .markdown-body b { font-weight: 600; color: var(--wp--preset--color--text); }
.markdown-body ul, .markdown-body ol { padding-left: 1.5rem; }
.markdown-body li + li { margin-top: 0.25rem; }
.markdown-body li::marker { color: var(--wp--preset--color--text-faint); }

.markdown-body blockquote {
	padding: 0 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--text-muted);
	border-left: 2px solid var(--wp--preset--color--line-strong);
}

.markdown-body hr {
	height: 1px;
	margin: var(--wp--preset--spacing--60) 0;
	border: 0;
	background: var(--wp--preset--color--line);
}

.markdown-body table { display: table; width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); }
.markdown-body table th,
.markdown-body table td { padding: 0.5rem 0.75rem; border: 1px solid var(--wp--preset--color--line); }
.markdown-body table th { font-weight: 600; background: var(--wp--preset--color--surface-raised); color: var(--wp--preset--color--text); }
.markdown-body table tr { background: var(--wp--preset--color--surface); border-top: 0; }
.markdown-body table tr:nth-child(2n) { background: var(--wp--preset--color--base-sunken); }

.markdown-body img { background: transparent; border-radius: var(--wp--custom--radius--md); }

.markdown-body code,
.markdown-body tt {
	padding: 0.15em 0.4em;
	border-radius: 6px;
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
}

/* Code blocks keep a dark chrome in both themes: machine output on a terminal. */
.markdown-body pre,
.markdown-body .highlight pre {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 1px solid #23252E;
	border-radius: var(--wp--custom--radius--md);
	background: #121318;
	color: #E4E5F0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	overflow: auto;
}

.markdown-body pre code {
	padding: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
}

.markdown-body .markdown-alert {
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0;
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text-muted);
}

.markdown-body .markdown-alert-title { color: var(--wp--preset--color--text); font-weight: 600; }

/* ==========================================================================
   15. Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
	a.mnt-card:hover { transform: none; }
}