/* =========================================================================
   VM Customizer v3 — accessibility console + FULL-SITE theme engine
   Console classes use the vma- prefix (site pages already use vmx-*).
   Part 1: console UI    Part 2: effect rules on html[data-vm-*]
   The JS recolor engine handles per-page hardcoded colors; the rules here
   provide instant pre-paint approximation + structural controls.
   ========================================================================= */

.vma-root {
	--vma-ink: #e8e6f0;
	--vma-ink-dim: #8f8ba3;
	--vma-a: var(--vm-purple, #8b5cf6);
	--vma-b: var(--vm-cyan, #4dd9ff);
	--vma-c: var(--vm-orange, #ff8a3d);
	--vma-line-c: rgba(139, 92, 246, 0.14);
	--vma-rule: rgba(143, 139, 163, 0.1);
	--vma-mono-f: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--vma-sans-f: "Space Grotesk", Inter, -apple-system, system-ui, sans-serif;
	font-family: var(--vma-sans-f);
}

.vma-sr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.vma-mono { font-family: var(--vma-mono-f); letter-spacing: 0.1em; }

/* ------------------------------------------------------------------------
   HIDDEN MEANS HIDDEN — critical.
   .vma-panel sets `display: flex`, which silently OVERRIDES the browser's
   default `[hidden] { display: none }`. Without this block the closed
   panel stays rendered at opacity 0 — an invisible click-eating layer over
   the bottom-right of every page (the source of the phantom MONO clicks).
   ------------------------------------------------------------------------ */
.vma-panel[hidden],
.vma-backdrop[hidden],
.vma-mask[hidden],
.vma-guide[hidden] {
	display: none !important;
}
/* And while fading out (open class removed, hidden not yet set), the panel
   and backdrop must never intercept input. */
.vma-panel:not(.vma-open),
.vma-backdrop:not(.vma-open) {
	pointer-events: none;
}

/* ------------------------------------------------------------------------
   CURSOR SANITY — the site's custom cursor ring/dot must render above the
   console, and the console always shows a native cursor regardless.
   ------------------------------------------------------------------------ */
.vm-cursor-ring { z-index: 2147483600 !important; }
.vm-cursor-dot  { z-index: 2147483601 !important; }

html .vma-root,
html .vma-root *,
html.vm-cursor-on .vma-root,
html.vm-cursor-on .vma-root * {
	cursor: auto !important;
}
html .vma-root :is(button, a, select, label, [role="button"], .vma-toggle, .vma-scheme, .vma-seg button),
html.vm-cursor-on .vma-root :is(button, a, select, label, [role="button"], .vma-toggle, .vma-scheme, .vma-seg button) {
	cursor: pointer !important;
}
html .vma-root input[type="range"],
html.vm-cursor-on .vma-root input[type="range"] {
	cursor: grab !important;
}

/* ---------------------------------------------------------------- trigger */
.vma-trigger {
	position: fixed !important;
	right: 22px;
	bottom: 22px;
	z-index: 100000;
	width: 54px; height: 54px;
	display: flex; align-items: center; justify-content: center;
	color: var(--vma-b);
	background: rgba(10, 10, 18, 0.85);
	border: 1px solid color-mix(in srgb, var(--vma-b) 40%, transparent);
	border-radius: 50%;
	cursor: pointer;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 0 22px color-mix(in srgb, var(--vma-b) 22%, transparent), 0 12px 30px rgba(0, 0, 0, 0.55);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.3s, color 0.3s;
}
.vma-trigger svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.vma-trigger:hover,
.vma-trigger:focus-visible {
	color: #ffffff;
	border-color: var(--vma-a);
	box-shadow: 0 0 30px color-mix(in srgb, var(--vma-a) 50%, transparent), 0 12px 30px rgba(0, 0, 0, 0.55);
	transform: translateY(-2px);
}
.vma-trigger:focus-visible { outline: 2px solid var(--vma-b); outline-offset: 3px; }
.vma-trigger-ring {
	position: absolute; inset: -1px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--vma-a) 50%, transparent);
	animation: vma-ring 3s ease-in-out infinite;
	pointer-events: none;
}
@keyframes vma-ring {
	0%, 100% { transform: scale(1); opacity: 0.9; }
	50%      { transform: scale(1.22); opacity: 0; }
}

/* --------------------------------------------------------------- backdrop */
.vma-backdrop {
	position: fixed !important;
	inset: 0;
	z-index: 100001;
	background: rgba(2, 2, 6, 0.5);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.35s ease;
}
.vma-backdrop.vma-open { opacity: 1; }

/* ------------------------------------------------------------------ panel */
.vma-panel {
	position: fixed !important;
	right: 22px;
	bottom: 90px;
	z-index: 100002;
	width: min(92vw, 390px);
	max-height: min(80vh, 760px);
	display: flex;
	flex-direction: column;
	color: var(--vma-ink);
	background:
		radial-gradient(140% 90% at 100% 0%, color-mix(in srgb, var(--vma-a) 12%, transparent), transparent 55%),
		linear-gradient(180deg, rgba(13, 13, 20, 0.96), rgba(8, 8, 14, 0.97));
	border: 1px solid var(--vma-line-c);
	border-radius: 18px;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--vma-b) 5%, transparent),
		0 30px 70px -20px rgba(0, 0, 0, 0.85),
		0 0 60px -20px color-mix(in srgb, var(--vma-a) 35%, transparent);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	opacity: 0;
	transform: translateY(14px) scale(0.97);
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	overflow: hidden;
}
.vma-panel.vma-open { opacity: 1; transform: translateY(0) scale(1); }

