/** * Nexus — design tokens and site shell. * * The prototype was Tailwind; a sold classic PHP theme cannot ship a utility * engine and a build step, so the visual language is restated here as tokens. * Every value below is the prototype's own: the #07090e ground, the slate * neutral ramp, the six industry accents, the 145deg glass card, the 40px grid * texture and the blue radial glow. * * The one structural decision: the accent is a variable, not a literal. The * industry skin rewrites --nx-accent on and the whole document re-tints * in step with the GPU field behind it. Nothing downstream hard-codes blue. * * The accent RGB triplet is comma-separated on purpose. A space-separated * triplet inside legacy rgba() is silently dropped by browsers — the colour * does not fall back to anything, it simply never paints. */ /* ========================================================================== 1. Tokens ========================================================================== */ :root { /* Ground and neutral ramp (slate). */ --nx-ground: #07090e; --nx-ground-soft: #0a0d14; --nx-slate-950: #020617; --nx-slate-900: #0f172a; --nx-slate-850: #141d33; --nx-slate-800: #1e293b; --nx-slate-700: #334155; --nx-slate-600: #475569; --nx-slate-500: #64748b; --nx-slate-400: #94a3b8; --nx-slate-300: #cbd5e1; --nx-slate-200: #e2e8f0; --nx-slate-100: #f1f5f9; --nx-white: #ffffff; /* Text roles. */ --nx-text: var(--nx-slate-100); --nx-text-strong: var(--nx-white); --nx-text-muted: var(--nx-slate-400); --nx-text-faint: var(--nx-slate-500); /* Accent — rewritten per industry skin. Default is the AI_SAAS blue. */ --nx-accent: #3b82f6; --nx-accent-rgb: 59, 130, 246; --nx-accent-soft: #93c5fd; --nx-accent-deep: #1d4ed8; /* Semantic status, held separate from the accent so a green skin does not make every success state disappear into the brand colour. */ --nx-ok: #34d399; --nx-warn: #fbbf24; --nx-danger: #f87171; /* Lines. */ --nx-line: rgba( 255, 255, 255, 0.08 ); --nx-line-strong: rgba( 255, 255, 255, 0.14 ); --nx-line-faint: rgba( 255, 255, 255, 0.04 ); /* Type — one base, one ratio (16 x 1.25), reused everywhere. */ --nx-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif; --nx-font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --nx-t-xs: 0.8125rem; /* 13px — labels, eyebrows, meta */ --nx-t-sm: 0.875rem; /* 14px — dense UI text */ --nx-t-base: 1rem; /* 16px — body */ --nx-t-md: 1.25rem; /* 20px */ --nx-t-lg: 1.5625rem; /* 25px */ --nx-t-xl: 1.9375rem; /* 31px */ --nx-t-2xl: 2.4375rem; /* 39px */ --nx-t-3xl: 3.0625rem; /* 49px */ --nx-t-4xl: 3.8125rem; /* 61px */ --nx-lh-tight: 1.15; --nx-lh-snug: 1.35; --nx-lh-body: 1.65; /* Space — 4px base, used for every gap, margin and pad. */ --nx-s-1: 0.25rem; --nx-s-2: 0.5rem; --nx-s-3: 0.75rem; --nx-s-4: 1rem; --nx-s-5: 1.25rem; --nx-s-6: 1.5rem; --nx-s-8: 2rem; --nx-s-10: 2.5rem; --nx-s-12: 3rem; --nx-s-16: 4rem; --nx-s-20: 5rem; --nx-s-24: 6rem; --nx-s-32: 8rem; /* Radii — the prototype's rounded-xl / 2xl / 3xl. */ --nx-r-sm: 0.5rem; --nx-r-md: 0.75rem; --nx-r-lg: 1rem; --nx-r-xl: 1.5rem; --nx-r-pill: 9999px; /* Shell. */ --nx-shell: 80rem; --nx-shell-text: 46rem; --nx-gutter: var(--nx-s-6); --nx-header-h: 5rem; /* Motion — one easing family, one duration budget. */ --nx-ease: cubic-bezier( 0.16, 1, 0.3, 1 ); --nx-ease-in: cubic-bezier( 0.4, 0, 1, 1 ); --nx-d-micro: 180ms; --nx-d-ui: 350ms; --nx-d-reveal: 620ms; --nx-shadow-card: 0 20px 40px -15px rgba( 0, 0, 0, 0.7 ), 0 0 1px 1px rgba( 255, 255, 255, 0.05 ); --nx-shadow-lift: 0 25px 50px -10px rgba( 0, 0, 0, 0.85 ), 0 0 25px -5px rgba( var(--nx-accent-rgb), 0.2 ); --nx-shadow-panel: 0 40px 80px -20px rgba( 0, 0, 0, 0.9 ); } /* The six industry skins. Each rewrites the accent only; the ground, the neutrals and the type never move — switching vertical re-tints the site rather than redesigning it. */ body.nx-skin-ai_saas { --nx-accent: #3b82f6; --nx-accent-rgb: 59, 130, 246; --nx-accent-soft: #93c5fd; --nx-accent-deep: #1d4ed8; } body.nx-skin-fintech { --nx-accent: #10b981; --nx-accent-rgb: 16, 185, 129; --nx-accent-soft: #6ee7b7; --nx-accent-deep: #047857; } body.nx-skin-ecommerce { --nx-accent: #f59e0b; --nx-accent-rgb: 245, 158, 11; --nx-accent-soft: #fcd34d; --nx-accent-deep: #b45309; } body.nx-skin-healthcare { --nx-accent: #06b6d4; --nx-accent-rgb: 6, 182, 212; --nx-accent-soft: #67e8f9; --nx-accent-deep: #0e7490; } body.nx-skin-legal_audit { --nx-accent: #8b5cf6; --nx-accent-rgb: 139, 92, 246; --nx-accent-soft: #c4b5fd; --nx-accent-deep: #6d28d9; } body.nx-skin-dev_tools { --nx-accent: #ec4899; --nx-accent-rgb: 236, 72, 153; --nx-accent-soft: #f9a8d4; --nx-accent-deep: #be185d; } /* ========================================================================== 2. Reset and base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc( var(--nx-header-h) + var(--nx-s-6) ); } body { margin: 0; min-height: 100vh; overflow-x: hidden; background-color: var(--nx-ground); color: var(--nx-text); font-family: var(--nx-font-sans); font-size: var(--nx-t-base); line-height: var(--nx-lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--nx-accent); color: #fff; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: var(--nx-lh-tight); letter-spacing: -0.022em; color: var(--nx-text-strong); text-wrap: balance; } p { margin: 0; } p + p { margin-top: var(--nx-s-4); } a { color: var(--nx-accent-soft); text-decoration: none; transition: color var(--nx-d-micro) var(--nx-ease); } a:hover { color: var(--nx-white); } /* Icons must carry their own size. A bare svg under a global max-width rule inflates to fill whatever flex parent it lands in — that is how a 300px magnifying glass ends up in a footer. */ svg { max-width: 100%; } .nx-icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } img { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } code, pre, kbd, samp { font-family: var(--nx-font-mono); font-size: 0.9em; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 3px; border-radius: var(--nx-r-sm); } .nx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; border: 0; } .nx-skip { position: absolute; left: var(--nx-s-4); top: -6rem; z-index: 100; padding: var(--nx-s-3) var(--nx-s-5); background: var(--nx-accent); color: #fff; font-weight: 700; border-radius: var(--nx-r-md); transition: top var(--nx-d-ui) var(--nx-ease); } .nx-skip:focus { top: var(--nx-s-4); color: #fff; } /* An element hidden by the hidden attribute must stay hidden. Author CSS that sets display on the same element otherwise overrides it silently, and a full-screen overlay sits on top of the page with nothing to show for it. */ [hidden] { display: none !important; } /* ========================================================================== 3. Layout primitives ========================================================================== */ .nx-shell { width: 100%; max-width: var(--nx-shell); margin-inline: auto; padding-inline: var(--nx-gutter); } .nx-section { padding-block: var(--nx-s-24); position: relative; } .nx-section--tight { padding-block: var(--nx-s-16); } @media ( max-width: 720px ) { .nx-section { padding-block: var(--nx-s-16); } .nx-section--tight { padding-block: var(--nx-s-12); } } .nx-stack { display: flex; flex-direction: column; gap: var(--nx-s-4); } .nx-stack-2 { display: flex; flex-direction: column; gap: var(--nx-s-2); } .nx-stack-6 { display: flex; flex-direction: column; gap: var(--nx-s-6); } .nx-stack-8 { display: flex; flex-direction: column; gap: var(--nx-s-8); } .nx-stack-12 { display: flex; flex-direction: column; gap: var(--nx-s-12); } .nx-row { display: flex; align-items: center; gap: var(--nx-s-3); flex-wrap: wrap; } .nx-between { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s-6); flex-wrap: wrap; } .nx-grid { display: grid; gap: var(--nx-s-6); } .nx-grid-2 { grid-template-columns: repeat( auto-fit, minmax( 20rem, 1fr ) ); } .nx-grid-3 { grid-template-columns: repeat( auto-fit, minmax( 17rem, 1fr ) ); } .nx-grid-4 { grid-template-columns: repeat( auto-fit, minmax( 13rem, 1fr ) ); } .nx-measure { max-width: var(--nx-shell-text); } /* * Flex and grid items default to min-width:auto, which means they refuse to * shrink below their content. One

 of wide code therefore widens its
 * track, then its parent, then the page — the overflow-x:auto on the  * never gets a chance to scroll because the box it would scroll inside has
 * already been stretched. Every layout primitive's children opt out of that.
 */
.nx-stack > *,
.nx-stack-2 > *,
.nx-stack-6 > *,
.nx-stack-8 > *,
.nx-stack-12 > *,
.nx-grid > *,
.nx-row > *,
.nx-between > * {
	min-width: 0;
}

/* ==========================================================================
   4. The persistent field
   ========================================================================== */

#nx-lattice {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
	pointer-events: none;
	/* Painted before the shader's first frame lands, so give it the ground
	   colour rather than letting it flash transparent. */
	background: var(--nx-ground);
}

