/* ══════════════════════════════════════════════════════════════
				NMMI.AI — Dotted Background CSS Variable System
				══════════════════════════════════════════════════════════════ */

				/* ── Theme tokens ─────────────────────────────────────────── */
				:root,
				[data-theme="green-dark"] {
				--bg-body:       rgb(50,50,50);
				--bg-surface:    #202020;
				--bg-panel:      rgba(20,20,20,0.40);
				--input-text:    rgba(255,255,255,0.95);
				--accent-rgb:    200,200,200;
				--accent-border: rgba(200,200,200,0.10);
				--muted-rgb:     185,185,185;
				--apply-rgb:     140,140,140;
				--green:         34,255,0;
				--shadow:        rgba(0,0,0,0.55);
				/* dot-bg tokens */
				--dot-color:     rgba(185,185,185,0.13);
				--dot-glow:      rgba(34,255,0,0.55);
				--dot-glow-fade: rgba(140,140,140,0.07);
				--dot-grid:      12px;
				--dot-overlay:   radial-gradient(ellipse at center, rgba(10,10,10,0.0) 0%, rgba(0,0,0,0.55) 100%);
				/* UI */
				--text:          rgba(255,255,255,0.93);
				--muted-text:    rgba(185,185,185,0.60);
				--border:        rgba(200,200,200,0.10);
				--surface-1:     rgba(255,255,255,0.04);
				--surface-2:     rgba(255,255,255,0.08);
				--panel-shadow:  0 20px 60px rgba(0,0,0,0.50);
				--accent-text:   rgba(34,255,0,0.82);
				--accent-bg:     rgba(34,255,0,0.07);
				--accent-bdr:    rgba(34,255,0,0.20);
				--toggle-bg:     rgba(20,20,20,0.80);
				--toggle-bdr:    rgba(34,255,0,0.20);
				--toggle-txt:    rgba(185,185,185,0.65);
				--tbtn-act-bg:   rgba(34,255,0,0.12);
				--tbtn-act-bdr:  rgba(34,255,0,0.45);
				--tbtn-act-txt:  rgba(34,255,0,0.92);
				--code-bg:       rgba(0,0,0,0.28);
				--code-txt:      rgba(185,255,168,0.85);
				--code-bdr:      rgba(34,255,0,0.12);
				}

				[data-theme="green-light"] {
				--bg-body:       rgb(205,205,203);
				--bg-surface:    #e8e8e6;
				--bg-panel:      rgba(255,255,255,0.45);
				--input-text:    rgba(18,18,18,0.92);
				--accent-rgb:    42,42,42;
				--accent-border: rgba(0,0,0,0.12);
				--muted-rgb:     55,55,55;
				--apply-rgb:     90,90,90;
				--green:         0,138,0;
				--shadow:        rgba(0,0,0,0.14);
				--dot-color:     rgba(55,55,55,0.14);
				--dot-glow:      rgba(0,138,0,0.45);
				--dot-glow-fade: rgba(90,90,90,0.06);
				--dot-grid:      12px;
				--dot-overlay:   radial-gradient(ellipse at center, rgba(160,160,158,0.0) 0%, rgba(130,130,128,0.50) 100%);
				--text:          rgba(18,18,18,0.92);
				--muted-text:    rgba(55,55,55,0.60);
				--border:        rgba(0,0,0,0.10);
				--surface-1:     rgba(255,255,255,0.55);
				--surface-2:     rgba(255,255,255,0.80);
				--panel-shadow:  0 20px 60px rgba(0,0,0,0.10);
				--accent-text:   rgba(0,110,0,0.90);
				--accent-bg:     rgba(0,138,0,0.07);
				--accent-bdr:    rgba(0,138,0,0.22);
				--toggle-bg:     rgba(230,230,228,0.88);
				--toggle-bdr:    rgba(0,138,0,0.18);
				--toggle-txt:    rgba(55,55,55,0.65);
				--tbtn-act-bg:   rgba(0,138,0,0.10);
				--tbtn-act-bdr:  rgba(0,138,0,0.45);
				--tbtn-act-txt:  rgba(0,110,0,0.92);
				--code-bg:       rgba(0,0,0,0.05);
				--code-txt:      rgba(0,80,0,0.85);
				--code-bdr:      rgba(0,138,0,0.14);
				}

				[data-theme="teal-dark"] {
				--bg-body:       rgb(28,38,42);
				--bg-surface:    #152028;
				--bg-panel:      rgba(10,25,30,0.50);
				--input-text:    rgba(225,245,248,0.95);
				--accent-rgb:    168,216,220;
				--accent-border: rgba(0,200,210,0.14);
				--muted-rgb:     160,200,205;
				--apply-rgb:     100,160,168;
				--green:         0,210,210;
				--shadow:        rgba(0,0,0,0.60);
				--dot-color:     rgba(168,216,220,0.12);
				--dot-glow:      rgba(0,255,255,0.50);
				--dot-glow-fade: rgba(100,160,168,0.06);
				--dot-grid:      12px;
				--dot-overlay:   radial-gradient(ellipse at center, rgba(0,10,14,0.0) 0%, rgba(0,0,0,0.65) 100%);
				--text:          rgba(225,245,248,0.93);
				--muted-text:    rgba(160,200,205,0.60);
				--border:        rgba(0,200,210,0.12);
				--surface-1:     rgba(0,200,210,0.04);
				--surface-2:     rgba(0,200,210,0.08);
				--panel-shadow:  0 20px 60px rgba(0,0,0,0.55);
				--accent-text:   rgba(0,230,240,0.88);
				--accent-bg:     rgba(0,210,210,0.07);
				--accent-bdr:    rgba(0,210,210,0.22);
				--toggle-bg:     rgba(10,25,30,0.82);
				--toggle-bdr:    rgba(0,210,210,0.18);
				--toggle-txt:    rgba(160,200,205,0.65);
				--tbtn-act-bg:   rgba(0,210,210,0.10);
				--tbtn-act-bdr:  rgba(0,210,210,0.45);
				--tbtn-act-txt:  rgba(0,240,248,0.92);
				--code-bg:       rgba(0,15,20,0.38);
				--code-txt:      rgba(160,255,255,0.80);
				--code-bdr:      rgba(0,210,210,0.14);
				}

				[data-theme="teal-light"] {
				--bg-body:       #eef5f6;
				--bg-surface:    #ffffff;
				--bg-panel:      rgba(0,100,110,0.04);
				--input-text:    rgba(12,30,34,0.92);
				--accent-rgb:    13,61,68;
				--accent-border: rgba(0,110,130,0.18);
				--muted-rgb:     30,80,90;
				--apply-rgb:     60,120,130;
				--green:         0,110,130;
				--shadow:        rgba(0,60,70,0.12);
				--dot-color:     rgba(30,80,90,0.13);
				--dot-glow:      rgba(0,180,200,0.40);
				--dot-glow-fade: rgba(60,120,130,0.05);
				--dot-grid:      12px;
				--dot-overlay:   radial-gradient(ellipse at center, rgba(200,218,220,0.0) 0%, rgba(140,165,168,0.45) 100%);
				--text:          rgba(12,30,34,0.92);
				--muted-text:    rgba(30,80,90,0.60);
				--border:        rgba(0,110,130,0.14);
				--surface-1:     rgba(255,255,255,0.55);
				--surface-2:     rgba(255,255,255,0.82);
				--panel-shadow:  0 20px 60px rgba(0,60,70,0.10);
				--accent-text:   rgba(0,90,108,0.92);
				--accent-bg:     rgba(0,110,130,0.07);
				--accent-bdr:    rgba(0,110,130,0.22);
				--toggle-bg:     rgba(238,245,246,0.92);
				--toggle-bdr:    rgba(0,110,130,0.18);
				--toggle-txt:    rgba(30,80,90,0.65);
				--tbtn-act-bg:   rgba(0,110,130,0.10);
				--tbtn-act-bdr:  rgba(0,110,130,0.45);
				--tbtn-act-txt:  rgba(0,88,104,0.95);
				--code-bg:       rgba(0,90,100,0.05);
				--code-txt:      rgba(0,80,95,0.88);
				--code-bdr:      rgba(0,110,130,0.14);
				}

				/* ── Composite --dot-bg variable (all themes) ─────────────── */
				:root,
				[data-theme="green-dark"],
				[data-theme="green-light"],
				[data-theme="teal-dark"],
				[data-theme="teal-light"] {
				--dot-bg:
				radial-gradient(circle, var(--dot-color) 1px, transparent 1px)
				0 0 / var(--dot-grid) var(--dot-grid),
				var(--bg-body);
				}

				/* ── dot-bg-layer class — pointer glow via ::after ─────────── */
				.dot-bg-layer {
				position: relative;
				background: var(--dot-bg);
				transition: background 0.25s ease;
				}
				.dot-bg-layer::after {
				content: "";
				position: absolute;
				inset: 0;
				pointer-events: none;
				/* Tightened fade: colour →25% dim →52% fully transparent — well inside circle edge */
				background: radial-gradient(
				220px at var(--glow-x, 50%) var(--glow-y, 50%),
				var(--dot-glow)        0%,
				var(--dot-glow-fade)  25%,
				transparent           52%
				);
				mask-image:         radial-gradient(circle, black 1px, transparent 1px);
				-webkit-mask-image: radial-gradient(circle, black 1px, transparent 1px);
				mask-size:          var(--dot-grid) var(--dot-grid);
				-webkit-mask-size:  var(--dot-grid) var(--dot-grid);
				opacity: 0.90;
				transition: opacity 180ms ease;
				border-radius: inherit;
				}

				/* ── Base reset ───────────────────────────────────────────── */
				*, *::before, *::after { box-sizing: border-box; }
				html, body { height: 100%; margin: 0; }
				body {
				min-height: 100vh;
				font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
				color: var(--text);
				overflow: hidden;
				transition: color 0.25s ease;
				}

				/* ── Full-screen bg ─────────────────────────────────────── */
				.screen-bg {
				position: fixed;
				inset: 0;
				z-index: 0;
				}

				/* ── Content ─────────────────────────────────────────────── */
				.content {
				position: relative;
				z-index: 1;
				min-height: 100vh;
				display: grid;
				place-items: center;
				padding: 24px;
				}

				.panel {
				width: min(760px, 100%);
				padding: 32px 36px;
				border-radius: 20px;
				background: linear-gradient(160deg, var(--surface-2), var(--surface-1));
				border: 1px solid var(--border);
				box-shadow: var(--panel-shadow);
				backdrop-filter: blur(14px);
				-webkit-backdrop-filter: blur(14px);
				transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
				}

				.eyebrow {
				display: inline-flex;
				align-items: center;
				gap: 8px;
				padding: 5px 12px;
				border-radius: 999px;
				background: var(--accent-bg);
				border: 1px solid var(--accent-bdr);
				color: var(--accent-text);
				font-size: 0.68rem;
				letter-spacing: 0.13em;
				text-transform: uppercase;
				font-weight: 700;
				}
				.pulse-dot {
				width: 6px; height: 6px; border-radius: 50%;
				background: var(--accent-text);
				opacity: 0.75;
				animation: pdot 2s infinite;
				}
				@keyframes pdot {
				0%,100% { opacity:0.75; transform:scale(1); }
				50%      { opacity:0.30; transform:scale(0.70); }
				}

				h1 {
				margin: 14px 0 10px;
				font-size: clamp(1.8rem, 4vw, 3.2rem);
				line-height: 1.02;
				letter-spacing: -0.03em;
				color: var(--text);
				transition: color 0.25s;
				}
				h1 em { font-style: normal; color: var(--accent-text); }

				p {
				margin: 0 0 18px;
				max-width: 56ch;
				color: var(--muted-text);
				font-size: clamp(0.88rem, 1.3vw, 0.98rem);
				line-height: 1.72;
				transition: color 0.25s;
				}

				/* Code block showing the CSS snippet */
				.code-block {
				background: var(--code-bg);
				border: 1px solid var(--code-bdr);
				border-radius: 12px;
				color: var(--code-txt);
				font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
				font-size: 0.78rem;
				line-height: 1.65;
				padding: 16px 18px;
				overflow-x: auto;
				white-space: pre;
				transition: background 0.25s, color 0.25s, border-color 0.25s;
				}
				.cm { opacity: 0.45; }   /* comment */
				.ck { color: var(--accent-text); opacity: 0.90; }  /* key */
				.cv { opacity: 0.80; }   /* value */

				/* ── Theme toggle pill — bottom-right ─────────────────────── */
				.theme-bar {
				position: fixed;
				bottom: 14px;
				right: 14px;
				z-index: 300;
				display: flex;
				align-items: center;
				gap: 3px;
				background: var(--toggle-bg);
				border: 1px solid var(--toggle-bdr);
				border-radius: 20px;
				padding: 4px 8px;
				backdrop-filter: blur(8px);
				-webkit-backdrop-filter: blur(8px);
				transition: background 0.25s, border-color 0.25s;
				}
				.theme-bar-lbl {
				font-size: 0.48rem;
				letter-spacing: 0.12em;
				text-transform: uppercase;
				color: var(--toggle-txt);
				padding: 0 5px 0 2px;
				font-weight: 700;
				opacity: 0.55;
				}
				.tbtn {
				background: transparent;
				border: 1px solid transparent;
				color: var(--toggle-txt);
				font-size: 0.51rem;
				font-weight: 700;
				letter-spacing: 0.08em;
				text-transform: uppercase;
				cursor: pointer;
				padding: 3px 8px;
				border-radius: 14px;
				transition: all 0.18s;
				white-space: nowrap;
				font-family: inherit;
				}
				.tbtn:hover, .tbtn.active {
				color: var(--tbtn-act-txt);
				border-color: var(--tbtn-act-bdr);
				background: var(--tbtn-act-bg);
				}

				@media (max-width: 640px) {
				body { overflow: auto; }
				.panel { padding: 20px 22px; border-radius: 16px; }
				.screen-bg::after {
				background: radial-gradient(150px at var(--glow-x,50%) var(--glow-y,50%),
				var(--dot-glow), var(--dot-glow-fade) 25%, transparent 52%);
				}
				}