/**
 * NOVA ROSE — design tokens and shop shell.
 *
 * The prototype washed the whole page in #fff5f7 and put rose on every surface.
 * At that density pink stops being a brand and becomes a filter: cards, ground,
 * borders and text all sit within a few degrees of each other, nothing reads as
 * foreground, and the products — which are the only thing a shopper came for —
 * lose their edges.
 *
 * So the rose is concentrated instead. The ground is a warm near-white, product
 * surfaces are plain white, and the colour lives in four places that earn it:
 * the WebGL field behind everything, the action colour, the shadows, and the
 * neutral ramp's hue bias. One saturated pink, used where a decision happens.
 *
 * The second colour is deliberate too. A shop needs to say "in stock", "low",
 * "sold out" and "on sale" without those four states collapsing into one hue,
 * so stock state speaks in teal — the accent's complement — and only price
 * movement is allowed to be rose.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Ground and surfaces. */
	--nr-ground:       #fffafb;
	--nr-ground-deep:  #fdf2f5;
	--nr-surface:      #ffffff;
	--nr-surface-sunk: #fdf7f8;

	/*
	 * Neutrals with a rose bias — every step carries a little of the accent's
	 * hue, so greys next to the brand colour read as chosen rather than as
	 * whatever grey the browser had lying around.
	 */
	--nr-n-50:  #fdf7f8;
	--nr-n-100: #f7ecef;
	--nr-n-200: #ecdbe0;
	--nr-n-300: #d9c2c9;
	--nr-n-400: #b2969f;
	--nr-n-500: #8a6f78;
	--nr-n-600: #6b545c;
	--nr-n-700: #4e3b42;
	--nr-n-800: #33252b;
	--nr-n-900: #1f1a24;

	/* Text roles. */
	--nr-ink:       var(--nr-n-900);
	--nr-ink-soft:  var(--nr-n-700);
	--nr-ink-muted: var(--nr-n-600);
	--nr-ink-faint: var(--nr-n-500);

	/* The action colour. One pink, and it means "you can do something here". */
	--nr-rose:       #e11d48;
	--nr-rose-rgb:   225, 29, 72;
	--nr-rose-deep:  #9f1239;
	--nr-rose-soft:  #fb7185;
	--nr-rose-wash:  #fff1f4;

	/*
	 * Stock and fulfilment speak in teal so they never compete with price.
	 * Comma-separated triplet on purpose: a space-separated one inside legacy
	 * rgba() is silently dropped rather than falling back to anything.
	 */
	--nr-teal:      #0f766e;
	--nr-teal-rgb:  15, 118, 110;
	--nr-teal-wash: #eefbf7;
	--nr-amber:     #b45309;
	--nr-amber-wash:#fff7ed;

	/* Type. Bricolage carries the display voice, Manrope the reading, Space
	   Mono the specifications — SKUs, latencies, weights. */
	--nr-font-display: 'Bricolage Grotesque', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--nr-font-text:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
	--nr-font-mono:    'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* One base, one ratio (16 x 1.2). A tighter scale than an editorial theme
	   would use, because a catalogue page carries far more distinct labels. */
	--nr-t-xs:   0.6875rem;  /* 11px — micro labels, unit suffixes */
	--nr-t-sm:   0.8125rem;  /* 13px — meta, chips */
	--nr-t-base: 1rem;       /* 16px */
	--nr-t-md:   1.1875rem;  /* 19px */
	--nr-t-lg:   1.4375rem;  /* 23px */
	--nr-t-xl:   1.75rem;    /* 28px */
	--nr-t-2xl:  2.0625rem;  /* 33px */
	--nr-t-3xl:  2.5rem;     /* 40px */
	--nr-t-4xl:  3rem;       /* 48px */
	--nr-t-5xl:  3.75rem;    /* 60px */

	--nr-lh-tight: 1.1;
	--nr-lh-snug:  1.32;
	--nr-lh-body:  1.62;

	/* Space — 4px base. */
	--nr-s-1:  0.25rem;
	--nr-s-2:  0.5rem;
	--nr-s-3:  0.75rem;
	--nr-s-4:  1rem;
	--nr-s-5:  1.25rem;
	--nr-s-6:  1.5rem;
	--nr-s-8:  2rem;
	--nr-s-10: 2.5rem;
	--nr-s-12: 3rem;
	--nr-s-16: 4rem;
	--nr-s-20: 5rem;
	--nr-s-24: 6rem;

	/* Soft radii — this is a consumer shop, not an instrument panel. */
	--nr-r-sm:   0.5rem;
	--nr-r-md:   0.75rem;
	--nr-r-lg:   1.125rem;
	--nr-r-xl:   1.5rem;
	--nr-r-2xl:  2rem;
	--nr-r-pill: 9999px;

	/* Shell. */
	--nr-shell:      82rem;
	--nr-shell-text: 44rem;
	--nr-gutter:     var(--nr-s-6);
	--nr-header-h:   4.5rem;

	/* Motion. */
	--nr-ease:     cubic-bezier( 0.16, 1, 0.3, 1 );
	--nr-ease-in:  cubic-bezier( 0.4, 0, 1, 1 );
	--nr-d-micro:  170ms;
	--nr-d-ui:     320ms;
	--nr-d-reveal: 600ms;

	/*
	 * Shadows are tinted with the accent rather than with black. A neutral
	 * drop shadow on a warm ground reads as dirt; a rose-tinted one reads as
	 * the room's own light.
	 */
	--nr-shadow-sm:   0 1px 2px rgba( 159, 18, 57, 0.05 ), 0 1px 3px rgba( 159, 18, 57, 0.04 );
	--nr-shadow-card: 0 12px 28px -14px rgba( 159, 18, 57, 0.18 ), 0 2px 6px rgba( 159, 18, 57, 0.05 );
	--nr-shadow-lift: 0 22px 44px -18px rgba( 159, 18, 57, 0.26 ), 0 4px 10px rgba( 159, 18, 57, 0.07 );
	--nr-shadow-pop:  0 32px 64px -20px rgba( 159, 18, 57, 0.3 );
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc( var(--nr-header-h) + var(--nr-s-6) );
}