/*
 * The grid texture and the page content both sit above the field. This wrapper
 * must establish its own stacking context — a fixed z-index:0 canvas punches
 * straight through a sibling with position:static, however opaque that
 * sibling's background is.
 */
.nx-page {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.nx-page::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient( to right, rgba( 255, 255, 255, 0.03 ) 1px, transparent 1px ),
		linear-gradient( to bottom, rgba( 255, 255, 255, 0.03 ) 1px, transparent 1px );
	background-size: 40px 40px;
}

.nx-main { flex: 1 1 auto; }

/* ==========================================================================
   5. Surfaces
   ========================================================================== */

.nx-card {
	background: linear-gradient(
		145deg,
		rgba( 255, 255, 255, 0.04 ) 0%,
		rgba( 15, 23, 42, 0.75 ) 40%,
		rgba( 8, 12, 22, 0.92 ) 100%
	);
	backdrop-filter: blur( 20px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 20px ) saturate( 180% );
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-r-xl);
	box-shadow: var(--nx-shadow-card);
	transition: border-color var(--nx-d-ui) var(--nx-ease),
		box-shadow var(--nx-d-ui) var(--nx-ease),
		transform var(--nx-d-ui) var(--nx-ease);
}

a.nx-card:hover,
.nx-card--lift:hover,
.nx-card:focus-within {
	border-color: rgba( var(--nx-accent-rgb), 0.4 );
	box-shadow: var(--nx-shadow-lift);
}