.vma-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.2rem 0.9rem;
	border-bottom: 1px solid var(--vma-rule);
	flex: none;
}
.vma-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: var(--vma-mono-f);
	font-size: 0.62rem;
	letter-spacing: 0.22em;
	color: var(--vma-b);
	margin-bottom: 0.35rem;
}
.vma-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--vma-c);
	box-shadow: 0 0 8px var(--vma-c);
	animation: vma-pulse 2.4s ease-in-out infinite;
}
@keyframes vma-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}
.vma-title {
	font-family: var(--vma-sans-f);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
	color: #ffffff;
}
.vma-close {
	width: 36px; height: 36px;
	flex: none;
	display: flex; align-items: center; justify-content: center;
	color: var(--vma-ink);
	background: transparent;
	border: 1px solid var(--vma-rule);
	border-radius: 10px;
	cursor: pointer;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s;
}
.vma-close svg { width: 17px; height: 17px; }
.vma-close:hover { transform: rotate(90deg); border-color: var(--vma-a); }
.vma-close:focus-visible { outline: 2px solid var(--vma-b); outline-offset: 2px; }

.vma-body {
	overflow-y: auto;
	padding: 0.5rem 1.2rem 1rem;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--vma-a) 40%, transparent) transparent;
}

.vma-section { padding: 0.9rem 0 0.35rem; border-bottom: 1px dashed var(--vma-rule); }
.vma-section:last-child { border-bottom: 0; }

.vma-label {
	font-family: var(--vma-mono-f);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	color: var(--vma-a);
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}

/* scheme chips — boxed live previews */
.vma-schemes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.55rem;
}
.vma-scheme {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.45rem;
	padding: 0.35rem 0.35rem 0.5rem;
	font-family: var(--vma-mono-f);
	font-size: 0.56rem;
	letter-spacing: 0.16em;
	text-align: center;
	color: var(--vma-ink-dim);
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--vma-rule);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.25s, background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.vma-scheme:hover {
	border-color: color-mix(in srgb, var(--vma-a) 40%, transparent);
	color: var(--vma-ink);
	transform: translateY(-1px);
}
.vma-scheme:focus-visible { outline: 2px solid var(--vma-b); outline-offset: 2px; }
.vma-scheme[aria-checked="true"] {
	border-color: var(--vma-a);
	background: color-mix(in srgb, var(--vma-a) 12%, transparent);
	color: #ffffff;
	box-shadow: 0 0 16px color-mix(in srgb, var(--vma-a) 25%, transparent);
}

/* mini mock UI in each chip (--p1/p2/p3 accents, --pbg page, --phd header) */
.vma-prev {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 5px 6px 6px;
	border-radius: 6px;
	background: var(--pbg, #0a0a0f);
	border: 1px solid rgba(255, 255, 255, 0.07);
	overflow: hidden;
	position: relative;
}
.vma-prev::after {
	content: "";
	position: absolute;
	right: -14px; top: -14px;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--p1);
	opacity: 0.28;
	filter: blur(12px);
	pointer-events: none;
}
.vma-prev-bar {
	height: 6px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--phd, #0a0e2a), color-mix(in srgb, var(--p1) 35%, var(--phd, #0a0e2a)));
	border-bottom: 1px solid color-mix(in srgb, var(--p1) 45%, transparent);
	flex: none;
}
.vma-prev-line {
	height: 3px;
	border-radius: 2px;
	width: 82%;
	background: color-mix(in srgb, var(--p1) 65%, #ffffff 10%);
	opacity: 0.85;
}
.vma-prev-line--dim { width: 62%; background: rgba(255, 255, 255, 0.22); opacity: 1; }
.vma-prev-line--dim2 { width: 70%; background: rgba(255, 255, 255, 0.14); opacity: 1; }
.vma-prev-foot { display: flex; align-items: center; gap: 4px; margin-top: auto; }
.vma-prev-btn {
	width: 22px; height: 7px;
	border-radius: 3px;
	background: linear-gradient(120deg, var(--p1), var(--p3));
	box-shadow: 0 0 8px color-mix(in srgb, var(--p1) 55%, transparent);
	flex: none;
}
.vma-prev-chip {
	width: 12px; height: 7px;
	border-radius: 3px;
	border: 1px solid var(--p2);
	background: color-mix(in srgb, var(--p2) 14%, transparent);
	flex: none;
}
.vma-prev-dot {
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--p2);
	box-shadow: 0 0 6px color-mix(in srgb, var(--p2) 70%, transparent);
	margin-left: auto;
	flex: none;
}

/* sliders */
.vma-sliderrow { display: flex; align-items: center; gap: 0.75rem; }
.vma-sliderrow--pad { padding: 0.6rem 0 0.4rem; }
.vma-slider-min, .vma-slider-max { font-size: 0.55rem; color: var(--vma-ink-dim); flex: none; }
.vma-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--vma-a) 55%, transparent),
		color-mix(in srgb, var(--vma-b) 55%, transparent));
	outline: none;
	cursor: pointer;
}
.vma-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid var(--vma-a);
	box-shadow: 0 0 10px color-mix(in srgb, var(--vma-a) 60%, transparent);
	cursor: grab;
}
.vma-range::-moz-range-thumb {
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid var(--vma-a);
	box-shadow: 0 0 10px color-mix(in srgb, var(--vma-a) 60%, transparent);
	cursor: grab;
}
.vma-range:focus-visible { outline: 2px solid var(--vma-b); outline-offset: 4px; }
.vma-range--sm { max-width: 150px; }

.vma-hint {
	font-size: 0.72rem;
	color: var(--vma-ink-dim);
	line-height: 1.5;
	margin: 0.6rem 0 0.3rem;
}