body {
	margin: 0;
	min-height: 100vh;
	overflow-x: hidden;
	background-color: var(--nr-ground);
	color: var(--nr-ink);
	font-family: var(--nr-font-text);
	font-size: var(--nr-t-base);
	line-height: var(--nr-lh-body);
	font-weight: 450;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--nr-rose); color: #fff; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--nr-font-display);
	font-weight: 700;
	line-height: var(--nr-lh-tight);
	letter-spacing: -0.02em;
	color: var(--nr-ink);
	text-wrap: balance;
}

p { margin: 0; }
p + p { margin-top: var(--nr-s-4); }

a {
	color: var(--nr-rose-deep);
	text-decoration: none;
	transition: color var(--nr-d-micro) var(--nr-ease);
}
a:hover { color: var(--nr-rose); }

/* Icons carry their own size. A bare svg under a global max-width rule
   inflates to fill whatever flex parent it lands in. */
svg { max-width: 100%; }
.nr-icon {
	width: 1em;
	height: 1em;
	flex: none;
	display: inline-block;
	vertical-align: -0.125em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	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(--nr-font-mono); font-size: 0.88em; }

button { font: inherit; color: inherit; }

:focus-visible {
	outline: 2px solid var(--nr-rose);
	outline-offset: 3px;
	border-radius: var(--nr-r-sm);
}

.nr-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;
}

.nr-skip {
	position: absolute;
	left: var(--nr-s-4);
	top: -6rem;
	z-index: 100;
	padding: var(--nr-s-3) var(--nr-s-5);
	background: var(--nr-rose);
	color: #fff;
	font-weight: 700;
	border-radius: var(--nr-r-md);
	transition: top var(--nr-d-ui) var(--nr-ease);
}
.nr-skip:focus { top: var(--nr-s-4); color: #fff; }

/* An element hidden by the hidden attribute stays hidden. Author CSS that
   sets display on the same element otherwise overrides it silently, and a
   full-screen drawer sits on top of the shop with nothing to show for it. */
[hidden] { display: none !important; }

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.nr-shell {
	width: 100%;
	max-width: var(--nr-shell);
	margin-inline: auto;
	padding-inline: var(--nr-gutter);
}

.nr-section { padding-block: var(--nr-s-20); position: relative; }
.nr-section--tight { padding-block: var(--nr-s-12); }

@media ( max-width: 720px ) {
	.nr-section { padding-block: var(--nr-s-12); }
	.nr-section--tight { padding-block: var(--nr-s-10); }
}

.nr-stack    { display: flex; flex-direction: column; gap: var(--nr-s-4); }
.nr-stack-2  { display: flex; flex-direction: column; gap: var(--nr-s-2); }
.nr-stack-3  { display: flex; flex-direction: column; gap: var(--nr-s-3); }
.nr-stack-6  { display: flex; flex-direction: column; gap: var(--nr-s-6); }
.nr-stack-8  { display: flex; flex-direction: column; gap: var(--nr-s-8); }
.nr-stack-12 { display: flex; flex-direction: column; gap: var(--nr-s-12); }

.nr-row     { display: flex; align-items: center; gap: var(--nr-s-3); flex-wrap: wrap; }
.nr-between { display: flex; align-items: center; justify-content: space-between; gap: var(--nr-s-6); flex-wrap: wrap; }

.nr-grid   { display: grid; gap: var(--nr-s-6); }
.nr-grid-2 { grid-template-columns: repeat( auto-fit, minmax( 20rem, 1fr ) ); }
.nr-grid-3 { grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) ); }
.nr-grid-4 { grid-template-columns: repeat( auto-fit, minmax( 13rem, 1fr ) ); }