.nx-card--pad    { padding: var(--nx-s-8); }
.nx-card--pad-sm { padding: var(--nx-s-6); }

@media ( max-width: 720px ) {
	.nx-card--pad { padding: var(--nx-s-6); }
}

.nx-panel {
	background: rgba( 8, 12, 22, 0.72 );
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-r-lg);
	padding: var(--nx-s-5);
}

.nx-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient( circle at 50% 0%, rgba( var(--nx-accent-rgb), 0.15 ), transparent 70% );
}

/* ==========================================================================
   6. Type helpers
   ========================================================================== */

.nx-eyebrow {
	font-family: var(--nx-font-mono);
	font-size: var(--nx-t-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nx-accent);
}

.nx-display {
	font-size: clamp( var(--nx-t-2xl), 5.2vw, var(--nx-t-4xl) );
	font-weight: 800;
	letter-spacing: -0.03em;
}

.nx-h2 { font-size: clamp( var(--nx-t-xl), 3.6vw, var(--nx-t-3xl) ); font-weight: 800; letter-spacing: -0.028em; }
.nx-h3 { font-size: var(--nx-t-lg); font-weight: 700; }
.nx-h4 { font-size: var(--nx-t-md); font-weight: 700; }

.nx-lede {
	font-size: var(--nx-t-md);
	line-height: var(--nx-lh-snug);
	color: var(--nx-slate-300);
	font-weight: 400;
}