/* rows */
.vma-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	padding: 0.5rem 0;
	flex-wrap: wrap;
}
.vma-row-name { font-size: 0.84rem; font-weight: 500; color: var(--vma-ink); }

/* segmented control */
.vma-seg {
	display: inline-flex;
	border: 1px solid var(--vma-rule);
	border-radius: 9px;
	overflow: hidden;
}
.vma-seg button {
	font-family: var(--vma-mono-f);
	font-size: 0.6rem;
	letter-spacing: 0.06em;
	color: var(--vma-ink-dim);
	background: transparent;
	border: 0;
	padding: 0.5em 0.7em;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.vma-seg button + button { border-left: 1px solid var(--vma-rule); }
.vma-seg button:hover { color: #ffffff; }
.vma-seg button:focus-visible { outline: 2px solid var(--vma-b); outline-offset: -2px; }
.vma-seg button[aria-pressed="true"] {
	color: #ffffff;
	background: color-mix(in srgb, var(--vma-a) 30%, transparent);
}

/* toggle switch */
.vma-toggle {
	position: relative;
	width: 44px; height: 24px;
	flex: none;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--vma-rule);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.vma-toggle:focus-visible { outline: 2px solid var(--vma-b); outline-offset: 2px; }
.vma-knob {
	position: absolute;
	top: 2px; left: 2px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--vma-ink-dim);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s;
}
.vma-toggle[aria-checked="true"] {
	background: color-mix(in srgb, var(--vma-a) 35%, transparent);
	border-color: var(--vma-a);
	box-shadow: 0 0 14px color-mix(in srgb, var(--vma-a) 35%, transparent);
}
.vma-toggle[aria-checked="true"] .vma-knob {
	transform: translateX(20px);
	background: #ffffff;
}

/* footer */
.vma-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1.2rem;
	border-top: 1px solid var(--vma-rule);
	flex: none;
}
.vma-foot-note { font-size: 0.55rem; color: var(--vma-ink-dim); }
.vma-reset {
	font-family: var(--vma-mono-f);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	color: #fdba74;
	background: rgba(249, 115, 22, 0.08);
	border: 1px solid rgba(249, 115, 22, 0.35);
	border-radius: 8px;
	padding: 0.55em 1em;
	cursor: pointer;
	transition: all 0.25s;
}
.vma-reset:hover {
	color: #ffffff;
	background: rgba(249, 115, 22, 0.25);
	box-shadow: 0 0 16px rgba(249, 115, 22, 0.3);
}
.vma-reset:focus-visible { outline: 2px solid var(--vma-b); outline-offset: 2px; }

/* mask + guide overlays */
.vma-mask {
	position: fixed !important;
	left: 0; right: 0;
	z-index: 99998;
	background: rgba(2, 2, 6, 0.72);
	pointer-events: none;
	backdrop-filter: blur(1.5px);
	-webkit-backdrop-filter: blur(1.5px);
}
.vma-mask--top { top: 0; height: 0; }
.vma-mask--bottom { bottom: 0; height: 0; }
.vma-guide {
	position: fixed !important;
	left: 0; right: 0;
	top: 0;
	z-index: 99999;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--vma-b) 15%, var(--vma-a) 85%, transparent);
	box-shadow: 0 0 14px color-mix(in srgb, var(--vma-b) 60%, transparent);
	pointer-events: none;
}

@media (max-width: 480px) {
	.vma-panel { right: 4vw; left: 4vw; width: auto; bottom: 84px; }
	.vma-trigger { right: 16px; bottom: 16px; }
}

/* =========================================================================
   PART 2 — EFFECT RULES (html[data-vm-*])
   ========================================================================= */

/* ------------------------------------------------------- COLOR SCHEMES
   Static token remaps + header reskin = instant pre-paint approximation.
   The JS engine then recolors every remaining hardcoded color site-wide. */