.nr-measure { max-width: var(--nr-shell-text); }

/*
 * Flex and grid items default to min-width:auto, so one long SKU string or a
 * wide table widens its track, then its parent, then the page — and the
 * overflow-x:auto that was supposed to contain it never gets the chance,
 * because the box it would scroll inside has already been stretched.
 */
.nr-stack > *, .nr-stack-2 > *, .nr-stack-3 > *, .nr-stack-6 > *,
.nr-stack-8 > *, .nr-stack-12 > *, .nr-grid > *, .nr-row > *, .nr-between > * {
	min-width: 0;
}

.nr-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

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

#nr-field {
	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(--nr-ground);
}

/*
 * The page 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.
 */
.nr-page {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

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

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

/*
 * Plain white cards, not frosted glass. On a light ground a blurred
 * translucent panel turns muddy and eats the contrast a product photograph
 * needs; the separation here comes from a tinted shadow and a hairline.
 */
.nr-card {
	background: var(--nr-surface);
	border: 1px solid var(--nr-n-200);
	border-radius: var(--nr-r-xl);
	box-shadow: var(--nr-shadow-card);
	transition: border-color var(--nr-d-ui) var(--nr-ease),
		box-shadow var(--nr-d-ui) var(--nr-ease),
		transform var(--nr-d-ui) var(--nr-ease);
}

a.nr-card:hover,
.nr-card--lift:hover,
.nr-card:focus-within {
	border-color: var(--nr-rose-soft);
	box-shadow: var(--nr-shadow-lift);
	transform: translateY( -2px );
}

.nr-card--pad    { padding: var(--nr-s-6); }
.nr-card--pad-lg { padding: var(--nr-s-8); }

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

.nr-panel {
	background: var(--nr-surface-sunk);
	border: 1px solid var(--nr-n-200);
	border-radius: var(--nr-r-lg);
	padding: var(--nr-s-5);
}

.nr-wash { background: var(--nr-rose-wash); }

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

.nr-eyebrow {
	font-family: var(--nr-font-mono);
	font-size: var(--nr-t-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nr-rose-deep);
}

.nr-display {
	font-size: clamp( var(--nr-t-3xl), 5.6vw, var(--nr-t-5xl) );
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.02;
}

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

.nr-lede {
	font-size: var(--nr-t-md);
	line-height: var(--nr-lh-snug);
	color: var(--nr-ink-soft);
	font-weight: 450;
}

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

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

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

.nr-btn--primary {
	background: var(--nr-rose);
	color: #fff;
	box-shadow: 0 8px 20px -10px rgba( var(--nr-rose-rgb), 0.85 );
}
.nr-btn--primary:hover {
	background: var(--nr-rose-deep);
	color: #fff;
	box-shadow: 0 12px 26px -10px rgba( var(--nr-rose-rgb), 0.9 );
}

.nr-btn--ghost {
	background: var(--nr-surface);
	border-color: var(--nr-n-300);
	color: var(--nr-ink);
}
.nr-btn--ghost:hover { border-color: var(--nr-rose); color: var(--nr-rose-deep); }

.nr-btn--quiet {
	background: transparent;
	border-color: var(--nr-n-200);
	color: var(--nr-ink-soft);
}
.nr-btn--quiet:hover { border-color: var(--nr-rose-soft); color: var(--nr-rose-deep); }

.nr-btn--sm { padding: var(--nr-s-2) var(--nr-s-4); font-size: var(--nr-t-xs); }
.nr-btn--lg { padding: var(--nr-s-4) var(--nr-s-8); font-size: var(--nr-t-base); }
.nr-btn--block { width: 100%; }

.nr-btn[disabled], .nr-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.nr-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--nr-s-2);
	padding: var(--nr-s-1) var(--nr-s-3);
	border-radius: var(--nr-r-pill);
	border: 1px solid var(--nr-n-200);
	background: var(--nr-surface);
	font-size: var(--nr-t-sm);
	font-weight: 600;
	color: var(--nr-ink-soft);
	white-space: nowrap;
}
.nr-chip--rose {
	border-color: rgba( var(--nr-rose-rgb), 0.3 );
	background: var(--nr-rose-wash);
	color: var(--nr-rose-deep);
}
.nr-chip--teal {
	border-color: rgba( var(--nr-teal-rgb), 0.3 );
	background: var(--nr-teal-wash);
	color: var(--nr-teal);
}