.nx-muted { color: var(--nx-text-muted); }
.nx-faint { color: var(--nx-text-faint); font-size: var(--nx-t-sm); }
.nx-mono  { font-family: var(--nx-font-mono); }
.nx-num   { font-variant-numeric: tabular-nums; }

/* Gradient headline. The solid colour is declared first so a browser without
   background-clip renders readable text rather than nothing at all. */
.nx-gradient-text {
	color: var(--nx-white);
	background: linear-gradient( 135deg, #ffffff 0%, var(--nx-accent-soft) 40%, var(--nx-accent) 70%, var(--nx-accent-soft) 100% );
	-webkit-background-clip: text;
	background-clip: text;
}
@supports ( -webkit-text-fill-color: transparent ) {
	.nx-gradient-text { -webkit-text-fill-color: transparent; }
}

/* ==========================================================================
   7. Controls
   ========================================================================== */

.nx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nx-s-2);
	padding: var(--nx-s-3) var(--nx-s-6);
	border-radius: var(--nx-r-md);
	border: 1px solid transparent;
	font-size: var(--nx-t-sm);
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background-color var(--nx-d-micro) var(--nx-ease),
		border-color var(--nx-d-micro) var(--nx-ease),
		color var(--nx-d-micro) var(--nx-ease),
		box-shadow var(--nx-d-micro) var(--nx-ease),
		transform var(--nx-d-micro) var(--nx-ease);
}
.nx-btn:active { transform: translateY( 1px ); }

.nx-btn--primary {
	background: var(--nx-accent);
	color: #fff;
	box-shadow: 0 10px 30px -12px rgba( var(--nx-accent-rgb), 0.9 );
}
.nx-btn--primary:hover {
	background: var(--nx-accent-soft);
	color: var(--nx-slate-950);
	box-shadow: 0 14px 36px -10px rgba( var(--nx-accent-rgb), 0.95 );
}

.nx-btn--ghost {
	background: rgba( 15, 23, 42, 0.7 );
	border-color: var(--nx-slate-700);
	color: var(--nx-slate-200);
}
.nx-btn--ghost:hover {
	border-color: var(--nx-accent);
	color: var(--nx-white);
	background: rgba( 15, 23, 42, 0.95 );
}

.nx-btn--quiet {
	background: transparent;
	border-color: var(--nx-line-strong);
	color: var(--nx-slate-300);
}
.nx-btn--quiet:hover { border-color: var(--nx-accent); color: var(--nx-white); }