html[data-vm-scheme="ember"] {
	--vm-purple: #f97316; --vm-cyan: #ef4444; --vm-orange: #fbbf24; --vm-amber: #fbbf24;
	--vm-purple-glow: rgba(249, 115, 22, 0.45); --vm-orange-glow: rgba(251, 191, 36, 0.35); --vm-amber-glow: rgba(251, 191, 36, 0.45);
	--vm-bg: #0f0a08; --vm-bg-elev: #171009; --vm-black: #080504;
	--vma-accent-1: #f97316; --vma-accent-2: #ef4444; --vma-accent-3: #fbbf24;
	--vma-hdr-1: rgba(42, 16, 8, 0.88); --vma-hdr-2: rgba(24, 9, 5, 0.75);
	--vma-nav-active: #fdba74;
}
html[data-vm-scheme="matrix"] {
	--vm-purple: #22c55e; --vm-cyan: #a3e635; --vm-orange: #86efac; --vm-amber: #a3e635;
	--vm-purple-glow: rgba(34, 197, 94, 0.45); --vm-orange-glow: rgba(134, 239, 172, 0.3); --vm-amber-glow: rgba(163, 230, 53, 0.4);
	--vm-bg: #080f09; --vm-bg-elev: #0c160e; --vm-black: #040805;
	--vma-accent-1: #22c55e; --vma-accent-2: #a3e635; --vma-accent-3: #86efac;
	--vma-hdr-1: rgba(8, 36, 16, 0.88); --vma-hdr-2: rgba(4, 20, 9, 0.75);
	--vma-nav-active: #86efac;
}
html[data-vm-scheme="ice"] {
	--vm-purple: #38bdf8; --vm-cyan: #818cf8; --vm-orange: #e0f2fe; --vm-amber: #7dd3fc;
	--vm-purple-glow: rgba(56, 189, 248, 0.45); --vm-orange-glow: rgba(224, 242, 254, 0.25); --vm-amber-glow: rgba(125, 211, 252, 0.4);
	--vm-bg: #080d14; --vm-bg-elev: #0c1420; --vm-black: #04070c;
	--vma-accent-1: #38bdf8; --vma-accent-2: #818cf8; --vma-accent-3: #e0f2fe;
	--vma-hdr-1: rgba(8, 22, 42, 0.88); --vma-hdr-2: rgba(4, 12, 24, 0.75);
	--vma-nav-active: #7dd3fc;
}
html[data-vm-scheme="phantom"] {
	--vm-purple: #ec4899; --vm-cyan: #a855f7; --vm-orange: #f0abfc; --vm-amber: #f9a8d4;
	--vm-purple-glow: rgba(236, 72, 153, 0.45); --vm-orange-glow: rgba(240, 171, 252, 0.3); --vm-amber-glow: rgba(249, 168, 212, 0.4);
	--vm-bg: #100812; --vm-bg-elev: #180c1a; --vm-black: #090409;
	--vma-accent-1: #ec4899; --vma-accent-2: #a855f7; --vma-accent-3: #f0abfc;
	--vma-hdr-1: rgba(40, 8, 34, 0.88); --vma-hdr-2: rgba(22, 4, 18, 0.75);
	--vma-nav-active: #f9a8d4;
}
html[data-vm-scheme="mono"] {
	--vm-purple: #d4d4d8; --vm-cyan: #a1a1aa; --vm-orange: #ffffff; --vm-amber: #e4e4e7;
	--vm-purple-glow: rgba(212, 212, 216, 0.3); --vm-orange-glow: rgba(255, 255, 255, 0.2); --vm-amber-glow: rgba(228, 228, 231, 0.3);
	--vm-bg: #0a0a0b; --vm-bg-elev: #121214; --vm-black: #050506;
	--vma-accent-1: #d4d4d8; --vma-accent-2: #a1a1aa; --vma-accent-3: #ffffff;
	--vma-hdr-1: rgba(24, 24, 27, 0.88); --vma-hdr-2: rgba(12, 12, 14, 0.78);
	--vma-nav-active: #ffffff;
}

/* Journal + search plugin scoped tokens */
html[data-vm-scheme] .vsj-wrap {
	--vsj-purple: var(--vma-accent-1);
	--vsj-orange: var(--vma-accent-3);
	--vsj-purple-soft: color-mix(in srgb, var(--vma-accent-1) 14%, transparent);
	--vsj-orange-soft: color-mix(in srgb, var(--vma-accent-3) 12%, transparent);
	--vsj-line: color-mix(in srgb, var(--vma-accent-1) 12%, transparent);
}
html[data-vm-scheme] .vms-wrap {
	--vms-purple: var(--vma-accent-1);
	--vms-cyan: var(--vma-accent-2);
	--vms-orange: var(--vma-accent-3);
	--vms-line: color-mix(in srgb, var(--vma-accent-1) 12%, transparent);
}
html[data-vm-scheme] .vma-root {
	--vma-a: var(--vma-accent-1);
	--vma-b: var(--vma-accent-2);
	--vma-c: var(--vma-accent-3);
	--vma-line-c: color-mix(in srgb, var(--vma-accent-1) 16%, transparent);
}

/* --- Header reskin (beats the foundation's hardcoded !important skin) --- */
html[data-vm-scheme] .vm-statusbar {
	background: linear-gradient(180deg, var(--vma-hdr-1), var(--vma-hdr-2)) !important;
	border-bottom: 1px solid color-mix(in srgb, var(--vma-accent-1) 22%, transparent) !important;
}
html[data-vm-scheme] .vm-statusbar .vm-mono--cyan { color: var(--vma-accent-2) !important; }
html[data-vm-scheme] .vm-header,
html[data-vm-scheme] .vm-header.is-scrolled {
	background: linear-gradient(180deg, var(--vma-hdr-1), var(--vma-hdr-2)) !important;
	border-bottom: 1px solid color-mix(in srgb, var(--vma-accent-1) 22%, transparent) !important;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 color-mix(in srgb, var(--vma-accent-1) 10%, transparent) !important;
}
html[data-vm-scheme] .vm-header::before {
	background:
		radial-gradient(ellipse 600px 200% at 8% 50%, color-mix(in srgb, var(--vma-accent-1) 18%, transparent), transparent 60%),
		radial-gradient(ellipse 500px 200% at 92% 50%, color-mix(in srgb, var(--vma-accent-2) 12%, transparent), transparent 60%) !important;
}
html[data-vm-scheme] .vm-mesh {
	background-image:
		linear-gradient(color-mix(in srgb, var(--vma-accent-1) 9%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--vma-accent-1) 9%, transparent) 1px, transparent 1px) !important;
}
html[data-vm-scheme] .vm-frame,
html[data-vm-scheme] .vm-foot-frame {
	border-color: var(--vma-accent-2) !important;
	box-shadow: 0 0 8px color-mix(in srgb, var(--vma-accent-2) 40%, transparent) !important;
}
html[data-vm-scheme] .vm-nav__link:hover .vm-nav__bracket { color: var(--vma-accent-2) !important; }
html[data-vm-scheme] .vm-nav__link.is-active,
html[data-vm-scheme] .vm-nav__link.is-active .vm-nav__bracket { color: var(--vma-nav-active) !important; }
html[data-vm-scheme] .vm-nav__link::after {
	background: linear-gradient(90deg, var(--vma-accent-1), var(--vma-accent-2)) !important;
}
html[data-vm-scheme] .vm-cta {
	border-color: var(--vma-accent-2) !important;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--vma-accent-2) 10%, transparent),
		0 0 18px color-mix(in srgb, var(--vma-accent-2) 15%, transparent) !important;
}
html[data-vm-scheme] .vm-cta .vm-cta__bracket { color: var(--vma-accent-2) !important; }
html[data-vm-scheme] .vm-cta::before {
	background: linear-gradient(135deg, var(--vma-accent-1), var(--vma-accent-2)) !important;
}
html[data-vm-scheme] .vm-cta:hover {
	border-color: var(--vma-accent-1) !important;
	box-shadow:
		0 0 32px color-mix(in srgb, var(--vma-accent-1) 50%, transparent),
		0 0 56px color-mix(in srgb, var(--vma-accent-2) 30%, transparent) !important;
}
html[data-vm-scheme] .vm-hamburger,
html[data-vm-scheme] .vm-search-overlay__close {
	border-color: var(--vma-accent-1) !important;
	background: color-mix(in srgb, var(--vma-accent-1) 13%, transparent) !important;
	box-shadow: 0 0 24px color-mix(in srgb, var(--vma-accent-1) 35%, transparent) !important;
}
html[data-vm-scheme] #vmSearchToggle {
	color: var(--vma-accent-2) !important;
	border-color: color-mix(in srgb, var(--vma-accent-2) 55%, transparent) !important;
	background: color-mix(in srgb, var(--vma-accent-2) 10%, transparent) !important;
	box-shadow:
		0 0 16px color-mix(in srgb, var(--vma-accent-2) 25%, transparent),
		inset 0 0 12px color-mix(in srgb, var(--vma-accent-2) 6%, transparent) !important;
}
html[data-vm-scheme] #vmSearchToggle svg { stroke: var(--vma-accent-2) !important; }
html[data-vm-scheme] .vm-header__logo-img {
	filter:
		drop-shadow(0 0 18px color-mix(in srgb, var(--vma-accent-1) 35%, transparent))
		drop-shadow(0 0 32px color-mix(in srgb, var(--vma-accent-2) 18%, transparent)) !important;
}
html[data-vm-scheme] .vm-drawer__link:hover,
html[data-vm-scheme] .vm-drawer__link--cta { color: var(--vma-accent-1) !important; }
html[data-vm-scheme] .vm-drawer__num { color: var(--vma-accent-2) !important; }
html[data-vm-scheme] .vm-scroll-progress {
	background: linear-gradient(90deg, var(--vma-accent-1), var(--vma-accent-2), var(--vma-accent-3)) !important;
}