/*
 * Stock state carries a shape as well as a hue, so the four states stay
 * distinguishable to a reader who cannot separate the colours.
 */
.nr-stock { display: inline-flex; align-items: center; gap: var(--nr-s-2); font-size: var(--nr-t-sm); font-weight: 600; }
.nr-stock::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: var(--nr-r-pill); background: currentColor; flex: none; }
.nr-stock--in    { color: var(--nr-teal); }
.nr-stock--low   { color: var(--nr-amber); }
.nr-stock--low::before { border-radius: 0; transform: rotate( 45deg ); }
.nr-stock--out   { color: var(--nr-ink-faint); }
.nr-stock--out::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }

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

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

.nr-label {
	font-size: var(--nr-t-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nr-ink-muted);
}

.nr-input, .nr-select, .nr-textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="password"], textarea, select {
	width: 100%;
	padding: var(--nr-s-3) var(--nr-s-4);
	background: var(--nr-surface);
	border: 1px solid var(--nr-n-300);
	border-radius: var(--nr-r-md);
	color: var(--nr-ink);
	font: inherit;
	font-size: var(--nr-t-sm);
	transition: border-color var(--nr-d-micro) var(--nr-ease), box-shadow var(--nr-d-micro) var(--nr-ease);
}
.nr-input:focus, .nr-select:focus, .nr-textarea:focus,
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--nr-rose);
	box-shadow: 0 0 0 3px rgba( var(--nr-rose-rgb), 0.15 );
}
.nr-textarea, textarea { min-height: 7rem; resize: vertical; line-height: var(--nr-lh-body); }
::placeholder { color: var(--nr-n-400); }

.nr-note {
	font-size: var(--nr-t-xs);
	color: var(--nr-ink-faint);
	line-height: var(--nr-lh-snug);
}

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

/*
 * Content is present and styled 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,
 * and on a shop it would be a blocker in front of the products.
 */
.nr-reveal { will-change: transform, opacity; }

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

@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
	body.nr-js .nr-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. Editorial content
   ========================================================================== */

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

.nr-prose blockquote {
	margin: 0;
	padding: var(--nr-s-5) var(--nr-s-6);
	border-left: 3px solid var(--nr-rose);
	background: var(--nr-rose-wash);
	border-radius: 0 var(--nr-r-md) var(--nr-r-md) 0;
	color: var(--nr-ink);
	font-size: var(--nr-t-md);
	line-height: var(--nr-lh-snug);
}

.nr-prose pre {
	padding: var(--nr-s-5);
	background: var(--nr-n-900);
	color: var(--nr-n-100);
	border-radius: var(--nr-r-md);
	overflow-x: auto;
	line-height: 1.6;
}
.nr-prose :not(pre) > code {
	padding: 0.15em 0.4em;
	background: var(--nr-rose-wash);
	border-radius: var(--nr-r-sm);
	color: var(--nr-rose-deep);
}

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

.nr-table { width: 100%; border-collapse: collapse; font-size: var(--nr-t-sm); }
.nr-table th, .nr-table td { padding: var(--nr-s-3) var(--nr-s-4); text-align: left; border-bottom: 1px solid var(--nr-n-200); }
.nr-table th { font-size: var(--nr-t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--nr-ink-muted); font-weight: 700; }
.nr-table td { color: var(--nr-ink-soft); }
.nr-table td.nr-num, .nr-table th.nr-num { text-align: right; font-variant-numeric: tabular-nums; }

/* WordPress core classes. */
.alignleft { float: left; margin: 0 var(--nr-s-6) var(--nr-s-4) 0; }
.alignright { float: right; margin: 0 0 var(--nr-s-4) var(--nr-s-6); }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { margin-inline: auto; }
.wp-caption-text { font-size: var(--nr-t-xs); color: var(--nr-ink-faint); }
.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(--nr-n-300) var(--nr-ground); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--nr-ground); }
::-webkit-scrollbar-thumb { background: var(--nr-n-300); border-radius: var(--nr-r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--nr-rose-soft); }