.nx-btn--sm { padding: var(--nx-s-2) var(--nx-s-4); font-size: var(--nx-t-xs); }
.nx-btn--lg { padding: var(--nx-s-4) var(--nx-s-8); font-size: var(--nx-t-base); }

.nx-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--nx-s-2);
	padding: var(--nx-s-1) var(--nx-s-3);
	border-radius: var(--nx-r-pill);
	border: 1px solid var(--nx-line-strong);
	background: rgba( 15, 23, 42, 0.6 );
	font-family: var(--nx-font-mono);
	font-size: var(--nx-t-xs);
	font-weight: 500;
	color: var(--nx-slate-300);
	white-space: nowrap;
}
.nx-chip--accent {
	border-color: rgba( var(--nx-accent-rgb), 0.45 );
	background: rgba( var(--nx-accent-rgb), 0.12 );
	color: var(--nx-accent-soft);
}

/* Status carries meaning in form as well as colour, so a reader who cannot
   separate the hues still sees three distinct labels. */
.nx-status { display: inline-flex; align-items: center; gap: var(--nx-s-2); font-size: var(--nx-t-xs); font-weight: 600; }
.nx-status::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: var(--nx-r-pill); background: currentColor; }
.nx-status--ok     { color: var(--nx-ok); }
.nx-status--warn   { color: var(--nx-warn); }
.nx-status--danger { color: var(--nx-danger); }

/* ==========================================================================
   8. Forms
   ========================================================================== */

.nx-field { display: flex; flex-direction: column; gap: var(--nx-s-2); }

.nx-label {
	font-size: var(--nx-t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nx-slate-400);
}

.nx-input,
.nx-select,
.nx-textarea {
	width: 100%;
	padding: var(--nx-s-3) var(--nx-s-4);
	background: rgba( 2, 6, 23, 0.8 );
	border: 1px solid var(--nx-slate-700);
	border-radius: var(--nx-r-md);
	color: var(--nx-text);
	font: inherit;
	font-size: var(--nx-t-sm);
	transition: border-color var(--nx-d-micro) var(--nx-ease), box-shadow var(--nx-d-micro) var(--nx-ease);
}
.nx-input:focus,
.nx-select:focus,
.nx-textarea:focus {
	outline: none;
	border-color: var(--nx-accent);
	box-shadow: 0 0 0 3px rgba( var(--nx-accent-rgb), 0.22 );
}
.nx-textarea { min-height: 8rem; resize: vertical; line-height: var(--nx-lh-body); }
.nx-input::placeholder, .nx-textarea::placeholder { color: var(--nx-slate-600); }

.nx-range {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	height: 0.375rem;
	border-radius: var(--nx-r-pill);
	background: var(--nx-slate-800);
	cursor: pointer;
}
.nx-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 1.125rem; height: 1.125rem;
	border-radius: var(--nx-r-pill);
	background: var(--nx-accent);
	border: 2px solid var(--nx-slate-950);
	box-shadow: 0 0 0 4px rgba( var(--nx-accent-rgb), 0.2 );
}
.nx-range::-moz-range-thumb {
	width: 1.125rem; height: 1.125rem;
	border-radius: var(--nx-r-pill);
	background: var(--nx-accent);
	border: 2px solid var(--nx-slate-950);
}

.nx-note {
	font-size: var(--nx-t-xs);
	color: var(--nx-slate-500);
	line-height: var(--nx-lh-snug);
}

/* ==========================================================================
   9. Reveal
   ========================================================================== */

/*
 * Content is present and styled in the DOM at all times; the reveal only
 * removes an offset that JS itself added. With JS off, or under reduced
 * motion, nothing is hidden — a reveal that starts from opacity:0 in CSS is a
 * content blocker, not an animation.
 */
.nx-reveal { will-change: transform, opacity; }