/* --------------------------------------------------------- GLASS DENSITY
   Covers every known glass surface: header, dropdowns, all page modals /
   consoles / CTA panels / filters, footer widgets, plugin surfaces.      */
html[data-vm-glass] :is(
	.vm-header, .vm-statusbar, .vm-arc-card, .vm-search-overlay, .vm-panel,
	[class*="-modal"], [class*="-console"], [class*="cta-panel"], [class*="-filter"],
	.vm-foot-status, .vm-foot-nl-form, .vm-foot-totop,
	.vsj-composer, .vms-form, .vma-panel
) {
	backdrop-filter: blur(var(--vma-glass-blur, 16px)) !important;
	-webkit-backdrop-filter: blur(var(--vma-glass-blur, 16px)) !important;
}
html[data-vm-glass="solid"] .vm-header,
html[data-vm-glass="solid"] .vm-header.is-scrolled {
	background: linear-gradient(180deg, var(--vma-hdr-1, #0a0e2a), var(--vma-hdr-2, #060818)) !important;
}
html[data-vm-glass="solid"] .vm-statusbar { background: var(--vma-hdr-2, #060818) !important; }
html[data-vm-glass="solid"] :is(
	.vm-arc-card, [class*="-modal"], [class*="-console"], [class*="cta-panel"],
	.vm-panel, .vsj-composer, .vms-form, .vma-panel, .vm-foot-nl-form, .vm-foot-status
) {
	background-color: #0a0a12 !important;
}

/* --------------------------------------------------------- CORNER RADIUS
   Small = buttons/chips/pills/tags · Large = cards/panels/modals.        */
html[data-vm-radius="sharp"] { --vm-r-sm: 0px; --vm-r-md: 0px; --vm-r-lg: 2px; }
html[data-vm-radius="soft"]  { --vm-r-sm: 8px; --vm-r-md: 12px; --vm-r-lg: 16px; }
html[data-vm-radius="pill"]  { --vm-r-sm: 12px; --vm-r-md: 16px; --vm-r-lg: 24px; }

html[data-vm-radius="sharp"] :is(
	.vm-btn, .vm-cta, .vm-icon-btn, .vmx-btn, .vmx-cta,
	.vm-about-btn, .vm-cs-btn, .vm-da-btn, .vm-dm-btn, .vm-exp-btn, .vm-pr-btn, .vm-se-btn, .vm-web-btn,
	.vm-foot-nl-btn, .vm-foot-totop, .vm-foot-nl-form, .vm-foot-tag,
	[class*="-chip"], [class*="-pill"], .vm-pill, .vm-tag,
	.vsj-btn, .vms-form-btn, .vms-chip
) { border-radius: 0 !important; }
html[data-vm-radius="sharp"] :is(
	.vm-panel, .vm-card, .vmx-card, [class*="-card"], [class*="-modal"],
	[class*="cta-panel"], [class*="-console"], .vm-foot-status,
	.vsj-entry, .vsj-composer, .vsj-locked, .vms-result, .vms-form, .vms-empty, .vma-panel
) { border-radius: 4px !important; }

html[data-vm-radius="soft"] :is(
	.vm-btn, .vm-cta, .vm-icon-btn, .vmx-btn, .vmx-cta,
	.vm-about-btn, .vm-cs-btn, .vm-da-btn, .vm-dm-btn, .vm-exp-btn, .vm-pr-btn, .vm-se-btn, .vm-web-btn,
	.vm-foot-nl-btn, .vm-foot-totop, .vm-foot-nl-form,
	.vsj-btn, .vms-form-btn
) { border-radius: 12px !important; }
html[data-vm-radius="soft"] :is([class*="-chip"], [class*="-pill"], .vm-pill, .vm-tag, .vm-foot-tag, .vms-chip) { border-radius: 8px !important; }
html[data-vm-radius="soft"] :is(
	.vm-panel, .vm-card, .vmx-card, [class*="-card"], [class*="-modal"],
	[class*="cta-panel"], [class*="-console"], .vm-foot-status,
	.vsj-entry, .vsj-composer, .vsj-locked, .vms-result, .vms-form, .vms-empty, .vma-panel
) { border-radius: 20px !important; }

html[data-vm-radius="pill"] :is(
	.vm-btn, .vm-cta, .vm-icon-btn, .vmx-btn, .vmx-cta,
	.vm-about-btn, .vm-cs-btn, .vm-da-btn, .vm-dm-btn, .vm-exp-btn, .vm-pr-btn, .vm-se-btn, .vm-web-btn,
	.vm-foot-nl-btn, .vm-foot-totop, .vm-foot-nl-form, .vm-foot-tag,
	[class*="-chip"], [class*="-pill"], .vm-pill, .vm-tag,
	.vsj-btn, .vms-form-btn, .vms-chip
) { border-radius: 999px !important; }
html[data-vm-radius="pill"] :is(
	.vm-panel, .vm-card, .vmx-card, [class*="-card"], [class*="-modal"],
	[class*="cta-panel"], [class*="-console"], .vm-foot-status,
	.vsj-entry, .vsj-composer, .vsj-locked, .vms-result, .vms-form, .vms-empty, .vma-panel
) { border-radius: 26px !important; }

/* ----------------------------------------------------------- BUTTON STYLE
   Applies to EVERY button family on the site: foundation, all 8 page
   button sets, the vmx- pages, footer, journal, search.                  */
html[data-vm-btn="ghost"] :is(
	.vm-btn, .vmx-btn, .vm-about-btn, .vm-cs-btn, .vm-da-btn, .vm-dm-btn,
	.vm-exp-btn, .vm-pr-btn, .vm-se-btn, .vm-web-btn, .vm-foot-nl-btn,
	.vsj-btn, .vms-form-btn
) {
	background: transparent !important;
	border: 1px solid var(--vm-border-strong, rgba(255, 255, 255, 0.16)) !important;
	color: var(--vm-text, #e8e8f0) !important;
	box-shadow: none !important;
}
html[data-vm-btn="ghost"] :is(
	.vm-btn, .vmx-btn, .vm-about-btn, .vm-cs-btn, .vm-da-btn, .vm-dm-btn,
	.vm-exp-btn, .vm-pr-btn, .vm-se-btn, .vm-web-btn, .vm-foot-nl-btn,
	.vsj-btn, .vms-form-btn
):hover {
	border-color: var(--vm-purple, #8b5cf6) !important;
	background: color-mix(in srgb, var(--vm-purple, #8b5cf6) 6%, transparent) !important;
}

html[data-vm-btn="neon"] :is(
	.vm-btn, .vmx-btn, .vm-about-btn, .vm-cs-btn, .vm-da-btn, .vm-dm-btn,
	.vm-exp-btn, .vm-pr-btn, .vm-se-btn, .vm-web-btn, .vm-foot-nl-btn,
	.vsj-btn, .vms-form-btn
) {
	border: 1px solid var(--vm-purple, #8b5cf6) !important;
	background: color-mix(in srgb, var(--vm-purple, #8b5cf6) 10%, transparent) !important;
	color: #ffffff !important;
	box-shadow:
		0 0 20px color-mix(in srgb, var(--vm-purple, #8b5cf6) 30%, transparent),
		inset 0 0 14px color-mix(in srgb, var(--vm-purple, #8b5cf6) 8%, transparent) !important;
}
html[data-vm-btn="neon"] :is(
	.vm-btn, .vmx-btn, .vm-about-btn, .vm-cs-btn, .vm-da-btn, .vm-dm-btn,
	.vm-exp-btn, .vm-pr-btn, .vm-se-btn, .vm-web-btn, .vm-foot-nl-btn,
	.vsj-btn, .vms-form-btn
):hover {
	box-shadow:
		0 0 34px color-mix(in srgb, var(--vm-purple, #8b5cf6) 55%, transparent),
		inset 0 0 18px color-mix(in srgb, var(--vm-purple, #8b5cf6) 14%, transparent) !important;
}

html[data-vm-btn="filled"] :is(
	.vm-btn, .vmx-btn, .vm-about-btn, .vm-cs-btn, .vm-da-btn, .vm-dm-btn,
	.vm-exp-btn, .vm-pr-btn, .vm-se-btn, .vm-web-btn, .vm-foot-nl-btn,
	.vsj-btn, .vms-form-btn
) {
	background: linear-gradient(135deg, var(--vm-purple, #8b5cf6), var(--vm-orange, #ff8a3d)) !important;
	border-color: transparent !important;
	color: #ffffff !important;
}
html[data-vm-btn="filled"] :is(
	.vm-btn, .vmx-btn, .vm-about-btn, .vm-cs-btn, .vm-da-btn, .vm-dm-btn,
	.vm-exp-btn, .vm-pr-btn, .vm-se-btn, .vm-web-btn, .vm-foot-nl-btn,
	.vsj-btn, .vms-form-btn
):hover {
	filter: brightness(1.12);
	box-shadow: 0 0 32px var(--vm-purple-glow, rgba(139, 92, 246, 0.45)) !important;
}

/* --------------------------------------------------------------- GLOW OFF */
html[data-vm-glow="off"] :is(
	.vm-btn, .vmx-btn, .vm-cta, .vmx-cta, .vm-about-btn, .vm-cs-btn, .vm-da-btn,
	.vm-dm-btn, .vm-exp-btn, .vm-pr-btn, .vm-se-btn, .vm-web-btn,
	.vm-foot-nl-btn, .vm-foot-totop, .vm-foot-nl-form,
	[class*="-card"], [class*="cta-panel"], [class*="-chip"], [class*="-pill"],
	.vm-frame, .vm-foot-frame, .vm-hamburger, .vm-search-overlay__close, #vmSearchToggle,
	.vsj-entry, .vsj-entry-margin, .vsj-kicker-dot, .vsj-composer,
	.vms-result, .vms-form, .vma-trigger, .vm-scroll-progress,
	.vm-pulse-dot, .vm-foot-status__dot, .vma-dot, .vmx-glow
),
html[data-vm-glow="off"] :is(
	.vm-btn, .vm-cta, [class*="-card"], .vsj-entry, .vms-result
):hover {
	box-shadow: none !important;
	text-shadow: none !important;
}
html[data-vm-glow="off"] .vm-header,
html[data-vm-glow="off"] .vm-header.is-scrolled { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; }
html[data-vm-glow="off"] .vm-header__logo-img,
html[data-vm-glow="off"] .vm-header__logo:hover .vm-header__logo-img,
html[data-vm-glow="off"] .vm-foot-logo img,
html[data-vm-glow="off"] .vm-foot-ascii__art { filter: none !important; }
html[data-vm-glow="off"] .vm-foot-built__heart { text-shadow: none !important; animation: none !important; }

/* --------------------------------------------------------------- GLOW MAX */
html[data-vm-glow="max"] :is(
	.vm-btn, .vmx-btn, .vm-about-btn, .vm-cs-btn, .vm-da-btn, .vm-dm-btn,
	.vm-exp-btn, .vm-pr-btn, .vm-se-btn, .vm-web-btn, .vm-foot-nl-btn, .vsj-btn, .vms-form-btn
):hover {
	box-shadow: 0 0 44px var(--vm-purple-glow, rgba(139, 92, 246, 0.45)), 0 0 80px color-mix(in srgb, var(--vm-purple, #8b5cf6) 25%, transparent) !important;
}
html[data-vm-glow="max"] .vm-cta {
	box-shadow: 0 0 30px color-mix(in srgb, var(--vm-cyan, #4dd9ff) 35%, transparent) !important;
}
html[data-vm-glow="max"] .vm-cta:hover {
	box-shadow: 0 0 50px color-mix(in srgb, var(--vm-purple, #8b5cf6) 60%, transparent), 0 0 90px color-mix(in srgb, var(--vm-cyan, #4dd9ff) 40%, transparent) !important;
}
html[data-vm-glow="max"] :is([class*="-card"], .vsj-entry, .vms-result):hover {
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--vm-purple, #8b5cf6) 25%, transparent),
		0 24px 70px -24px color-mix(in srgb, var(--vm-purple, #8b5cf6) 55%, transparent) !important;
}
html[data-vm-glow="max"] :is(.vm-frame, .vm-foot-frame) {
	box-shadow: 0 0 16px color-mix(in srgb, var(--vm-cyan, #4dd9ff) 70%, transparent) !important;
}
html[data-vm-glow="max"] :is(.vm-header__logo-img, .vm-foot-logo img) {
	filter:
		drop-shadow(0 0 26px color-mix(in srgb, var(--vm-purple, #8b5cf6) 55%, transparent))
		drop-shadow(0 0 48px color-mix(in srgb, var(--vm-cyan, #4dd9ff) 30%, transparent)) !important;
}

/* ---------------------------------------------------------------- TYPEFACE
   Remaps the foundation vars AND overrides the hardcoded 'Poppins'
   font-families baked into every page widget. Mono elements excluded.    */
html[data-vm-fontfam="grotesk"] {
	--vm-font-display: 'Space Grotesk', system-ui, sans-serif;
	--vm-font-body: 'Space Grotesk', system-ui, sans-serif;
}
html[data-vm-fontfam="inter"] {
	--vm-font-display: 'Inter', system-ui, sans-serif;
	--vm-font-body: 'Inter', system-ui, sans-serif;
}
html[data-vm-fontfam="system"] {
	--vm-font-display: system-ui, -apple-system, 'Segoe UI', sans-serif;
	--vm-font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html[data-vm-fontfam="grotesk"] :is(body, p, h1, h2, h3, h4, h5, h6, a, li, blockquote, button, input, textarea, select, label, strong, em, figcaption, dd, dt):not([class*="mono"]):not(code):not(pre):not(kbd) {
	font-family: 'Space Grotesk', system-ui, sans-serif !important;
}
html[data-vm-fontfam="inter"] :is(body, p, h1, h2, h3, h4, h5, h6, a, li, blockquote, button, input, textarea, select, label, strong, em, figcaption, dd, dt):not([class*="mono"]):not(code):not(pre):not(kbd) {
	font-family: 'Inter', system-ui, sans-serif !important;
}
html[data-vm-fontfam="system"] :is(body, p, h1, h2, h3, h4, h5, h6, a, li, blockquote, button, input, textarea, select, label, strong, em, figcaption, dd, dt):not([class*="mono"]):not(code):not(pre):not(kbd) {
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

/* ------------------------------------------------------------- FONT SCALE */
html[data-vm-font] { font-size: calc(100% * var(--vma-font-scale, 1)) !important; }

/* ------------------------------------------------------------ LINE HEIGHT */
html[data-vm-line] :is(p, li, blockquote, dd, figcaption, td, th) {
	line-height: var(--vma-line, 1.7) !important;
}

/* --------------------------------------------------------- LETTER SPACING */
html[data-vm-space] :is(p, li, a, span, blockquote, h1, h2, h3, h4, h5, h6, label, button) {
	letter-spacing: var(--vma-space, 0.02em) !important;
}

/* ------------------------------------------------------ DYSLEXIA-FRIENDLY */
html[data-vm-dys="on"] :is(p, li, a, span, blockquote, h1, h2, h3, h4, h5, h6, label, button, input, textarea, dd, dt, td, th, figcaption) {
	font-family: "Atkinson Hyperlegible", Verdana, sans-serif !important;
}
html[data-vm-dys="on"] :is(code, pre, kbd, samp),
html[data-vm-dys="on"] :is(code, pre, kbd, samp) * {
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
}

/* ---------------------------------------------------------- HIGH CONTRAST */
html[data-vm-contrast="on"] body { background: #000000 !important; }
html[data-vm-contrast="on"] :is(p, li, blockquote, dd, dt, figcaption, td, th, label, legend, h1, h2, h3, h4, h5, h6, span) {
	color: #ffffff !important;
	text-shadow: none !important;
}
html[data-vm-contrast="on"] a,
html[data-vm-contrast="on"] a span {
	color: #ffd60a !important;
	text-decoration: underline !important;
}
html[data-vm-contrast="on"] :is(.vm-gradient-text, .vm-grad, .vm-grad-mono, .vm-foot-ascii__art) {
	background: none !important;
	-webkit-text-fill-color: #ffffff !important;
	color: #ffffff !important;
}
html[data-vm-contrast="on"] mark,
html[data-vm-contrast="on"] .vms-mark {
	background: #ffd60a !important;
	color: #000000 !important;
	box-shadow: none !important;
}

/* -------------------------------------------------------- HIGHLIGHT LINKS */
html[data-vm-links="on"] a {
	text-decoration: underline !important;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--vma-accent-1, var(--vm-purple, #8b5cf6));
}
html[data-vm-links="on"] a:focus-visible {
	outline: 2px solid var(--vma-accent-2, var(--vm-cyan, #4dd9ff)) !important;
	outline-offset: 2px;
}

/* ------------------------------------------------------------ LARGE CURSOR */
html[data-vm-cursor="on"],
html[data-vm-cursor="on"] *,
html[data-vm-cursor="on"].vm-cursor-on,
html[data-vm-cursor="on"].vm-cursor-on * {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><polygon points="4,2 4,32 12,25 17,37 22,34 17,23 28,23" fill="white" stroke="black" stroke-width="2.5"/></svg>') 4 2, auto !important;
}
html[data-vm-cursor="on"] :is(a, button, [role="button"], input[type="submit"], label, select),
html[data-vm-cursor="on"] :is(a, button, [role="button"]) * {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><polygon points="4,2 4,32 12,25 17,37 22,34 17,23 28,23" fill="%238b5cf6" stroke="white" stroke-width="2.5"/></svg>') 4 2, pointer !important;
}
html[data-vm-cursor="on"] .vm-cursor-ring,
html[data-vm-cursor="on"] .vm-cursor-dot { display: none !important; }

/* ------------------------------------------------------------ REDUCE MOTION */
html[data-vm-motion="on"] *,
html[data-vm-motion="on"] *::before,
html[data-vm-motion="on"] *::after {
	animation-duration: 0.001s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001s !important;
	scroll-behavior: auto !important;
}
html[data-vm-motion="on"] .vm-cursor-ring,
html[data-vm-motion="on"] .vm-cursor-dot { display: none !important; }
html[data-vm-motion="on"] .vsj-entry { opacity: 1 !important; transform: none !important; }
html[data-vm-motion="on"] .vm-reveal { opacity: 1 !important; transform: none !important; }

/* --------------------------------------------------------------- FX LAYERS */
html[data-vm-nogrid="on"] :is(.vm-grid-bg, .vm-mesh, .vmx-grid, .vm-foot-grid) { display: none !important; }
html[data-vm-noorbs="on"] :is(.vm-glow, .vmx-glow, .vm-foot-glow) { display: none !important; }
html[data-vm-noscan="on"] :is(.vm-scanlines, .vm-foot-scan, .vm-web-scan, .vm-scanbeam, .vm-matrix) { display: none !important; }
html[data-vm-noscan="on"] .vsj-locked::after,
html[data-vm-noscan="on"] .vms-empty::after { display: none !important; }

/* Disable the site's custom JS cursor (ring + dot + cursor:none). */
html[data-vm-nocursorfx="on"] .vm-cursor-ring,
html[data-vm-nocursorfx="on"] .vm-cursor-dot { display: none !important; }
html[data-vm-nocursorfx="on"].vm-cursor-on,
html[data-vm-nocursorfx="on"].vm-cursor-on body,
html[data-vm-nocursorfx="on"].vm-cursor-on a,
html[data-vm-nocursorfx="on"].vm-cursor-on button,
html[data-vm-nocursorfx="on"].vm-cursor-on input,
html[data-vm-nocursorfx="on"].vm-cursor-on [role="button"] {
	cursor: auto !important;
}
html[data-vm-nocursorfx="on"].vm-cursor-on a,
html[data-vm-nocursorfx="on"].vm-cursor-on button,
html[data-vm-nocursorfx="on"].vm-cursor-on [role="button"] {
	cursor: pointer !important;
}