body.nx-js .nx-reveal {
	opacity: 0;
	transform: translateY( 1.25rem );
	transition: opacity var(--nx-d-reveal) var(--nx-ease), transform var(--nx-d-reveal) var(--nx-ease);
	transition-delay: var( --nx-reveal-delay, 0ms );
}
body.nx-js .nx-reveal.is-in { opacity: 1; transform: none; }

@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
	body.nx-js .nx-reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   10. WordPress content
   ========================================================================== */

.nx-prose { color: var(--nx-slate-300); font-size: var(--nx-t-base); line-height: var(--nx-lh-body); }
.nx-prose > * + * { margin-top: var(--nx-s-5); }
.nx-prose h2 { font-size: var(--nx-t-xl); margin-top: var(--nx-s-12); }
.nx-prose h3 { font-size: var(--nx-t-lg); margin-top: var(--nx-s-10); }
.nx-prose h4 { font-size: var(--nx-t-md); margin-top: var(--nx-s-8); }
.nx-prose ul, .nx-prose ol { padding-left: var(--nx-s-6); display: flex; flex-direction: column; gap: var(--nx-s-2); }
.nx-prose li { list-style: disc; }
.nx-prose ol li { list-style: decimal; }
.nx-prose strong { color: var(--nx-text-strong); font-weight: 700; }
.nx-prose a { text-decoration: underline; text-underline-offset: 0.2em; }

.nx-prose blockquote {
	margin: 0;
	padding: var(--nx-s-5) var(--nx-s-6);
	border-left: 3px solid var(--nx-accent);
	background: rgba( 15, 23, 42, 0.6 );
	border-radius: 0 var(--nx-r-md) var(--nx-r-md) 0;
	color: var(--nx-slate-200);
	font-size: var(--nx-t-md);
	line-height: var(--nx-lh-snug);
}

.nx-prose pre {
	padding: var(--nx-s-5);
	background: rgba( 2, 6, 23, 0.92 );
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-r-md);
	overflow-x: auto;
	line-height: 1.6;
}
.nx-prose :not(pre) > code {
	padding: 0.15em 0.4em;
	background: rgba( var(--nx-accent-rgb), 0.12 );
	border-radius: var(--nx-r-sm);
	color: var(--nx-accent-soft);
}

.nx-prose img, .nx-prose figure { border-radius: var(--nx-r-lg); }
.nx-prose figcaption { margin-top: var(--nx-s-2); font-size: var(--nx-t-xs); color: var(--nx-slate-500); }

/* Wide content scrolls inside its own box; the page body never moves
   sideways. */
.nx-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.nx-table { width: 100%; border-collapse: collapse; font-size: var(--nx-t-sm); }
.nx-table th, .nx-table td { padding: var(--nx-s-3) var(--nx-s-4); text-align: left; border-bottom: 1px solid var(--nx-line); }
.nx-table th { font-size: var(--nx-t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--nx-slate-400); font-weight: 600; }
.nx-table td { color: var(--nx-slate-300); }
.nx-table td.nx-num, .nx-table th.nx-num { text-align: right; font-variant-numeric: tabular-nums; }

/* WordPress core alignment and caption classes. */
.alignleft { float: left; margin: 0 var(--nx-s-6) var(--nx-s-4) 0; }
.alignright { float: right; margin: 0 0 var(--nx-s-4) var(--nx-s-6); }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { margin-inline: auto; }
.wp-caption-text { font-size: var(--nx-t-xs); color: var(--nx-slate-500); }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect( 0, 0, 0, 0 ); white-space: nowrap;
}

/* ==========================================================================
   11. Scrollbar
   ========================================================================== */

* { scrollbar-width: thin; scrollbar-color: var(--nx-slate-800) var(--nx-ground); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--nx-ground); }
::-webkit-scrollbar-thumb { background: var(--nx-slate-800); border-radius: var(--nx-r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--nx-accent); }