:root {
			color-scheme: dark;
			/* Home-local names track the canonical /tokens.css vocabulary so this
			   page reads as one product with the rest of the site AND flips cleanly
			   between themes. --bg / --text / --text-2..4 / --hairline* are the
			   shared "nav-source" tokens: declared here for the dark brand palette
			   and remapped by [data-theme='light'] in tokens.css. --surface-1..3 and
			   --accent are NOT re-forked here — they inherit their canonical values
			   (which already flip). The three home-only tokens canonical can't reach
			   (--surface-0 / --green / --accent-2) get their light values in the
			   scoped [data-theme='light'] block just below. */
			--bg:        var(--bg-0);          /* #0a0a0a — same near-black as the app shell */
			--surface-0: #0e0e0f;              /* opaque card / panel fill; light value set below */
			--hairline:  var(--stroke);
			--hairline-strong: var(--stroke-strong);
			--text:      #f6f6f6;
			--text-2:    #a8a8a8;
			--text-3:    #8a8a8a; /* AA: ≥4.5:1 on dark surfaces for secondary text */
			--text-4:    #6e6e6e; /* AA: ≥3:1 (large/decorative only) */
			--accent-2:  var(--accent);
			--green:     var(--ink);
			--font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
			--font-body:    'Inter', system-ui, sans-serif;
			--font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
		}

		/* ── Light theme (home-local) ───────────────────────────────────────────
		   Dark is the primary brand palette. tokens.css already flips the shared
		   nav-source tokens under [data-theme='light']; these rules cover the
		   home-only tokens and the handful of hardcoded surfaces canonical can't
		   reach, so the page stays fully legible and on-brand in light mode. */
		:root[data-theme='light'] {
			--surface-0: var(--bg-1);   /* #f3f4f6 — light card/panel on the white page */
		}
		/* Selection-state chips hardcode white tints — re-map to ink tints on light
		   so the active/selected control stays visible. */
		[data-theme='light'] .pg-chip.active {
			border-color: var(--stroke-strong); background: var(--surface-3); color: var(--ink);
		}
		[data-theme='light'] .hero-chip[data-active="true"] {
			border-color: var(--stroke-strong); background: var(--surface-3); color: var(--ink);
		}
		/* Code-editor syntax spans hardcode light greys (legible only on a dark
		   pane). On a light pane, re-map them to dark inks + the accent for strings. */
		[data-theme='light'] .pg-editor pre .tag,
		[data-theme='light'] .code-pane pre .tag { color: var(--ink); }
		[data-theme='light'] .pg-editor pre .attr,
		[data-theme='light'] .code-pane pre .attr { color: var(--ink-dim); }
		[data-theme='light'] .pg-editor pre .str,
		[data-theme='light'] .code-pane pre .str,
		[data-theme='light'] .dev-code .str,
		[data-theme='light'] .bento-code .str { color: var(--accent); }
		[data-theme='light'] .dev-code .num { color: var(--ink-dim); }
		/* Selection states that use pure-white tints (correct on dark) need ink
		   equivalents on light so the active control stays visible. */
		[data-theme='light'] .bento-pill-btn.active {
			border-color: var(--stroke-strong); background: var(--surface-3); color: var(--ink);
		}
		[data-theme='light'] #home-sniper .snipe-stage.active .snipe-node,
		[data-theme='light'] #home-sniper .snipe-stage.flow .snipe-node {
			border-color: var(--accent); color: var(--accent);
		}
		* { box-sizing: border-box; }
		html { scroll-behavior: smooth; }
		html, body { margin: 0; padding: 0; background: var(--bg-ambient); background-attachment: fixed; color: var(--text); font-family: var(--font-body); }
		body {
			font-size: 15.5px; line-height: 1.55;
			min-height: 100vh; overflow-x: hidden;
			-webkit-font-smoothing: antialiased;
			text-rendering: optimizeLegibility;
		}
		a { color: inherit; text-decoration: none; }
		button { font-family: inherit; cursor: pointer; }
		::selection { background: var(--text); color: var(--bg); }
		main#main-content { display: block; outline: none; }
		.skip-link {
			position: fixed; top: 12px; left: 12px; z-index: 1000;
			transform: translateY(-150%);
			padding: 10px 16px; border-radius: 8px;
			background: var(--text); color: var(--bg);
			font-family: var(--font-mono); font-size: 13px; font-weight: 600;
			text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
			transition: transform var(--duration-fast) var(--ease-standard);
		}
		.skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--accent); outline-offset: 2px; }
		.wrap-1280 { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
		.wrap-1440 { max-width: 1440px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
		@media (max-width: 720px) { .wrap-1280, .wrap-1440 { padding-left: 20px; padding-right: 20px; } }

		/* Header/nav styles live in /nav.css (loaded by /nav.js). */

		/* Buttons: canonical shared system — see public/buttons.css (loaded above). */
		.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

		/* ── HERO ──────────────────────────────────────────────────
		   Single centred column, 3D below the copy. The upstream hero is a
		   50/50 split with a hairline rule down the middle; that silhouette is
		   the first thing anyone recognises, so it is the first thing to go.
		   Here the eye reads one column top to bottom, and the stage sits
		   under it as a wide band rather than beside it as a panel. */
		.hero {
			display: flex; flex-direction: column; align-items: center;
			text-align: center;
			min-height: 0;
			padding: 112px 24px 0;
			max-width: 1040px; margin: 0 auto;
			position: relative;
		}
		/* The vertical rule only made sense while the hero was two columns. */
		.hero::after { display: none; }
		.hero-text {
			padding: 0;
			align-items: center;
			max-width: 800px;
			display: flex; flex-direction: column;
		}
		.hero-stage { width: 100%; min-height: 520px; margin-top: 48px; }
		@media (max-width: 980px) {
			.hero { padding: 72px 20px 0; }
			.hero-text { padding: 0; }
			.hero-stage { min-height: 380px; margin-top: 32px; }
		}
		.eyebrow {
			display: inline-flex; align-items: center; gap: 10px;
			font-family: var(--font-mono); font-size: 11.5px;
			text-transform: uppercase; letter-spacing: 0.18em;
			color: var(--text-3); margin-bottom: 32px;
		}
		.eyebrow::before { content: ""; width: 2px; align-self: stretch; min-height: 13px; background: var(--green, #34d399); }
		a.eyebrow {
			color: var(--text-2); text-decoration: none;
			padding: 7px 14px 7px 12px; margin-left: -12px;
			border: 1px solid var(--hairline); border-radius: 6px;
			transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
		}
		a.eyebrow .eyebrow-arrow { display: inline-block; transition: transform var(--duration-fast); }
		a.eyebrow:hover, a.eyebrow:focus-visible {
			color: var(--text); border-color: var(--hairline-strong);
			background: rgba(255, 255, 255, 0.03);
		}
		a.eyebrow:hover .eyebrow-arrow, a.eyebrow:focus-visible .eyebrow-arrow { transform: translateX(3px); }
		h1.hero-h {
			font-family: var(--font-display);
			/* Smaller than the upstream's clamp(52px, 6.8vw, 108px): a centred
			   column has less horizontal room than a half-width one, and 108px
			   pushed the copy onto four lines. */
			font-size: clamp(38px, 4.6vw, 76px);
			line-height: 1.02; letter-spacing: -0.03em;
			font-weight: 600; margin: 0 0 28px; color: var(--text);
		}
		h1.hero-h em { font-style: normal; color: var(--text-3); font-weight: 500; }
		.hero-sub {
			font-size: 18px; color: var(--text-2);
			max-width: 560px; margin: 0 0 36px; line-height: 1.55; font-weight: 400;
		}
		.hero-bullets {
			list-style: none; padding: 0; margin: 0 0 40px;
			display: flex; flex-direction: column; gap: 10px;
			align-items: flex-start; text-align: left;
		}
		.hero-bullets li {
			display: flex; align-items: center; gap: 12px;
			font-size: 15px; color: var(--text-2);
			min-width: 0;
		}
		.hero-bullets li::before {
			content: ""; width: 5px; height: 5px; border-radius: 50%;
			background: var(--text-3); flex-shrink: 0;
		}
		/* On phones a bullet's sentence must wrap as one paragraph. Flex would
		   split <strong>/glossary spans into separate wrapping items, so switch
		   the row to normal inline flow with the dot as an inline marker. */
		@media (max-width: 560px) {
			.hero-bullets li {
				display: block; padding-left: 17px; position: relative;
			}
			.hero-bullets li::before {
				position: absolute; left: 0; top: 0.62em; transform: translateY(-50%);
			}
		}
		.hero-bullets li strong { color: var(--text); font-weight: 550; }

		/* ── Hero forge bar: the primary hero affordance ───────────────────── */
		.hero-forge {
			display: flex; align-items: center; gap: 10px;
			width: 100%; max-width: 560px; margin: 4px 0 12px;
			padding: 7px 7px 7px 16px; border-radius: 14px;
			background:
				linear-gradient(var(--surface-0), var(--surface-0)) padding-box,
				linear-gradient(120deg, rgba(255,180,84,.55), rgba(255,106,213,.55) 38%, rgba(139,92,246,.55) 64%, rgba(79,195,255,.55)) border-box;
			border: 1.5px solid transparent;
			box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 30px -18px rgba(139,92,246,.5);
			transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
		}
		.hero-forge:focus-within {
			box-shadow: 0 0 0 4px rgba(139,92,246,.16), 0 10px 34px -16px rgba(139,92,246,.6);
			transform: translateY(-1px);
		}
		.hero-forge-glyph {
			font-size: 15px; line-height: 1; flex: 0 0 auto;
			background: linear-gradient(120deg, #22d3ee, #38bdf8 40%, #818cf8 66%, #6366f1);
			-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
			animation: hero-forge-glyph-spin 8s linear infinite;
		}
		@keyframes hero-forge-glyph-spin { to { transform: rotate(360deg); } }
		.hero-forge-input {
			flex: 1 1 auto; min-width: 0;
			background: transparent; border: 0; outline: 0; padding: 8px 2px;
			color: var(--text); font-family: var(--font-body); font-size: 15px; letter-spacing: -0.01em;
		}
		.hero-forge-input::placeholder { color: var(--text-3); }
		.hero-forge-go {
			flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
			padding: 10px 16px; border-radius: 9px; cursor: pointer;
			font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
			color: var(--on-bright); border: 0;
			background: linear-gradient(120deg, #22d3ee, #38bdf8 40%, #818cf8 66%, #6366f1);
			background-size: 160% 160%; background-position: 0% 50%;
			transition: background-position var(--duration-slow) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
		}
		.hero-forge-go .arrow { transition: transform var(--duration-base) var(--ease-standard); }
		.hero-forge-go:hover { background-position: 100% 50%; box-shadow: 0 0 22px -4px rgba(139,92,246,.55); }
		.hero-forge-go:hover .arrow { transform: translateX(3px); }
		.hero-forge-go:active { transform: translateY(1px); }
		.hero-forge-go:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
		.hero-forge-go[data-busy="1"] { opacity: .72; cursor: progress; }
		.hero-forge-go .btn-forge-dot { background: rgba(10,10,10,.85); }
		.hero-forge-tries {
			display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
			margin: 0 0 14px; font-size: 12.5px;
		}
		.hero-forge-tries-label {
			font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
			text-transform: uppercase; color: var(--text-4);
		}
		.hero-try {
			padding: 5px 11px; border-radius: 6px; cursor: pointer;
			background: var(--surface-0); border: 1px solid var(--hairline);
			color: var(--text-2); font-family: var(--font-body); font-size: 12.5px;
			transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
		}
		.hero-try:hover { color: var(--text); border-color: var(--hairline-strong); transform: translateY(-1px); }
		.hero-try:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
		.hero-forge-note { font-size: 12.5px; color: var(--text-3); margin: 0 0 20px; }
		.hero-forge-note a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--hairline-strong); }
		.hero-forge-note a:hover { color: var(--text); }
		@media (prefers-reduced-motion: reduce) {
			.hero-forge-glyph { animation: none; }
			.hero-forge:focus-within { transform: none; }
		}
		.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
		.hero-reassure {
			display: inline-flex; align-items: center; gap: 9px;
			font-size: 13.5px; line-height: 1.5; color: var(--text-3);
			margin: 0 0 52px; max-width: 460px;
		}
		.hero-reassure svg {
			width: 15px; height: 15px; flex-shrink: 0; color: var(--green);
		}
		.hero-reassure strong { color: var(--text-2); font-weight: 600; }
		.hero-reassure a {
			color: var(--text-2); text-decoration: none;
			border-bottom: 1px solid var(--hairline-strong);
			transition: color var(--duration-fast), border-color var(--duration-fast);
		}
		.hero-reassure a:hover, .hero-reassure a:focus-visible {
			color: var(--text); border-bottom-color: var(--text-3);
		}
		.hero-reassure a:focus-visible {
			outline: var(--focus-ring-width,2px) solid var(--focus-ring-color,var(--accent));
			outline-offset: var(--focus-ring-offset,2px); border-radius: 2px;
		}

		.metrics {
			display: flex; gap: 28px; flex-wrap: wrap;
			padding-top: 28px; border-top: 1px solid var(--hairline);
			font-family: var(--font-mono); font-size: 12px;
			color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em;
		}
		.metric { display: flex; align-items: baseline; gap: 7px; }
		.metric strong {
			font-family: var(--font-display); color: var(--text); font-weight: 600;
			font-size: 17px; letter-spacing: -0.02em; text-transform: none;
			font-variant-numeric: tabular-nums;
		}

		/* ── Hero stage ──────────────────────────────────────────── */
		.hero-stage {
			position: relative; overflow: hidden; container-type: inline-size;
			background:
				radial-gradient(118% 78% at 50% 20%, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.022) 36%, transparent 60%),
				radial-gradient(72% 48% at 50% 104%, rgba(0,0,0,0.6) 0%, transparent 72%),
				var(--bg);
		}
		.hero-stage agent-3d {
			position: absolute; inset: 0; display: block; width: 100%; height: 100%;
		}
		.hero-stage-inner {
			position: absolute; inset: 0;
			transform-style: preserve-3d;
			transition: transform var(--duration-slow) cubic-bezier(.2,.7,.3,1);
			will-change: transform;
		}
		.hero-stage-fallback {
			position: absolute; inset: 0;
			display: flex; flex-direction: column;
			align-items: center; justify-content: center;
			gap: 12px; text-align: center; padding: 24px;
		}
		.hero-stage-fallback p {
			margin: 0; color: var(--text-3); font-size: 13.5px; max-width: 240px;
		}

		/* Hero loading state. The stage is the site's single most important first
		   impression, and it used to be a silent near-black void for up to 15s while
		   the GLB and the <agent-3d> CDN loader resolve on a cold cache. A breathing
		   agent silhouette + "summoning" copy keeps it alive and on-brand; it fades
		   out the instant agent:ready fires (bootHeroAvatar). */
		.hero-stage-loading {
			position: absolute; inset: 0; z-index: 3;
			display: flex; flex-direction: column;
			align-items: center; justify-content: center;
			gap: 16px; pointer-events: none;
			transition: opacity var(--duration-slow) var(--ease-standard);
		}
		.hero-stage-loading.is-hiding { opacity: 0; }
		.hero-stage-loading-figure {
			position: relative;
			width: clamp(84px, 26cqw, 138px); height: auto;
			color: var(--text-4);
			animation: hero-load-breathe 2.4s ease-in-out infinite;
		}
		.hero-stage-loading-figure::before {
			content: ''; position: absolute; left: 50%; top: 46%;
			width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%);
			background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 62%);
			z-index: -1;
		}
		@keyframes hero-load-breathe {
			0%, 100% { opacity: 0.34; transform: translateY(0) scale(1); }
			50%      { opacity: 0.72; transform: translateY(-2px) scale(1.015); }
		}
		.hero-stage-loading-copy {
			font-size: 12.5px; letter-spacing: 0.02em; color: var(--text-3);
		}
		.hero-stage-loading-copy .dot { animation: hero-load-dot 1.4s ease-in-out infinite; }
		.hero-stage-loading-copy .dot:nth-child(2) { animation-delay: 0.18s; }
		.hero-stage-loading-copy .dot:nth-child(3) { animation-delay: 0.36s; }
		@keyframes hero-load-dot { 0%, 65%, 100% { opacity: 0.2; } 30% { opacity: 1; } }
		@media (prefers-reduced-motion: reduce) {
			.hero-stage-loading-figure { animation: none; opacity: 0.5; }
			.hero-stage-loading-copy .dot { animation: none; opacity: 0.6; }
			.hero-stage-loading { transition: none; }
		}

		/* ── CAPABILITY STRIP ──────────────────────────────────── */
		.capability-strip {
			position: relative;
			/* clip, not hidden: `overflow: hidden` makes this a scroll container, and
			   Chrome puts every scroll container in the tab order. That handed
			   keyboard users a stop inside an aria-hidden decorative marquee, which
			   screen readers announce as nothing at all. `clip` crops identically
			   without creating a scroller, so the strip is neither tabbable nor
			   focusable and needs no tabindex to opt out. */
			overflow: clip;
			border-top: 1px solid var(--hairline);
			border-bottom: 1px solid var(--hairline);
			background: var(--surface-0);
			padding: 13px 0;
			cursor: default;
			user-select: none;
		}
		.capability-strip:hover .cap-track { animation-play-state: paused; }
		.cap-track {
			display: flex;
			width: max-content;
			animation: cap-scroll 55s linear infinite;
			will-change: transform;
		}
		.cap-inner {
			display: flex;
			align-items: center;
			flex-shrink: 0;
		}
		.cap-item {
			font-family: var(--font-mono);
			font-size: 11.5px;
			letter-spacing: 0.04em;
			color: var(--text-3);
			white-space: nowrap;
			padding: 0 2px;
			transition: color var(--duration-fast);
		}
		.cap-item:hover { color: var(--text-2); }
		.cap-sep {
			font-size: 10px;
			color: var(--text-4);
			padding: 0 16px;
			flex-shrink: 0;
			pointer-events: none;
		}
		@keyframes cap-scroll {
			from { transform: translateX(0); }
			to   { transform: translateX(-50%); }
		}
		.cap-fade {
			position: absolute;
			top: 0; bottom: 0;
			width: 120px;
			z-index: 2;
			pointer-events: none;
		}
		.cap-fade--l {
			left: 0;
			background: linear-gradient(to right, var(--surface-0) 30%, transparent);
		}
		.cap-fade--r {
			right: 0;
			background: linear-gradient(to left, var(--surface-0) 30%, transparent);
		}

		/* ── PARTNER / PRESS STRIP ───────────────────────────────── */
		.press-strip { padding: 38px 0 42px; }
		.press-strip-cap {
			font-family: var(--font-mono); font-size: 10.5px;
			letter-spacing: 0.2em; text-transform: uppercase;
			color: var(--text-3); text-align: center; margin-bottom: 24px;
		}
		.press-row {
			display: flex; flex-wrap: wrap; justify-content: center;
			gap: 18px 38px; align-items: center; max-width: 1000px; margin: 0 auto;
		}
		.press-logo {
			display: inline-flex; align-items: center; gap: 9px;
			/* Dim the ICON only, never the label: text-3 at 0.7 link opacity
			   measured 3.7:1 on the dark bg (axe AA needs 4.5:1); undimmed
			   text-3 is 5.7:1. */
			color: var(--text-3); text-decoration: none;
			font-family: var(--font-display); font-size: 15px; font-weight: 500;
			letter-spacing: -0.02em;
			transition: opacity var(--duration-fast), color var(--duration-fast);
		}
		.press-logo .ico { opacity: 0.7; transition: opacity var(--duration-fast); }
		.press-logo:hover .ico, .press-logo:focus-visible .ico { opacity: 1; }
		.press-logo:hover, .press-logo:focus-visible { color: var(--text); }
		.press-logo:focus-visible {
			outline: 1px solid var(--hairline-strong); outline-offset: 4px; border-radius: 4px;
		}
		.press-logo .ico {
			width: 17px; height: 17px; flex: 0 0 auto; background: currentColor;
			-webkit-mask: var(--logo) center / contain no-repeat;
			mask: var(--logo) center / contain no-repeat;
		}
		@media (max-width: 720px) {
			.press-row { gap: 16px 26px; }
			.press-logo { font-size: 13.5px; }
		}

		/* ── SECTION FRAME ───────────────────────────────────────── */
		section.block { padding: 112px 0; border-top: 1px solid var(--hairline); }
		@media (max-width: 720px) { section.block { padding: 72px 0; } }
		.block-head { margin-bottom: 60px; max-width: 800px; }
		.block-eyebrow {
			font-family: var(--font-mono); font-size: 11.5px;
			letter-spacing: 0.2em; text-transform: uppercase;
			color: var(--text-3); margin: 0 0 16px;
		}
		.block-eyebrow .num { color: var(--text); margin-right: 12px; }
		.block-h {
			font-family: var(--font-display);
			font-size: clamp(34px, 4vw, 58px);
			line-height: 1.0; letter-spacing: -0.035em;
			font-weight: 600; margin: 0 0 20px;
		}
		.block-h em { font-style: normal; color: var(--text-3); font-weight: 500; }
		.block-lede {
			font-size: 17px; color: var(--text-2);
			max-width: 600px; line-height: 1.55; margin: 0;
		}

		/* ── EMBED SHOWCASE ──────────────────────────────────────── */
		.embed-grid {
			display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
			background: var(--hairline); border: 1px solid var(--hairline);
			border-radius: 14px; overflow: hidden;
		}
		@media (max-width: 980px) { .embed-grid { grid-template-columns: 1fr; } }
		.pane { background: var(--surface-0); min-height: 420px; display: flex; flex-direction: column; }
		.pane-head {
			display: flex; align-items: center; justify-content: space-between;
			padding: 14px 18px; border-bottom: 1px solid var(--hairline);
			font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
		}
		.pane-head .tabs { display: flex; gap: 4px; }
		.pane-head .tab {
			padding: 5px 11px; border-radius: 5px;
			font-family: var(--font-mono); font-size: 11.5px;
			color: var(--text-3); background: transparent; border: 0; cursor: pointer;
		}
		.pane-head .tab.active { background: var(--surface-2); color: var(--text); }
		/* QB-07: the tabs set cursor: pointer and only the active one was styled,
		   so on the homepage the inactive tabs gave no sign they were pressable. */
		.pane-head .tab {
			transition:
				background var(--duration-fast) var(--ease-standard),
				color var(--duration-fast) var(--ease-standard);
		}
		.pane-head .tab:hover:not(.active) { color: var(--text-2); background: var(--surface-1); }
		.code-pane pre {
			margin: 0; padding: 28px;
			font-family: var(--font-mono); font-size: 13px; line-height: 1.75;
			color: var(--text); overflow-x: auto; flex: 1; background: var(--surface-0);
		}
		.code-pane pre .tag  { color: #d3d3d3; }
		.code-pane pre .attr { color: #989898; }
		.code-pane pre .str  { color: #f6f6f6; }
		.code-pane pre .com  { color: var(--text-4); }
		.code-pane .pane-foot { padding: 14px 18px; border-top: 1px solid var(--hairline); }
		.copy-btn {
			background: transparent; color: var(--text);
			border: 1px solid var(--hairline-strong); cursor: pointer;
			padding: 7px 14px; border-radius: 7px; font-size: 13px; font-weight: 500;
		}
		.copy-btn:hover { border-color: var(--text); }
		.copy-btn.copied { background: var(--text); color: var(--bg); border-color: var(--text); }
		.render-pane { position: relative; padding: 0; }
		.render-pane agent-3d, .render-pane .live-agent-slot {
			position: absolute; inset: 49px 0 0; display: block;
			width: 100%; height: calc(100% - 49px);
		}

		/* ── AXIS DOORS ─────────────────────────────────────────── */

		.doors {
			display: grid; grid-template-columns: repeat(3, 1fr);
			gap: 1px; background: var(--hairline);
			border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden;
		}
		@media (max-width: 980px) { .doors { grid-template-columns: 1fr; } }
		.door {
			background: var(--surface-0); padding: 44px 36px 38px;
			display: flex; flex-direction: column; transition: background var(--duration-fast);
		}
		.door:hover { background: var(--surface-1); }
		.door-num {
			font-family: var(--font-mono); font-size: 11.5px;
			letter-spacing: 0.18em; color: var(--text-3); margin-bottom: 28px;
			display: flex; justify-content: space-between; align-items: baseline;
		}
		.door-num .lbl { color: var(--text-3); }
		.door h3 {
			font-family: var(--font-display); font-size: 26px; line-height: 1.1;
			letter-spacing: -0.025em; font-weight: 600; margin: 0 0 14px;
		}
		.door p { color: var(--text-2); margin: 0 0 28px; font-size: 15px; line-height: 1.55; flex: 1; }
		.door .door-cta {
			font-size: 14px; font-weight: 500; color: var(--text);
			display: inline-flex; align-items: center; gap: 8px;
		}
		.door .door-cta::after { content: "→"; transition: transform var(--duration-fast); }
		.door:hover .door-cta::after { transform: translateX(4px); }
		.door-screenshot {
			margin: 0 0 24px; border-radius: 8px; overflow: hidden;
			border: 1px solid var(--hairline-strong);
			aspect-ratio: 16/9; background: var(--surface-2);
		}
		.door-screenshot img { width: 100%; height: 100%; object-fit: cover; display: block; }

		/* ── START PATH (lite entry: three steps under the hero) ─── */
		.start-path { border-top: 1px solid var(--hairline); padding: 44px 0 48px; }
		.start-path-head {
			display: flex; align-items: baseline; justify-content: space-between;
			gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
		}
		.start-path-eyebrow {
			font-family: var(--font-mono); font-size: 11.5px;
			letter-spacing: 0.2em; text-transform: uppercase;
			color: var(--text-3); margin: 0;
		}
		.start-path-note { font-size: 13px; color: var(--text-3); margin: 0; }
		.start-path-note a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
		.start-path-note a:hover, .start-path-note a:focus-visible { color: var(--text); }
		.start-steps {
			display: grid; grid-template-columns: repeat(3, 1fr);
			gap: 1px; background: var(--hairline);
			border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden;
		}
		@media (max-width: 980px) { .start-steps { grid-template-columns: 1fr; } }
		.start-step {
			background: var(--surface-0); padding: 24px 26px 22px;
			display: flex; flex-direction: column; gap: 9px;
			transition: background var(--duration-fast);
		}
		.start-step:hover { background: var(--surface-1); }
		.start-step:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; background: var(--surface-1); }
		.start-step-num {
			font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.18em;
			color: var(--text-3); display: flex; justify-content: space-between; align-items: baseline;
		}
		.start-step-num .time { letter-spacing: 0.06em; text-transform: none; }
		.start-step h3 {
			font-family: var(--font-display); font-size: 21px; font-weight: 600;
			letter-spacing: -0.02em; line-height: 1.15; margin: 0;
			display: flex; align-items: center; gap: 10px;
		}
		.start-step h3 .arrow { color: var(--text-3); transition: transform var(--duration-fast), color var(--duration-fast); }
		.start-step:hover h3 .arrow { transform: translateX(4px); color: var(--text); }
		.start-step p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

		/* ── ADVANCED TIER (progressive disclosure) ────────────────
		   html.tws-lite is applied pre-paint from localStorage; the gate
		   section (#advanced-gate) toggles it and persists the choice. */
		html.tws-lite [data-tier="advanced"] { display: none; }
		.adv-gate { border-top: 1px solid var(--hairline); padding: 64px 0; }
		.adv-gate-card {
			border: 1px solid var(--hairline-strong); border-radius: 14px;
			background: var(--surface-0); padding: 36px 38px;
			display: flex; flex-wrap: wrap; align-items: center;
			justify-content: space-between; gap: 28px;
			transition: padding var(--duration-base);
		}
		@media (max-width: 720px) { .adv-gate-card { padding: 26px 24px; } }
		.adv-gate-text { max-width: 680px; }
		.adv-gate-eyebrow {
			font-family: var(--font-mono); font-size: 11.5px;
			letter-spacing: 0.2em; text-transform: uppercase;
			color: var(--text-3); margin: 0 0 12px;
		}
		.adv-gate-h {
			font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px);
			line-height: 1.08; letter-spacing: -0.025em; font-weight: 600; margin: 0 0 12px;
		}
		.adv-gate-h em { font-style: normal; color: var(--text-3); font-weight: 500; }
		.adv-gate-desc { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); max-width: 560px; }
		.adv-gate-topics { display: flex; flex-wrap: wrap; gap: 8px; }
		.adv-topic {
			font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
			padding: 6px 12px; border: 1px solid var(--hairline-strong); border-radius: 6px;
			background: transparent; transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
		}
		.adv-topic:hover, .adv-topic:focus-visible { color: var(--text); border-color: var(--text); background: var(--surface-1); }
		.adv-toggle {
			flex-shrink: 0; cursor: pointer;
			background: var(--text); color: var(--bg); border: 1px solid var(--text);
			padding: 13px 22px; border-radius: 9px; font-size: 14px; font-weight: 600;
			display: inline-flex; align-items: center; gap: 10px;
			transition: opacity var(--duration-fast), transform var(--duration-fast);
		}
		.adv-toggle:hover { opacity: 0.88; }
		.adv-toggle:active { transform: translateY(1px); }
		.adv-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
		.adv-toggle .adv-toggle-hide { display: none; }
		/* Expanded state: the gate compacts into a slim divider with a collapse control. */
		html:not(.tws-lite) .adv-gate { padding: 36px 0; }
		html:not(.tws-lite) .adv-gate-card { padding: 20px 24px; }
		html:not(.tws-lite) .adv-gate-h,
		html:not(.tws-lite) .adv-gate-desc,
		html:not(.tws-lite) .adv-gate-topics { display: none; }
		html:not(.tws-lite) .adv-gate-eyebrow { margin: 0; }
		html:not(.tws-lite) .adv-toggle {
			background: transparent; color: var(--text); border-color: var(--hairline-strong);
			font-weight: 500; padding: 9px 16px; font-size: 13px;
		}
		html:not(.tws-lite) .adv-toggle:hover { border-color: var(--text); opacity: 1; }
		html:not(.tws-lite) .adv-toggle .adv-toggle-show { display: none; }
		html:not(.tws-lite) .adv-toggle .adv-toggle-hide { display: inline; }

		/* ── BENTO GRID ──────────────────────────────────────────── */
		.bento {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: auto;
			gap: 1px; background: var(--hairline);
			border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden;
		}
		@media (max-width: 1080px) { .bento { grid-template-columns: repeat(2, 1fr); } }
		@media (max-width: 680px)  { .bento { grid-template-columns: 1fr; } }
		.bento-card {
			background: var(--surface-0);
			padding: 36px 32px 32px;
			display: flex; flex-direction: column; gap: 12px;
			transition: background var(--duration-fast);
			position: relative; overflow: hidden;
		}
		.bento-card:hover { background: var(--surface-1); }
		.bento-card.span2 { grid-column: span 2; }
		@media (max-width: 1080px) { .bento-card.span2 { grid-column: span 1; } }
		.bento-icon {
			font-size: 22px; line-height: 1; margin-bottom: 4px;
			display: flex; align-items: center; gap: 10px;
		}
		.bento-icon .dot {
			width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
		}
		.bento-title {
			font-family: var(--font-display); font-size: 20px;
			font-weight: 600; letter-spacing: -0.02em; margin: 0;
		}
		.bento-desc {
			font-size: 14.5px; color: var(--text-2);
			line-height: 1.55; margin: 0; flex: 1;
		}
		.bento-tag {
			display: inline-flex; align-items: center;
			font-family: var(--font-mono); font-size: 10.5px;
			letter-spacing: 0.15em; text-transform: uppercase;
			color: var(--text-3); border: 1px solid var(--hairline-strong);
			padding: 4px 9px; border-radius: 99px;
			margin-top: 4px; width: fit-content;
		}
		.bento-screenshot {
			border-radius: 7px; overflow: hidden;
			border: 1px solid var(--hairline-strong);
			margin-top: 8px; background: var(--surface-2);
		}
		.bento-screenshot img { width: 100%; display: block; }
		.bento-pills {
			display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
		}
		.bento-pill {
			font-family: var(--font-mono); font-size: 11px;
			letter-spacing: 0.1em; text-transform: uppercase;
			color: var(--text-3); border: 1px solid var(--hairline-strong);
			padding: 3px 8px; border-radius: 4px;
		}
		.bento-code {
			font-family: var(--font-mono); font-size: 12.5px;
			background: var(--surface-2); border: 1px solid var(--hairline-strong);
			border-radius: 7px; padding: 14px 16px; color: var(--text-2);
			line-height: 1.7; margin-top: 8px; overflow-x: auto;
		}
		.bento-code .kw { color: var(--text-3); }
		.bento-code .val { color: var(--text); }
		.bento-code .str { color: #c8c8c8; }

		/* ── FEATURE SPLIT SECTIONS ──────────────────────────────── */
		.feat-split {
			display: grid; grid-template-columns: 1fr 1fr;
			gap: 80px; align-items: center;
		}
		@media (max-width: 980px) { .feat-split { grid-template-columns: 1fr; gap: 48px; } }
		.feat-split.rev { direction: rtl; }
		.feat-split.rev > * { direction: ltr; }
		@media (max-width: 980px) { .feat-split.rev { direction: ltr; } }
		.feat-text { display: flex; flex-direction: column; gap: 20px; }
		.feat-eyebrow {
			font-family: var(--font-mono); font-size: 11px;
			letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
		}
		.feat-h {
			font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 44px);
			line-height: 1.05; letter-spacing: -0.03em;
			font-weight: 600; margin: 0; color: var(--text);
		}
		.feat-h em { font-style: normal; color: var(--text-3); font-weight: 500; }
		.feat-body { font-size: 16px; color: var(--text-2); line-height: 1.6; margin: 0; }
		.feat-list {
			list-style: none; padding: 0; margin: 0;
			display: flex; flex-direction: column; gap: 10px;
		}
		.feat-list li {
			display: flex; align-items: flex-start; gap: 12px;
			font-size: 14.5px; color: var(--text-2); line-height: 1.5;
		}
		.feat-list li::before {
			content: ""; width: 5px; height: 5px; border-radius: 50%;
			background: var(--text-3); flex-shrink: 0; margin-top: 7px;
		}
		.feat-list li strong { color: var(--text); font-weight: 550; }
		.feat-visual {
			border: 1px solid var(--hairline-strong);
			border-radius: 14px; overflow: hidden;
			background: var(--surface-0);
			position: relative;
		}
		.feat-visual img { width: 100%; display: block; }
		.feat-visual-inner {
			padding: 28px; display: flex; flex-direction: column; gap: 16px;
		}
		.feat-visual-label {
			font-family: var(--font-mono); font-size: 10.5px;
			letter-spacing: 0.18em; text-transform: uppercase;
			color: var(--text-3); padding: 14px 18px;
			border-bottom: 1px solid var(--hairline);
		}

		/* Walk embed preview */
		.walk-preview-wrap {
			display: flex; flex-direction: column; gap: 0;
		}
		.walk-preview-canvas-area {
			position: relative; aspect-ratio: 16 / 9;
			background: #0f0f0f; overflow: hidden; cursor: grab;
		}
		.walk-preview-canvas-area:active { cursor: grabbing; }
		.walk-preview-canvas {
			display: block; width: 100%; height: 100%;
		}
		.walk-preview-loading {
			position: absolute; inset: 0; display: flex;
			flex-direction: column; align-items: center;
			justify-content: center; gap: 12px;
			background: #0f0f0f; z-index: 4;
			font-family: var(--font-mono); font-size: 11px;
			color: var(--text-3); letter-spacing: 0.1em;
			transition: opacity var(--duration-slow) var(--ease-standard);
		}
		.walk-preview-loading.is-done { opacity: 0; pointer-events: none; }
		.walk-preview-retry {
			margin-top: 4px; padding: 7px 16px;
			font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
			text-transform: uppercase; color: var(--text);
			background: transparent; border: 1px solid var(--hairline-strong);
			border-radius: 6px; cursor: pointer;
			transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
		}
		.walk-preview-retry:hover { border-color: var(--text-2); background: rgba(255,255,255,0.04); }
		.walk-preview-retry:active { transform: translateY(1px); }
		.walk-preview-retry:focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; }
		.walk-preview-spinner {
			width: 24px; height: 24px; border: 2px solid var(--hairline-strong);
			border-top-color: var(--text-2); border-radius: 50%;
			animation: walk-spin 0.8s linear infinite;
		}
		@keyframes walk-spin { to { transform: rotate(360deg); } }
		.walk-preview-hint {
			position: absolute; bottom: 10px; left: 50%;
			transform: translateX(-50%); display: flex; gap: 14px;
			font-family: var(--font-mono); font-size: 9.5px;
			color: var(--text-2); letter-spacing: 0.06em;
			opacity: 0.85; pointer-events: none; z-index: 3;
			white-space: nowrap;
		}
		.walk-preview-hint kbd {
			display: inline-block; padding: 1px 4px;
			border: 1px solid var(--hairline-strong);
			border-radius: 3px; font-family: var(--font-mono);
			font-size: 9px; color: var(--text-3);
			background: var(--surface-2); margin: 0 1px;
		}
		.walk-preview-joystick {
			position: absolute; bottom: 14px; right: 14px;
			width: 90px; height: 90px; z-index: 5;
		}
		@media (min-width: 768px) {
			.walk-preview-joystick { display: none; }
		}
		@media (max-width: 767px) {
			.walk-preview-hint { display: none; }
			.walk-preview-joystick { display: block; }
		}

		/* Buy/sell semantic colors — the one place on the page we go full color.
		   Everything else is monochrome; trading flow earns real green/red. */
		:root { --buy: #2ecc71; --sell: #ff5c5c; }

		/* Pump.fun earn rows */
		.earn-rows { display: flex; flex-direction: column; gap: 1px; }
		.earn-row {
			background: var(--surface-1); padding: 14px 18px;
			display: flex; justify-content: space-between; align-items: center;
			border-bottom: 1px solid var(--hairline);
			animation: earn-row-in 0.32s cubic-bezier(.22,.68,0,.98);
		}
		@keyframes earn-row-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
		.earn-row:last-child { border-bottom: none; }
		.earn-row-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
		.earn-row-name { font-size: 14px; font-weight: 500; color: var(--text); }
		.earn-row-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
		.earn-row-amount { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--green); display: flex; align-items: baseline; gap: 7px; }
		.earn-row-amount.buy { color: var(--buy); }
		.earn-row-amount.sell { color: var(--sell); }
		.hlt-usd { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--text-3); }
		.hlt-side { font-weight: 700; }
		.hlt-side.buy { color: var(--buy); }
		.hlt-side.sell { color: var(--sell); }
		.hlt-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--buy); box-shadow: 0 0 6px var(--buy); margin-right: 7px; vertical-align: middle; animation: hlt-pulse 1.4s ease-in-out infinite; }
		@keyframes hlt-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
		.hlt-idle .earn-row-name { color: var(--text-3); font-weight: 500; }
		.hlt-skel { pointer-events: none; }
		.hlt-skel-bar { height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-2, #1a1a1a) 25%, rgba(255,255,255,0.06) 50%, var(--surface-2, #1a1a1a) 75%); background-size: 200% 100%; animation: hlt-shimmer 1.3s linear infinite; }
		@keyframes hlt-shimmer { to { background-position: -200% 0; } }

		/* Token card */
		.token-card {
			background: var(--surface-1); border: 1px solid var(--hairline-strong);
			border-radius: 10px; padding: 18px; display: flex; gap: 14px; align-items: center;
		}
		.token-avatar {
			width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
			background: linear-gradient(135deg, #2b2b2b 0%, #161616 100%);
			display: flex; align-items: center; justify-content: center;
			font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #fff;
		}
		.token-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
		.token-info { flex: 1; min-width: 0; }
		.token-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
		.token-ticker { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
		.token-price { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--green); white-space: nowrap; transition: color var(--duration-base); }
		.token-price.up { color: var(--buy); }
		.token-price.down { color: var(--sell); }
		a.token-price { text-decoration: none; }

		/* ── STEPS ───────────────────────────────────────────────── */
		.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; }
		@media (max-width: 980px) { .steps { grid-template-columns: 1fr; gap: 48px; } }
		.step { border-top: 1px solid var(--hairline-strong); padding-top: 28px; }
		.step-num { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.18em; color: var(--text-3); margin-bottom: 22px; }
		.step-title { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.025em; font-weight: 600; margin: 0 0 12px; }
		.step-body { color: var(--text-2); font-size: 15px; line-height: 1.55; margin: 0; }

		/* ── SHOWCASE 3D ─────────────────────────────────────────── */
		.showcase-3d { perspective: 1200px; perspective-origin: 50% 40%; }
		.showcase-3d-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
		@media (max-width: 1080px) { .showcase-3d-grid { grid-template-columns: repeat(2, 1fr); } }
		@media (max-width: 560px) { .showcase-3d-grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; } }
		.showcase-agent-card {
			position: relative; aspect-ratio: 3 / 4; border-radius: 16px;
			overflow: hidden; background: var(--surface-0); border: 1px solid var(--hairline);
			transform-style: preserve-3d;
			transform: rotateX(0) rotateY(0) translateZ(0);
			transition: transform var(--duration-slow) cubic-bezier(.22,.68,0,.98), box-shadow var(--duration-slow), border-color var(--duration-base);
			cursor: pointer; text-decoration: none; display: block;
		}
		.showcase-agent-card:hover {
			transform: translateZ(24px) scale(1.03);
			border-color: rgba(255,255,255,0.12);
			box-shadow: 0 20px 60px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
		}
		.showcase-agent-card agent-3d {
			position: absolute; inset: 0; width: 100%; height: 100%;
			display: block; opacity: 0; transition: opacity var(--duration-slow) var(--ease-standard);
		}
		.showcase-agent-card agent-3d.loaded { opacity: 1; }
		.showcase-card-grad { position: absolute; inset: 0; z-index: 0; opacity: 0.5; transition: opacity var(--duration-slow); }
		.showcase-agent-card:hover .showcase-card-grad { opacity: 0.7; }
		.showcase-card-floor {
			position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
			background: linear-gradient(180deg, transparent 0%, rgba(5,5,5,0.95) 100%);
			z-index: 1; pointer-events: none;
		}
		.showcase-card-meta {
			position: absolute; bottom: 0; left: 0; right: 0;
			padding: 18px 16px; z-index: 3; color: var(--text);
		}
		.showcase-card-name {
			font-family: var(--font-display); font-size: 15px; font-weight: 600;
			letter-spacing: -0.015em; margin: 0 0 3px;
			white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		}
		.showcase-card-sub {
			font-family: var(--font-mono); font-size: 10px; color: var(--text-3);
			letter-spacing: 0.08em; text-transform: uppercase;
		}
		.showcase-card-tag {
			position: absolute; top: 12px; left: 12px; z-index: 4;
			font-family: var(--font-mono); font-size: 9.5px;
			letter-spacing: 0.18em; text-transform: uppercase; color: var(--text);
			padding: 3px 8px; background: rgba(5,5,5,0.55);
			border: 1px solid var(--hairline-strong); border-radius: 99px;
		}
		.showcase-card-anim-tag {
			position: absolute; top: 12px; right: 12px; z-index: 4;
			font-family: var(--font-mono); font-size: 9px;
			letter-spacing: 0.08em; color: rgba(255,255,255,0.35); text-transform: lowercase;
		}
		.showcase-card-skel {
			position: absolute; inset: 0;
			display: flex; align-items: center; justify-content: center; z-index: 0;
		}
		.showcase-card-skel-ring {
			width: 32px; height: 32px;
			border: 2px solid rgba(255,255,255,0.08); border-top-color: rgba(255,255,255,0.25);
			border-radius: 50%; animation: showcase-spin 0.9s linear infinite;
		}
		@keyframes showcase-spin { to { transform: rotate(360deg); } }
		.showcase-cta-card {
			position: relative; aspect-ratio: 3 / 4; border-radius: 16px;
			overflow: hidden; border: 1px solid var(--hairline);
			display: flex; flex-direction: column; align-items: center; justify-content: center;
			text-align: center; text-decoration: none; background: var(--surface-0);
			transition: transform var(--duration-slow) cubic-bezier(.22,.68,0,.98), border-color var(--duration-base), background var(--duration-base);
			cursor: pointer; gap: 10px; padding: 24px;
		}
		.showcase-cta-card:hover {
			transform: translateZ(12px) scale(1.02);
			border-color: rgba(255,255,255,0.15); background: var(--surface-1);
		}
		.showcase-cta-icon { font-size: 28px; opacity: 0.4; transition: opacity var(--duration-base); }
		.showcase-cta-card:hover .showcase-cta-icon { opacity: 0.7; }
		.showcase-cta-label {
			font-family: var(--font-display); font-size: 15px; font-weight: 600;
			color: var(--text); letter-spacing: -0.01em;
		}
		.showcase-cta-sub {
			font-family: var(--font-mono); font-size: 10px; color: var(--text-3);
			letter-spacing: 0.06em; text-transform: uppercase;
		}

		/* ── DEVELOPER SECTION / API PLAYGROUND ──────────────────── */
		.dev-grid {
			display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 1px;
			background: var(--hairline); border: 1px solid var(--hairline);
			border-radius: 14px; overflow: hidden;
		}
		@media (max-width: 980px) { .dev-grid { grid-template-columns: 1fr; } }
		.dev-pane { background: var(--surface-0); padding: 0; }
		.dev-pane-head {
			padding: 14px 20px; border-bottom: 1px solid var(--hairline);
			font-family: var(--font-mono); font-size: 11.5px;
			letter-spacing: 0.12em; color: var(--text-3);
			display: flex; justify-content: space-between; align-items: center;
		}
		.dev-tabs {
			display: flex; gap: 0; border-bottom: 1px solid var(--hairline);
		}
		.dev-tab {
			padding: 10px 18px; font-family: var(--font-mono); font-size: 11px;
			letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
			cursor: pointer; border-bottom: 2px solid transparent;
			transition: color var(--duration-fast), border-color var(--duration-fast); user-select: none;
			background: none; border-top: none; border-left: none; border-right: none;
		}
		.dev-tab:hover { color: var(--text-2); }
		.dev-tab:focus-visible { outline: var(--focus-ring-width,2px) solid var(--focus-ring-color,var(--accent)); outline-offset: -2px; }
		.dev-tab.active { color: var(--text); border-bottom-color: var(--text); }
		.dev-tab-content { display: none; }
		.dev-tab-content.active { display: block; }
		.dev-code {
			font-family: var(--font-mono); font-size: 12.5px;
			line-height: 1.8; padding: 24px 24px; color: var(--text-2);
			overflow-x: auto;
		}
		.dev-code .kw  { color: var(--text-3); }
		.dev-code .fn  { color: var(--text); font-weight: 500; }
		.dev-code .str { color: #c5c5c5; }
		.dev-code .cmt { color: var(--text-4); }
		.dev-code .num { color: #b0b0b0; }
		.dev-links { padding: 16px 24px; border-top: 1px solid var(--hairline); }
		.dev-links-row { display: flex; gap: 10px; flex-wrap: wrap; }
		.dev-link {
			display: inline-flex; align-items: center; gap: 7px;
			padding: 7px 13px; border-radius: 6px;
			border: 1px solid var(--hairline-strong);
			font-size: 13px; font-weight: 500; color: var(--text-2);
			transition: border-color var(--duration-fast), color var(--duration-fast);
		}
		.dev-link:hover { border-color: var(--text); color: var(--text); }
		.dev-right { display: flex; flex-direction: column; }
		.dev-api-row {
			width: 100%; text-align: left; font: inherit; color: inherit;
			background: transparent; border: none;
			padding: 14px 20px; border-bottom: 1px solid var(--hairline);
			display: flex; flex-direction: column; gap: 4px;
			cursor: pointer; transition: background var(--duration-fast);
		}
		.dev-api-row:hover { background: var(--surface-1); }
		.dev-api-row:focus-visible {
			outline: var(--focus-ring-width,2px) solid var(--focus-ring-color,var(--accent));
			outline-offset: -2px;
		}
		.dev-api-row.active {
			background: var(--surface-2);
			box-shadow: inset 3px 0 0 var(--text-3);
		}
		.dev-api-method {
			font-family: var(--font-mono); font-size: 11px;
			letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
		}
		.dev-api-path {
			font-family: var(--font-mono); font-size: 13px; color: var(--text);
		}
		.dev-api-desc { font-size: 12px; color: var(--text-3); }
		.dev-badge {
			display: inline-block; font-family: var(--font-mono); font-size: 10px;
			letter-spacing: 0.1em; text-transform: uppercase;
			padding: 2px 7px; border-radius: 4px; font-weight: 700;
			min-width: 36px; text-align: center;
		}
		.dev-badge.get  { background: rgba(74,222,128,0.12); color: var(--success); }
		.dev-badge.post { background: rgba(96,165,250,0.12); color: #60a5fa; }
		.dev-badge.mcp  { background: rgba(255,92,168,0.12); color: #ff8cc8; }

		/* ── Playground request builder ──────────────────────────── */
		.pg-request { padding: 20px 24px; }
		.pg-field { margin-bottom: 14px; }
		.pg-field-label {
			font-family: var(--font-mono); font-size: 10.5px;
			letter-spacing: 0.12em; text-transform: uppercase;
			color: var(--text-3); margin-bottom: 6px; display: block;
		}
		.pg-input {
			width: 100%; background: var(--surface-2); border: 1px solid var(--hairline-strong);
			border-radius: 6px; padding: 9px 12px; color: var(--text);
			font-family: var(--font-mono); font-size: 12.5px; outline: none;
			transition: border-color var(--duration-fast);
		}
		.pg-input:focus { border-color: var(--text-3); }
		.pg-input:focus-visible, .pg-url-path:focus-visible {
			outline: var(--focus-ring-width,2px) solid var(--focus-ring-color,var(--accent));
			outline-offset: var(--focus-ring-offset,2px);
		}
		.pg-input::placeholder { color: var(--text-4); }
		textarea.pg-input { min-height: 80px; resize: vertical; line-height: 1.6; }
		.pg-url-bar {
			display: flex; align-items: center; gap: 0;
			background: var(--surface-2); border: 1px solid var(--hairline-strong);
			border-radius: 6px; overflow: hidden; margin-bottom: 16px;
		}
		.pg-url-method {
			padding: 9px 12px; font-family: var(--font-mono); font-size: 11px;
			font-weight: 700; letter-spacing: 0.08em; color: var(--success);
			border-right: 1px solid var(--hairline-strong); background: var(--surface-1);
			min-width: 52px; text-align: center; user-select: none;
		}
		.pg-url-method.post { color: #60a5fa; }
		.pg-url-path {
			flex: 1; padding: 9px 12px; font-family: var(--font-mono); font-size: 12.5px;
			color: var(--text-2); background: transparent; border: none; outline: none;
		}
		.pg-url-path::placeholder { color: var(--text-4); }
		.pg-send {
			padding: 9px 20px; background: var(--text); color: var(--bg);
			font-family: var(--font-mono); font-size: 11px; font-weight: 700;
			letter-spacing: 0.1em; text-transform: uppercase; border: none;
			border-radius: 6px; cursor: pointer; transition: opacity var(--duration-fast);
		}
		.pg-send:hover { opacity: 0.85; }
		.pg-send:active { opacity: 0.7; }
		.pg-send:disabled { opacity: 0.4; cursor: not-allowed; }
		.pg-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
		.pg-status {
			font-family: var(--font-mono); font-size: 11px;
			letter-spacing: 0.05em; color: var(--text-3);
		}
		.pg-status.ok { color: var(--success); }
		.pg-status.err { color: var(--danger); }
		.pg-status.warn { color: var(--warn); }
		.pg-status.err::before { background: var(--danger); box-shadow: 0 0 5px var(--danger); }
		.pg-status.warn::before { background: var(--warn); box-shadow: 0 0 5px var(--warn); }
		.pg-key-field { margin-bottom: 16px; }
		.pg-key-hint {
			float: right; text-transform: none; letter-spacing: 0;
			color: var(--text-3); text-decoration: none; font-size: 10.5px;
			transition: color var(--duration-fast);
		}
		.pg-key-hint:hover { color: var(--text); }
		.pg-response {
			background: var(--surface-1); border: 1px solid var(--hairline);
			border-radius: 8px; overflow: hidden;
		}
		.pg-response-head {
			padding: 10px 16px; border-bottom: 1px solid var(--hairline);
			font-family: var(--font-mono); font-size: 10.5px;
			letter-spacing: 0.1em; text-transform: uppercase;
			color: var(--text-3); display: flex; justify-content: space-between;
		}
		.pg-response-body {
			padding: 16px; font-family: var(--font-mono); font-size: 12px;
			line-height: 1.7; color: var(--text-2); max-height: 260px;
			overflow-y: auto; white-space: pre-wrap; word-break: break-all;
		}
		.pg-response-body::-webkit-scrollbar { width: 5px; }
		.pg-response-body::-webkit-scrollbar-track { background: transparent; }
		.pg-response-body::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 3px; }
		.pg-empty {
			padding: 40px 24px; text-align: center; color: var(--text-3);
			font-size: 13px; line-height: 1.6;
		}
		.pg-empty-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.3; }
		.pg-response-body .json-key { color: #60a5fa; }
		.pg-response-body .json-str { color: var(--success); }
		.pg-response-body .json-num { color: var(--warn); }
		.pg-response-body .json-bool { color: var(--accent); }
		.pg-response-body .json-null { color: var(--text-4); }
		.pg-curl-code {
			font-family: var(--font-mono); font-size: 12px;
			line-height: 1.8; padding: 24px; color: var(--text-2);
			white-space: pre-wrap; word-break: break-all;
		}
		.pg-copy {
			padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--hairline-strong);
			border-radius: 4px; color: var(--text-3); font-family: var(--font-mono);
			font-size: 10px; letter-spacing: 0.1em; cursor: pointer;
			transition: color var(--duration-fast), border-color var(--duration-fast);
		}
		.pg-copy:hover { color: var(--text); border-color: var(--text-3); }

		/* ── BOTTOM CTA ──────────────────────────────────────────── */
		.cta-card {
			padding: 80px 64px; border: 1px solid var(--hairline-strong);
			border-radius: 16px; text-align: center; background: var(--surface-0);
		}
		.cta-card h2 {
			font-family: var(--font-display); font-size: clamp(30px, 4vw, 50px);
			line-height: 1.0; letter-spacing: -0.035em; font-weight: 600; margin: 0 0 18px;
		}
		.cta-card p { color: var(--text-2); font-size: 17px; margin: 0 0 36px; }
		.cta-card .cta-row { justify-content: center; }
		@media (max-width: 720px) { .cta-card { padding: 48px 24px; } }

		/* ── FOOTER ──────────────────────────────────────────────── */
		footer { border-top: 1px solid var(--hairline); padding: 60px 0 52px; }
		.foot-cols {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			gap: 32px; margin-bottom: 44px;
			padding-bottom: 40px; border-bottom: 1px solid var(--hairline);
		}
		.foot-col { display: flex; flex-direction: column; gap: 9px; }
		.foot-col-h {
			font-family: var(--font-mono); font-size: 10px; font-weight: 400;
			text-transform: uppercase; letter-spacing: 0.18em;
			color: var(--text-3); margin: 0 0 6px;
		}
		.foot-col a {
			color: var(--text-3); font-size: 13px;
			transition: color var(--duration-fast);
		}
		.foot-col a:hover, .foot-col a:focus-visible { color: var(--text); }
		@media (max-width: 880px) {
			.foot-cols { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
		}
		@media (max-width: 460px) {
			.foot-cols { grid-template-columns: 1fr 1fr; }
		}
		.foot-inner {
			display: flex; justify-content: space-between; align-items: center;
			gap: 20px; flex-wrap: wrap;
			color: var(--text-3); font-size: 12px; font-family: var(--font-mono);
			letter-spacing: 0.04em;
		}
		.foot-ca {
			display: flex; align-items: center; gap: 8px;
			background: var(--surface-1); border: 1px solid var(--stroke);
			border-radius: 6px; padding: 5px 11px 5px 10px; cursor: pointer;
			font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
			transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
		}
		.foot-ca:hover, .foot-ca:focus-visible {
			background: var(--surface-2); border-color: var(--stroke-strong);
			color: var(--text);
		}
		.foot-ca-label {
			color: #7ec8f8; font-weight: 700; font-size: 10.5px;
			text-transform: uppercase; letter-spacing: 0.10em;
		}
		/* No opacity dim: text-3 at .55 measured ~2.5:1 (axe AA needs 4.5:1),
		   and the $AXIS contract address should be legible anyway. */
		.foot-ca-addr { font-size: 10.5px; }
		.foot-ca { min-width: 0; max-width: 100%; }
		.foot-ca-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
		@media (max-width: 480px) { .foot-inner { flex-direction: column; align-items: flex-start; } .foot-ca { width: 100%; justify-content: flex-start; } }

		/* ── HERO LOADING ───────────────────────────────────────── */
		/* Suppress the in-element skeleton silhouette on the hero — it lives in
		   the component's shadow DOM, so a light-DOM `.skeleton` selector can't
		   reach it; `::part(loading)` pierces the boundary. The hero fades the
		   whole agent-3d in on `agent:ready`, so the model never appears under a
		   stale skeleton. */
		.hero-stage agent-3d::part(loading) { display: none !important; }
		.hero-stage agent-3d {
			position: absolute; inset: 0; display: block; width: 100%; height: 100%;
			opacity: 0; transition: opacity var(--duration-slow) cubic-bezier(.2,.7,.3,1);
		}
		.hero-stage agent-3d.loaded { opacity: 1; }

		/* ── REVEAL ANIMATIONS ──────────────────────────────────── */
		.reveal {
			opacity: 0; transform: translateY(32px);
			transition: opacity var(--duration-slow) cubic-bezier(.2,.7,.3,1), transform var(--duration-slow) cubic-bezier(.2,.7,.3,1);
		}
		.reveal.vis { opacity: 1; transform: translateY(0); }
		.reveal-d1 { transition-delay: 0.08s; }
		.reveal-d2 { transition-delay: 0.16s; }

		/* ── HERO TEXT ENTRANCE ──────────────────────────────────── */
		.hero-text > * {
			opacity: 0; transform: translateY(24px);
			transition: opacity var(--duration-slow) cubic-bezier(.2,.7,.3,1), transform var(--duration-slow) cubic-bezier(.2,.7,.3,1);
		}
		.hero-text.entered > * { opacity: 1; transform: translateY(0); }
		.hero-text > *:nth-child(1) { transition-delay: 0.05s; }
		.hero-text > *:nth-child(2) { transition-delay: 0.12s; }
		.hero-text > *:nth-child(3) { transition-delay: 0.22s; }
		.hero-text > *:nth-child(4) { transition-delay: 0.32s; }
		.hero-text > *:nth-child(5) { transition-delay: 0.42s; }

		/* ── BENTO GLOW ─────────────────────────────────────────── */
		.bento-card { --bx: 50%; --by: 50%; }
		.bento-card::before {
			content: ""; position: absolute; inset: 0; pointer-events: none;
			background: radial-gradient(600px circle at var(--bx) var(--by), rgba(255,255,255,0.04), transparent 40%);
			opacity: 0; transition: opacity var(--duration-base);
		}
		.bento-card:hover::before { opacity: 1; }

		/* ── ENHANCED INTERACTIVE STATES ─────────────────────────── */
		.copy-btn:focus-visible {
			outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px;
		}
		.door-screenshot img[src] { transition: transform var(--duration-slow) cubic-bezier(.2,.7,.3,1); }
		.door:hover .door-screenshot img { transform: scale(1.03); }

		@keyframes stat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
		.stat-animated { animation: stat-in 0.5s cubic-bezier(.2,.7,.3,1) both; }

		/* ── ACCESSIBILITY ──────────────────────────────────────── */
		@media (prefers-reduced-motion: reduce) {
			.reveal, .hero-text > * { opacity: 1 !important; transform: none !important; transition: none !important; }
			.hero-stage agent-3d { opacity: 1 !important; transition: none !important; }
		}

		/* ── HERO ANIMATION CHIPS ────────────────────────────────── */
		.hero-chips-wrap {
			position: absolute;
			bottom: 0; left: 0; right: 0;
			z-index: 10;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;
			padding: 32px 20px 20px;
			background: linear-gradient(0deg, rgba(5,5,5,0.75) 0%, transparent 100%);
			pointer-events: none;
		}
		.hero-chips-wrap > * { pointer-events: auto; }
		.hero-chips-label {
			font-family: var(--font-mono);
			font-size: 10px;
			letter-spacing: 0.22em;
			text-transform: uppercase;
			color: var(--text-3);
			display: flex;
			align-items: center;
			gap: 8px;
		}
		.hero-chips-label::before {
			content: "";
			display: inline-block;
			width: 5px; height: 5px;
			border-radius: 50%;
			background: var(--text-3);
			box-shadow: 0 0 5px var(--text-3);
			animation: pulse-green 2.4s ease-in-out infinite;
		}
		.hero-chips {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 6px;
		}
		.hero-chip {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 7px 13px;
			border-radius: 6px;
			background: rgba(5,5,5,0.6);
			border: 1px solid var(--hairline-strong);
			color: var(--text-3);
			font: 500 12.5px/1 var(--font-body);
			cursor: pointer;
			transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
			user-select: none;
		}
		.hero-chip:hover {
			border-color: rgba(255,255,255,0.4);
			color: var(--text);
			background: rgba(255,255,255,0.06);
		}
		.hero-chip[data-active="true"] {
			border-color: rgba(255,255,255,0.55);
			color: var(--text);
			background: rgba(255,255,255,0.1);
		}
		.hero-chips-counter {
			font-family: var(--font-mono);
			font-size: 10px;
			letter-spacing: 0.12em;
			color: var(--text-3);
		}
		.hero-chips-counter strong { color: var(--text-3); font-weight: 600; }
		@media (max-width: 980px) {
			.hero-chips-label, .hero-chips { display: none; }
			.hero-chips-wrap { padding: 20px; background: linear-gradient(0deg, rgba(5,5,5,0.7) 0%, transparent 100%); }
		}
		@media (prefers-reduced-motion: reduce) {
			.hero-chips-label::before { animation: none !important; }
		}

		/* ── 3D STACK GRID ───────────────────────────────────────────── */
		.stack-3d {
			perspective: 1400px;
			perspective-origin: 50% 40%;
		}
		.stack-3d-scene {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1px;
			background: var(--hairline);
			border: 1px solid var(--hairline);
			border-radius: 14px;
			overflow: hidden;
			transform-style: preserve-3d;
			transform: rotateX(0deg) rotateY(0deg);
			transition: transform var(--duration-slow) cubic-bezier(0.23, 1, 0.32, 1);
			will-change: transform;
		}
		.stack-card {
			position: relative;
			background: var(--surface-0);
			padding: 40px 32px 36px;
			display: flex;
			flex-direction: column;
			gap: 10px;
			text-decoration: none;
			color: var(--text);
			transition:
				background var(--duration-base) var(--ease-standard),
				opacity var(--duration-slow) var(--ease-standard);
			cursor: pointer;
			overflow: hidden;
			min-height: 210px;
		}
		.stack-card::before {
			content: '';
			position: absolute;
			inset: 0;
			opacity: 0;
			background: radial-gradient(
				600px circle at var(--mx, 50%) var(--my, 50%),
				rgba(255,255,255,0.045),
				transparent 40%
			);
			transition: opacity var(--duration-slow) var(--ease-standard);
			pointer-events: none;
			z-index: 1;
		}
		.stack-card:hover::before { opacity: 1; }
		.stack-card::after {
			content: '';
			position: absolute;
			inset: -1px;
			border-radius: inherit;
			opacity: 0;
			background: radial-gradient(
				400px circle at var(--mx, 50%) var(--my, 50%),
				rgba(255,255,255,0.13),
				transparent 40%
			);
			mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
			mask-composite: exclude;
			-webkit-mask-composite: xor;
			padding: 1px;
			transition: opacity var(--duration-slow) var(--ease-standard);
			pointer-events: none;
			z-index: 2;
		}
		.stack-card:hover::after { opacity: 1; }
		.stack-card:hover {
			background: var(--surface-1);
			z-index: 3;
		}
		.stack-3d-scene:hover .stack-card:not(:hover) {
			opacity: 0.55;
		}
		.stack-card-num {
			font-family: var(--font-mono);
			font-size: 11px;
			letter-spacing: 0.18em;
			color: var(--text-3);
			margin-bottom: 6px;
		}
		.stack-card-title {
			font-family: var(--font-display);
			font-size: clamp(22px, 2.2vw, 30px);
			font-weight: 600;
			letter-spacing: -0.025em;
			line-height: 1.1;
			margin: 0;
		}
		.stack-card-desc {
			color: var(--text-2);
			font-size: 14px;
			line-height: 1.55;
			margin: 0;
			flex: 1;
		}
		.stack-card-arrow {
			font-family: var(--font-mono);
			font-size: 16px;
			color: var(--text-4);
			align-self: flex-end;
			transition: color var(--duration-base), transform var(--duration-base);
		}
		.stack-card:hover .stack-card-arrow {
			color: var(--text);
			transform: translate(4px, -4px);
		}
		/* staggered entrance */
		.stack-3d .stack-card {
			opacity: 0;
			transform: translateY(30px);
			transition:
				background var(--duration-base) var(--ease-standard),
				opacity var(--duration-slow) cubic-bezier(0.23, 1, 0.32, 1),
				transform var(--duration-slow) cubic-bezier(0.23, 1, 0.32, 1);
		}
		.stack-3d.vis .stack-card {
			opacity: 1;
			transform: translateY(0);
		}
		.stack-3d.vis .stack-card:nth-child(1) { transition-delay: 0.04s; }
		.stack-3d.vis .stack-card:nth-child(2) { transition-delay: 0.09s; }
		.stack-3d.vis .stack-card:nth-child(3) { transition-delay: 0.14s; }
		.stack-3d.vis .stack-card:nth-child(4) { transition-delay: 0.19s; }
		.stack-3d.vis .stack-card:nth-child(5) { transition-delay: 0.24s; }
		.stack-3d.vis .stack-card:nth-child(6) { transition-delay: 0.29s; }
		.stack-3d.vis.settled .stack-card { transition-delay: 0s; }
		@media (max-width: 980px) {
			.stack-3d-scene { grid-template-columns: repeat(2, 1fr); }
			.stack-3d { perspective: 1000px; }
		}
		@media (max-width: 600px) {
			.stack-3d-scene { grid-template-columns: 1fr; }
			.stack-3d { perspective: none; }
			.stack-card { min-height: auto; padding: 28px 24px 24px; }
			.stack-3d .stack-card,
			.stack-3d .stack-card:hover,
			.stack-3d-scene:hover .stack-card:not(:hover) {
				transform: none !important; opacity: 1 !important;
			}
		}
		@media (prefers-reduced-motion: reduce) {
			.stack-card, .stack-3d-scene { transition: none !important; }
			.stack-3d .stack-card { opacity: 1 !important; transform: none !important; }
		}

		/* ── WHAT YOU GET ────────────────────────────────────────────── */
		.wyg-head {
			text-align: center; margin-bottom: 64px;
		}
		.wyg-eyebrow {
			font-family: var(--font-mono); font-size: 11.5px;
			letter-spacing: 0.22em; text-transform: uppercase;
			color: var(--text-3); margin: 0 0 20px;
		}
		.wyg-title {
			font-family: var(--font-display);
			font-size: clamp(36px, 4.8vw, 64px);
			line-height: 1.0; letter-spacing: -0.04em;
			font-weight: 600; margin: 0; color: var(--text);
		}
		.wyg-grid {
			display: grid;
			grid-template-columns: 1.15fr 0.85fr;
			gap: 1px;
			background: var(--hairline);
			border: 1px solid var(--hairline);
			border-radius: 16px;
			overflow: hidden;
		}
		@media (max-width: 1080px) { .wyg-grid { grid-template-columns: 1fr; } }

		.wyg-viewer {
			background: var(--surface-0);
			position: relative;
			min-height: 640px;
			display: flex; flex-direction: column;
		}
		@media (max-width: 1080px) { .wyg-viewer { min-height: 480px; } }
		@media (max-width: 600px) { .wyg-viewer { min-height: 380px; } }
		.wyg-viewer agent-3d {
			position: absolute; inset: 0; width: 100%; height: 100%;
			display: block;
			opacity: 0; transition: opacity var(--duration-slow) var(--ease-standard);
		}
		.wyg-viewer agent-3d.loaded { opacity: 1; }
		.wyg-viewer-skel {
			position: absolute; inset: 0;
			display: flex; align-items: center; justify-content: center;
		}
		.wyg-viewer-skel-ring {
			width: 32px; height: 32px;
			border: 2px solid rgba(255,255,255,0.08);
			border-top-color: rgba(255,255,255,0.25);
			border-radius: 50%;
			animation: showcase-spin 0.9s linear infinite;
		}
		.wyg-anim-bar {
			position: absolute; bottom: 0; left: 0; right: 0;
			z-index: 10;
			display: flex; flex-direction: column; gap: 8px;
			padding: 24px 20px 16px;
			background: linear-gradient(0deg, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0.5) 60%, transparent 100%);
		}
		.wyg-anim-head {
			display: flex; align-items: center; justify-content: space-between;
		}
		.wyg-anim-label {
			font-family: var(--font-mono); font-size: 10px;
			letter-spacing: 0.22em; text-transform: uppercase;
			color: var(--text-3);
		}
		.wyg-anim-stop {
			width: 14px; height: 14px;
			background: var(--text-3); border-radius: 2px;
			border: none; cursor: pointer;
			opacity: 0.5; transition: opacity var(--duration-fast);
			position: relative;
		}
		.wyg-anim-stop:hover { opacity: 1; }
		/* Touch: extend the hit area to 44px around the 14px glyph without
		   altering its visual size or the header layout (WCAG 2.5.8). */
		@media (hover: none) and (pointer: coarse) {
			.wyg-anim-stop::after {
				content: ''; position: absolute;
				top: 50%; left: 50%; transform: translate(-50%, -50%);
				width: 44px; height: 44px;
			}
		}
		.wyg-anim-scroll {
			display: flex; gap: 6px;
			overflow-x: auto; overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
			padding-bottom: 4px;
		}
		.wyg-anim-scroll::-webkit-scrollbar { display: none; }
		.wyg-anim-chip {
			display: inline-flex; flex-direction: column;
			align-items: center; gap: 4px;
			padding: 8px 10px 6px;
			border-radius: 10px;
			background: rgba(255,255,255,0.06);
			border: 1px solid var(--hairline-strong);
			color: var(--text-3);
			font: 500 10.5px/1 var(--font-body);
			cursor: pointer; user-select: none;
			transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
			white-space: nowrap; flex-shrink: 0;
			min-width: 64px;
		}
		.wyg-anim-chip:hover {
			border-color: rgba(255,255,255,0.3);
			color: var(--text);
			background: rgba(255,255,255,0.1);
		}
		.wyg-anim-chip[data-active="true"] {
			border-color: rgba(255,255,255,0.5);
			color: var(--text);
			background: rgba(255,255,255,0.12);
		}
		.wyg-anim-chip-icon { font-size: 18px; line-height: 1; }

		.wyg-cards {
			display: flex; flex-direction: column;
			background: var(--hairline); gap: 1px;
		}
		.wyg-card {
			background: var(--surface-0);
			padding: 28px 28px 24px;
			display: flex; flex-direction: column; gap: 8px;
			transition: background var(--duration-fast);
		}
		.wyg-card:hover { background: var(--surface-1); }
		.wyg-card-eyebrow {
			font-family: var(--font-mono); font-size: 10.5px;
			letter-spacing: 0.2em; text-transform: uppercase;
			margin: 0;
		}
		.wyg-card-eyebrow.clr-gold { color: #c9a94e; }
		.wyg-card-eyebrow.clr-teal { color: #5eadad; }
		.wyg-card-eyebrow.clr-purple { color: var(--ink-dim); }
		.wyg-card-eyebrow.clr-rose { color: #e879a0; }
		.wyg-card-eyebrow.clr-sky { color: #7ab8e0; }
		.wyg-card-eyebrow.clr-amber { color: #d4a04a; }
		.wyg-card-title {
			font-family: var(--font-display); font-size: 20px;
			font-weight: 600; letter-spacing: -0.02em; margin: 0;
		}
		.wyg-card-body {
			font-size: 14px; color: var(--text-2);
			line-height: 1.5; margin: 0;
		}
		.wyg-card-code {
			font-family: var(--font-mono); font-size: 12px;
			background: var(--surface-2); border: 1px solid var(--hairline-strong);
			border-radius: 8px; padding: 12px 14px;
			color: var(--text-2); line-height: 1.6; margin-top: 4px;
		}
		.wyg-card-pills {
			display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
		}
		.wyg-card-pill {
			display: inline-flex; align-items: center; gap: 6px;
			font-family: var(--font-mono); font-size: 11px;
			letter-spacing: 0.08em;
			color: var(--text-2);
			border: 1px solid var(--hairline-strong);
			padding: 4px 10px; border-radius: 99px;
		}
		.wyg-card-pill .dot {
			width: 7px; height: 7px; border-radius: 50%;
		}
		.wyg-card-link {
			font-size: 13.5px; font-weight: 500; color: var(--text);
			display: inline-flex; align-items: center; gap: 7px;
			margin-top: 4px; transition: gap var(--duration-fast);
		}
		.wyg-card:hover .wyg-card-link { gap: 10px; }
		.wyg-card-link::after { content: "\2192"; }

		/* ── V4-STYLE IMMERSIVE CLOSE ────────────────────────────────── */
		.vclose {
			position: relative; min-height: 100vh;
			display: flex; align-items: center; justify-content: center;
			overflow: hidden; border-top: 1px solid var(--hairline);
		}
		.vclose-agent {
			position: absolute; inset: 0; width: 100%; height: 100%;
			display: block; z-index: 1;
			opacity: 0; transition: opacity var(--duration-slow) cubic-bezier(.2,.7,.3,1);
		}
		.vclose-agent.loaded { opacity: 1; }
		.vclose-grid {
			position: absolute; inset: 0; z-index: 0; pointer-events: none;
			background-image:
				linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
				linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
			background-size: 60px 60px;
			mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
		}
		.vclose-vignette {
			position: absolute; inset: 0; z-index: 2; pointer-events: none;
			background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(5,5,5,0.92) 100%);
		}
		.vclose-overlay {
			position: relative; z-index: 3;
			display: flex; flex-direction: column; align-items: center;
			text-align: center; gap: 24px;
			padding: 80px 32px;
			max-width: 720px; margin: 0 auto;
		}
		.vclose-eyebrow {
			font-family: var(--font-mono); font-size: 11px;
			letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3);
			display: flex; align-items: center; gap: 8px;
		}
		.vclose-eyebrow::before {
			content: ""; width: 5px; height: 5px; border-radius: 50%;
			background: var(--text-3); box-shadow: 0 0 5px var(--text-3);
			animation: pulse-green 2.4s ease-in-out infinite;
		}
		.vclose-title {
			font-family: var(--font-display);
			font-size: clamp(48px, 7vw, 96px);
			line-height: 0.92; letter-spacing: -0.045em;
			font-weight: 600; margin: 0; color: var(--text);
		}
		.vclose-title em { font-style: normal; color: var(--text-3); font-weight: 500; }
		.vclose-sub {
			font-size: 17px; color: var(--text-2); max-width: 460px; line-height: 1.55; margin: 0;
		}
		.vclose-chips {
			display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
			margin-top: 8px;
		}
		@media (prefers-reduced-motion: reduce) {
			.vclose-eyebrow::before { animation: none !important; }
			.vclose-agent { opacity: 1 !important; transition: none !important; }
		}


		/* ── PLAYGROUND ──────────────────────────────────────────── */
		.pg {
			border: 1px solid var(--hairline); border-radius: 14px;
			overflow: hidden; background: var(--hairline);
			display: flex; flex-direction: column; gap: 1px;
		}
		.pg-toolbar {
			display: flex; align-items: center; justify-content: space-between;
			padding: 10px 16px; background: var(--surface-0);
		}
		.pg-tabs { display: flex; gap: 2px; }
		.pg-tab {
			padding: 5px 12px; border-radius: 5px;
			font-family: var(--font-mono); font-size: 11.5px;
			color: var(--text-3); background: transparent; border: 0;
			cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast);
		}
		.pg-tab:hover { color: var(--text-2); }
		.pg-tab.active { background: var(--surface-2); color: var(--text); }
		.pg-toolbar-end { display: flex; gap: 6px; align-items: center; }
		.pg-copy {
			background: transparent; color: var(--text);
			border: 1px solid var(--hairline-strong);
			padding: 5px 12px; border-radius: 6px;
			font-family: var(--font-mono); font-size: 11.5px;
			cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast);
		}
		.pg-copy:hover { border-color: var(--text); }
		.pg-copy.copied { background: var(--text); color: var(--bg); border-color: var(--text); }

		/* Controls strip */
		.pg-controls {
			display: flex; gap: 1px; background: var(--hairline);
		}
		@media (max-width: 980px) { .pg-controls { flex-wrap: wrap; } }
		.pg-control-group {
			background: var(--surface-0); padding: 10px 16px;
			display: flex; align-items: center; gap: 10px;
		}
		.pg-avatars-group { flex: 1.5; min-width: 0; overflow: hidden; }
		.pg-control-label {
			font-family: var(--font-mono); font-size: 10px;
			letter-spacing: 0.18em; text-transform: uppercase;
			color: var(--text-3); flex-shrink: 0;
		}
		.pg-chips { display: flex; gap: 4px; flex-wrap: wrap; }
		.pg-chip {
			padding: 4px 10px; border-radius: 5px;
			font-family: var(--font-mono); font-size: 11px;
			color: var(--text-3); background: transparent;
			border: 1px solid var(--hairline-strong); cursor: pointer;
			transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
			white-space: nowrap;
		}
		.pg-chip:hover { border-color: var(--text-3); color: var(--text-2); }
		.pg-chip.active {
			border-color: rgba(255,255,255,0.5); color: var(--text);
			background: rgba(255,255,255,0.08);
		}

		/* Avatar row */
		.pg-avatar-row {
			display: flex; gap: 6px; overflow-x: auto;
			scrollbar-width: none; padding: 2px;
		}
		.pg-avatar-row::-webkit-scrollbar { display: none; }
		.pg-avatar-item {
			flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
			border: 2px solid transparent; cursor: pointer; overflow: hidden;
			transition: border-color var(--duration-fast), transform var(--duration-fast);
			background: var(--surface-2); padding: 0;
		}
		.pg-avatar-item:hover { border-color: var(--text-3); transform: scale(1.1); }
		.pg-avatar-item.active { border-color: var(--text); }
		.pg-avatar-item img {
			width: 100%; height: 100%; object-fit: cover; display: block;
			border-radius: 50%;
		}
		.pg-avatar-item .pg-avatar-initial {
			width: 100%; height: 100%; display: none;
			align-items: center; justify-content: center;
			font-family: var(--font-mono); font-size: 11px; font-weight: 600;
			color: var(--text-3); text-transform: uppercase; line-height: 1;
		}

		/* Split: code + preview */
		.pg-split {
			display: grid; grid-template-columns: 1fr 1fr;
			gap: 1px; background: var(--hairline); min-height: 480px;
		}
		@media (max-width: 980px) { .pg-split { grid-template-columns: 1fr; } }

		.pg-left {
			background: var(--surface-0);
			display: flex; flex-direction: column;
		}
		.pg-editor-head {
			padding: 10px 16px; border-bottom: 1px solid var(--hairline);
			font-family: var(--font-mono); font-size: 11px;
			color: var(--text-4); letter-spacing: 0.08em;
		}

		/* Editor: textarea overlay on pre for highlighting */
		.pg-editor {
			position: relative; flex: 1; min-height: 320px;
		}
		.pg-editor:focus-within {
			outline: var(--focus-ring-width,2px) solid var(--focus-ring-color,var(--accent));
			outline-offset: -2px;
		}
		.pg-editor textarea,
		.pg-editor pre {
			font-family: var(--font-mono); font-size: 13px; line-height: 1.75;
			padding: 20px 24px; margin: 0; border: 0;
			position: absolute; top: 0; left: 0;
			width: 100%; height: 100%;
			white-space: pre; word-wrap: normal; overflow-wrap: normal;
			tab-size: 2; box-sizing: border-box; overflow: auto;
		}
		.pg-editor textarea {
			resize: none; background: transparent;
			color: transparent; caret-color: var(--text);
			z-index: 2; outline: none;
			-webkit-text-fill-color: transparent;
		}
		.pg-editor pre {
			pointer-events: none; z-index: 1;
			color: var(--text-2); background: transparent;
		}
		.pg-editor pre .tag  { color: #d3d3d3; }
		.pg-editor pre .attr { color: #989898; }
		.pg-editor pre .str  { color: #f6f6f6; }
		.pg-editor pre .com  { color: var(--text-4); }
		.pg-editor pre .kw   { color: var(--text-3); }

		.pg-right {
			background: var(--surface-0);
			display: flex; flex-direction: column; position: relative;
		}
		.pg-preview-head {
			padding: 10px 16px; border-bottom: 1px solid var(--hairline);
			font-family: var(--font-mono); font-size: 11px;
			color: var(--text-4); letter-spacing: 0.08em;
			display: flex; justify-content: space-between; align-items: center;
		}
		.pg-status {
			color: var(--text-3); display: flex; align-items: center; gap: 6px;
		}
		.pg-status::before {
			content: ""; width: 5px; height: 5px; border-radius: 50%;
			background: var(--green); box-shadow: 0 0 5px var(--green);
			animation: pulse-green 2.4s ease-in-out infinite;
		}
		.pg-preview {
			flex: 1; position: relative; min-height: 340px;
			transition: background-color var(--duration-base);
			overflow: hidden;
		}
		.pg-preview agent-3d {
			position: absolute; inset: 0; display: block;
			width: 100%; height: 100%;
		}
		/* Shown only when no avatar GLB could be resolved (API + fallback pool
		   both unreachable) — mirrors the other sections' designed error states. */
		.pg-preview-msg {
			position: absolute; inset: 0; display: flex; flex-direction: column;
			align-items: center; justify-content: center; gap: 10px;
			text-align: center; padding: 24px; color: var(--text-3); font-size: 13px;
		}
		.pg-preview-msg a { color: var(--text-2); text-decoration: underline; }
		.pg-preview-msg a:hover, .pg-preview-msg a:focus-visible { color: var(--text); }

		/* Animation bar */
		.pg-anims {
			padding: 10px 16px; border-top: 1px solid var(--hairline);
			display: flex; gap: 4px; flex-wrap: wrap;
			position: relative; z-index: 2;
		}
		.pg-anim {
			padding: 4px 10px; border-radius: 5px;
			font-family: var(--font-mono); font-size: 11px;
			color: var(--text-3); background: transparent;
			border: 1px solid var(--hairline-strong); cursor: pointer;
			transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
		}
		.pg-anim:hover { border-color: var(--text-3); color: var(--text-2); }
		.pg-anim.active {
			border-color: rgba(255,255,255,0.5); color: var(--text);
			background: rgba(255,255,255,0.08);
		}

		.pg-copy:focus-visible, .pg-tab:focus-visible, .pg-chip:focus-visible,
		.pg-anim:focus-visible, .pg-avatar-item:focus-visible {
			outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px;
		}

		/* ── COLOR PICKER ────────────────────────────────────────── */
		.pg-color-trigger {
			position: relative;
			width: 26px; height: 26px; border-radius: 6px;
			border: 1px solid var(--hairline-strong);
			cursor: pointer; flex-shrink: 0;
			background: conic-gradient(
				from 0deg,
				#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
			);
			transition: border-color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
			padding: 0;
		}
		.pg-color-trigger:hover {
			border-color: var(--text-3);
			transform: scale(1.1);
		}
		.pg-color-trigger.active {
			border-color: var(--text);
			box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
		}
		.pg-color-trigger.has-color {
			background: var(--pg-picked-color, #888);
		}
		.pg-color-popover {
			position: absolute;
			top: calc(100% + 8px);
			left: 50%;
			transform: translateX(-50%);
			z-index: 50;
			background: var(--surface-1);
			border: 1px solid var(--hairline-strong);
			border-radius: 10px;
			padding: 14px;
			box-shadow: 0 12px 40px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
			display: none;
			flex-direction: column;
			gap: 10px;
			width: 220px;
		}
		.pg-color-popover.open {
			display: flex;
			animation: pg-pop-in 0.18s cubic-bezier(.2,.7,.3,1);
		}
		@keyframes pg-pop-in {
			from { opacity: 0; transform: translateY(-4px) scale(0.97); }
			to   { opacity: 1; transform: translateY(0) scale(1); }
		}
		.pg-color-popover-label {
			font-family: var(--font-mono); font-size: 10px;
			letter-spacing: 0.15em; text-transform: uppercase;
			color: var(--text-3);
		}
		.pg-color-swatches {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			gap: 5px;
		}
		.pg-color-swatch {
			width: 100%; aspect-ratio: 1; border-radius: 5px;
			border: 2px solid transparent;
			cursor: pointer; padding: 0;
			transition: border-color var(--duration-fast), transform var(--duration-fast);
		}
		.pg-color-swatch:hover {
			border-color: rgba(255,255,255,0.4);
			transform: scale(1.12);
		}
		.pg-color-swatch.active {
			border-color: var(--text);
		}
		.pg-color-hex-row {
			display: flex; align-items: center; gap: 6px;
		}
		.pg-color-hex-input {
			flex: 1;
			background: var(--surface-2);
			border: 1px solid var(--hairline-strong);
			border-radius: 5px;
			padding: 6px 8px;
			font-family: var(--font-mono);
			font-size: 12px;
			color: var(--text);
			outline: none;
			transition: border-color var(--duration-fast);
		}
		.pg-color-hex-input:focus { border-color: var(--text-3); }
		.pg-color-hex-input:focus-visible {
			outline: var(--focus-ring-width,2px) solid var(--focus-ring-color,var(--accent));
			outline-offset: var(--focus-ring-offset,2px);
		}
		.pg-color-preview {
			width: 28px; height: 28px; border-radius: 5px;
			border: 1px solid var(--hairline-strong);
			flex-shrink: 0;
		}

		@media (prefers-reduced-motion: reduce) {
			.pg-status::before { animation: none !important; }
		}

		/* ── LIVE FEATURE AGENTS ──────────────────────────────────── */
		.door-screenshot { position: relative; }
		.door-agent { position: absolute; inset: 0; }
		.door-agent agent-3d {
			width: 100%; height: 100%; display: block;
			pointer-events: none;
			transition: transform var(--duration-slow) cubic-bezier(.2,.7,.3,1);
		}
		.door:hover .door-agent agent-3d { transform: scale(1.03); }
		.door-earn-overlay {
			position: absolute; bottom: 10px; left: 10px; right: 10px;
			padding: 10px 14px; z-index: 2;
			background: rgba(5,5,5,0.82);
			border: 1px solid var(--hairline-strong); border-radius: 7px;
			display: flex; justify-content: space-between; align-items: baseline;
			pointer-events: none;
		}
		.door-earn-val {
			font-family: var(--font-display); font-size: 18px; font-weight: 600;
			letter-spacing: -0.02em; color: var(--text);
			font-variant-numeric: tabular-nums;
		}
		.door-earn-lbl {
			font-family: var(--font-mono); font-size: 9px;
			letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-3);
		}
		.door-earn-viz {
			position: absolute; inset: 0; overflow: hidden;
			transition: transform var(--duration-slow) cubic-bezier(.2,.7,.3,1);
		}
		.door:hover .door-earn-viz { transform: scale(1.03); }
		.door-earn-spark { position: absolute; inset: 0; width: 100%; height: 100%; }
		.door-earn-area { opacity: 0; transition: opacity var(--duration-slow) var(--ease-standard) var(--duration-slow); }
		.door-earn-line {
			fill: none; stroke: var(--green); stroke-width: 2;
			stroke-linejoin: round; stroke-linecap: round;
			vector-effect: non-scaling-stroke;
			stroke-dasharray: 1000; stroke-dashoffset: 1000;
		}
		.door-earn-viz.is-live .door-earn-area { opacity: 1; }
		.door-earn-viz.is-live .door-earn-line {
			transition: stroke-dashoffset var(--duration-slow) cubic-bezier(.4,0,.2,1);
			stroke-dashoffset: 0;
		}
		@media (prefers-reduced-motion: reduce) {
			.door-earn-line { transition: none; stroke-dashoffset: 0; }
			.door-earn-area { transition: none; opacity: 1; }
		}
		.bento-screenshot { position: relative; }
		.bento-agent { position: absolute; inset: 0; }
		.bento-agent agent-3d { width: 100%; height: 100%; display: block; }
		.bento-agent-mini {
			position: relative; height: 200px;
			border-radius: 7px; overflow: hidden;
			border: 1px solid var(--hairline-strong);
			background: var(--surface-2); margin-top: 8px;
		}
		.bento-agent-mini agent-3d {
			position: absolute; inset: 0;
			width: 100%; height: 100%; display: block;
		}
		.bento-pill-btn {
			cursor: pointer; background: transparent;
			font-family: var(--font-mono); font-size: 11px;
			letter-spacing: 0.1em; text-transform: uppercase;
			color: var(--text-3); border: 1px solid var(--hairline-strong);
			padding: 3px 8px; border-radius: 4px;
			transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
		}
		.bento-pill-btn:hover { border-color: var(--text-3); color: var(--text-2); }
		.bento-pill-btn.active {
			border-color: rgba(255,255,255,0.5); color: var(--text);
			background: rgba(255,255,255,0.08);
		}

		/* ── WALK IFRAME ─────────────────────────────────────────── */
		.walk-iframe-wrap {
			position: relative; aspect-ratio: 4/3;
			overflow: hidden; border-radius: 0 0 13px 13px;
		}
		.walk-iframe {
			position: absolute; inset: 0;
			width: 100%; height: 100%; border: 0;
			background: var(--surface-2);
		}

		/* ── AVATAR DROP ──────────────────────────────────────────────── */
		.body-drop {
			position: relative;
			min-height: 70vh;
			display: flex;
			align-items: center;
			overflow: visible;
		}
		.body-drop-content {
			position: relative; z-index: 10;
			max-width: 560px;
			padding: 80px 0 140px;
		}
		.body-drop-title {
			font-family: var(--font-display);
			font-size: clamp(44px, 5.5vw, 80px);
			line-height: 0.95; letter-spacing: -0.04em;
			font-weight: 600; margin: 0 0 24px;
		}
		.body-drop-title em { font-style: normal; color: var(--text-3); font-weight: 500; }
		#drop-sit-line {
			text-shadow: var(--drop-shadow, none);
			transition: text-shadow var(--duration-instant) linear;
		}
		.body-drop-sub {
			font-size: 17px; color: var(--text-2);
			max-width: 440px; line-height: 1.55; margin: 0 0 44px;
		}
		#drop-canvas {
			position: absolute; inset: 0;
			width: 100%; height: 100%;
			pointer-events: none; z-index: 20;
		}
		.body-drop .cta-row { position: relative; z-index: 10; }
		.body-drop .btn { transform-origin: bottom center; will-change: transform; }
		@media (max-width: 720px) {
			.body-drop { min-height: auto; }
			.body-drop-content { padding: 48px 0 100px; }
		}

		/* ── MANIFESTO ──────────────────────────────────────────── */
		.manifesto {
			display: flex;
			flex-direction: column;
			gap: 0;
		}
		.manifesto-beat {
			padding: 64px 0;
			border-bottom: 1px solid var(--hairline);
		}
		.manifesto-beat:first-child { padding-top: 0; }
		.manifesto-beat:last-child { border-bottom: none; padding-bottom: 0; }

		.manifesto-statement {
			font-family: var(--font-display);
			font-size: clamp(36px, 4.8vw, 68px);
			line-height: 1.05;
			letter-spacing: -0.04em;
			font-weight: 600;
			margin: 0;
			color: var(--text);
		}
		.manifesto-statement em {
			font-style: normal;
			color: var(--text-3);
			font-weight: 500;
		}
		.manifesto-statement--dim {
			color: var(--text-3);
		}

		.manifesto-aside {
			font-size: 17px;
			color: var(--text-3);
			margin: 20px 0 0;
			max-width: 540px;
			line-height: 1.6;
		}

		.manifesto-steps {
			display: flex;
			flex-direction: column;
			gap: 6px;
		}
		.manifesto-step {
			font-family: var(--font-display);
			font-size: clamp(22px, 2.8vw, 36px);
			font-weight: 500;
			letter-spacing: -0.02em;
			color: var(--text-4);
			line-height: 1.2;
		}
		.manifesto-step:nth-child(2) { color: var(--text-3); }
		.manifesto-step:nth-child(3) { color: var(--text-2); }

		.manifesto-lead {
			font-size: clamp(18px, 2vw, 22px);
			color: var(--text-3);
			margin: 0 0 28px;
			line-height: 1.5;
			max-width: 480px;
		}
		.manifesto-keyword {
			font-family: var(--font-display);
			font-size: clamp(80px, 14vw, 180px);
			line-height: 0.88;
			letter-spacing: -0.055em;
			font-weight: 700;
			margin: 0;
			color: var(--text);
			position: relative;
		}
		.manifesto-keyword::after {
			content: "";
			position: absolute;
			left: 0; right: 30%; bottom: -4px;
			height: 2px;
			background: linear-gradient(90deg, var(--text-3), transparent);
			opacity: 0.4;
		}

		.manifesto-negations {
			margin-bottom: 36px;
			display: flex;
			flex-direction: column;
			gap: 6px;
		}
		.manifesto-neg {
			font-size: clamp(16px, 1.6vw, 19px);
			color: var(--text-3);
			margin: 0;
			line-height: 1.5;
			text-decoration: line-through;
			text-decoration-color: rgba(255,255,255,0.15);
			text-decoration-thickness: 1px;
		}
		.manifesto-affirmation {
			font-family: var(--font-display);
			font-size: clamp(24px, 3vw, 40px);
			line-height: 1.2;
			letter-spacing: -0.025em;
			font-weight: 600;
			color: var(--text);
			margin: 0;
			max-width: 640px;
		}

		.manifesto-body {
			font-size: 17px;
			color: var(--text-2);
			margin: 28px 0 0;
			max-width: 560px;
			line-height: 1.65;
		}

		.manifesto-caps {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			margin-bottom: 28px;
		}
		.manifesto-cap {
			font-family: var(--font-mono);
			font-size: 11.5px;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--text-2);
			padding: 8px 16px;
			border: 1px solid var(--hairline-strong);
			border-radius: 6px;
			transition: border-color var(--duration-base), color var(--duration-base), background var(--duration-base);
		}
		.manifesto-cap:hover {
			border-color: var(--text-3);
			color: var(--text);
			background: rgba(255,255,255,0.03);
		}

		.manifesto-close-dim {
			font-family: var(--font-display);
			font-size: clamp(22px, 2.8vw, 36px);
			font-weight: 500;
			letter-spacing: -0.02em;
			color: var(--text-4);
			margin: 0 0 12px;
			line-height: 1.15;
		}
		.manifesto-close {
			font-family: var(--font-display);
			font-size: clamp(40px, 5.5vw, 76px);
			line-height: 1.0;
			letter-spacing: -0.04em;
			font-weight: 600;
			margin: 0;
			color: var(--text);
		}

		.manifesto-embed {
			font-family: var(--font-mono);
			font-size: 13px;
			color: var(--text-3);
			margin: 20px 0 0;
			letter-spacing: 0.02em;
		}
		.manifesto-embed code {
			color: var(--text);
			font-weight: 500;
		}

		@media (max-width: 720px) {
			.manifesto-beat { padding: 44px 0; }
			.manifesto-keyword::after { right: 10%; }
		}
		/* ── INTERACTIVE BENTO DEMOS ─────────────────────────────── */
		.bento-interact{margin-top:10px;position:relative}
		.bento-action-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:7px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.06em;color:var(--text);background:var(--surface-2);border:1px solid var(--hairline-strong);cursor:pointer;transition:border-color var(--duration-fast),background var(--duration-fast),transform var(--duration-fast)}
		.bento-action-btn:hover{border-color:var(--text-3);background:rgba(255,255,255,.06);transform:translateY(-1px)}
		.bento-action-btn:active{transform:translateY(0)}
		.bento-action-btn:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}
		.bento-action-btn.sm{padding:5px 11px;font-size:10.5px}
		.bento-action-btn.primary{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}
		.bento-action-btn.primary:hover{background:var(--ink-bright);border-color:var(--ink-bright)}
		.bento-action-btn.ghost{background:transparent;color:var(--text-2)}
		.studio-zone{display:flex;gap:8px;align-items:stretch}
		.studio-drop{flex:1;width:100%;background:transparent;border:1px dashed var(--hairline-strong);border-radius:8px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:border-color var(--duration-base),background var(--duration-base);font-family:var(--font-mono);font-size:11px;color:var(--text-3);text-align:center;min-height:80px}
		.studio-drop:hover,.studio-drop.drag-over{border-color:var(--text-2);background:rgba(255,255,255,.03)}
		.studio-drop:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring-color,var(--accent));outline-offset:var(--focus-ring-offset,2px)}
		.studio-drop-icon{font-size:22px;opacity:.5}
		.studio-preview-img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--hairline-strong);flex:none}
		.studio-ready{display:none;flex-direction:column;align-items:stretch;gap:12px;padding:14px;border:1px solid var(--hairline-strong);border-radius:8px;background:rgba(255,255,255,.02)}
		.studio-ready.show{display:flex}
		.studio-ready > .studio-preview-img{align-self:flex-start}
		.studio-ready-body{display:flex;flex-direction:column;gap:4px}
		.studio-ready-title{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text)}
		.studio-ready-sub{font-family:var(--font-mono);font-size:11px;line-height:1.5;color:var(--text-3)}
		.studio-ready-actions{display:flex;gap:8px;flex-wrap:wrap}
		.studio-ready-actions .bento-action-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
		.studio-error{display:none;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--hairline-strong);border-radius:8px;font-family:var(--font-mono);font-size:11px;color:var(--text-2)}
		.studio-error.show{display:flex}
		.mocap-demo{display:flex;flex-direction:column;gap:8px}
		.mocap-bar{display:flex;align-items:center;gap:10px}
		.mocap-waveform{width:100%;height:48px;border-radius:6px;background:var(--surface-2);border:1px solid var(--hairline-strong);display:block}
		.mocap-status{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--text-3);text-align:center}
		.mocap-status.live{color:var(--text-2)}
		.walk-minimap-wrap{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--hairline-strong);background:#0d0d0d}
		.walk-minimap{width:100%;height:140px;display:block;cursor:crosshair}
		.walk-minimap:focus{outline:2px solid rgba(255,255,255,.3);outline-offset:-2px}
		.walk-minimap-hud{position:absolute;top:6px;left:8px;display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9px;color:var(--text-3);letter-spacing:.08em}
		.walk-minimap-dot{width:5px;height:5px;border-radius:50%;background:var(--success);box-shadow:0 0 4px color-mix(in srgb, var(--success) 53%, transparent)}
		.walk-minimap-hint{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:8.5px;color:var(--text-3);letter-spacing:.06em;white-space:nowrap}
		.walk-minimap-hint kbd{display:inline-block;padding:0 3px;border:1px solid var(--hairline-strong);border-radius:2px;font-family:var(--font-mono);font-size:8px;background:var(--surface-2)}
		.x402-demo{display:flex;flex-direction:column;gap:8px}
		.x402-step{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface-2);border:1px solid var(--hairline-strong);border-radius:8px;transition:all var(--duration-base) var(--ease-standard)}
		.x402-code{font-family:var(--font-mono);font-size:11.5px;color:var(--text-2);flex:1}
		.x402-code.err{color:var(--danger)}
		.x402-code.ok{color:var(--success)}
		.x402-spinner{width:16px;height:16px;border:2px solid var(--hairline-strong);border-top-color:var(--text-2);border-radius:50%;animation:walk-spin .6s linear infinite;display:none}
		.x402-amount{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--success);display:none}
		.x402-amount.show{display:block}
		.mint-demo{perspective:600px}
		.mint-card{position:relative;padding:16px;background:var(--surface-2);border:1px solid var(--hairline-strong);border-radius:10px;transition:transform var(--duration-slow) cubic-bezier(.2,.7,.3,1),box-shadow var(--duration-base),border-color var(--duration-base)}
		.mint-card.minted{border-color:rgba(255,255,255,.2);box-shadow:0 0 20px -4px rgba(255,255,255,.08)}
		.mint-card-inner{display:flex;align-items:center;justify-content:space-between;gap:10px}
		.mint-card-info{display:flex;flex-direction:column;gap:2px}
		.mint-card-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);transition:color var(--duration-base)}
		.mint-card-name{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--text);background:transparent;border:none;border-bottom:1px dashed transparent;padding:0 1px 1px;margin:0;width:auto;max-width:170px;outline:none;transition:border-color var(--duration-fast)}
		.mint-card-name:hover:not(:disabled),.mint-card-name:focus{border-bottom-color:var(--text-2)}
		.mint-card-name:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring-color,var(--accent));outline-offset:var(--focus-ring-offset,2px);border-radius:2px}
		.mint-card-name::placeholder{color:var(--text-4)}
		.mint-card-name:disabled{opacity:.65;cursor:default}
		.mint-card.error{border-color:rgba(248,113,113,.45)}
		.mint-card-name.shake{animation:mint-shake .4s cubic-bezier(.36,.07,.19,.97)}
		@keyframes mint-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
		.mint-card-chain{font-family:var(--font-mono);font-size:10px;color:var(--text-3);display:block}
		.mint-card-chain a{color:var(--success);text-decoration:none;border-bottom:1px solid rgba(74,222,128,.3)}
		.mint-card-chain a:hover{border-bottom-color:var(--success)}
		.mint-card.minted .mint-card-label{color:var(--success)}
		.mint-status{margin:11px 0 0;font-family:var(--font-mono);font-size:10.5px;line-height:1.4;color:var(--text-3)}
		.mint-status.err{color:var(--danger)}
		.mint-status.ok{color:var(--success)}
		.mint-status a{color:inherit;text-decoration:underline;text-underline-offset:2px}
		.mint-progress{width:28px;height:28px;position:relative;display:none}
		.mint-progress.active{display:block}
		.mint-progress svg{width:100%;height:100%;transform:rotate(-90deg)}
		.mint-progress.active:not(.done) svg{animation:mint-spin .9s linear infinite}
		@keyframes mint-spin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
		.mint-progress circle{fill:none;stroke-width:3;stroke:var(--text-2);stroke-linecap:round;stroke-dasharray:78.5;stroke-dashoffset:78.5;transition:stroke-dashoffset var(--duration-slow) cubic-bezier(.2,.7,.3,1)}
		.mint-progress.active:not(.done) circle{stroke-dashoffset:55}
		.mint-progress.done circle{stroke-dashoffset:0;stroke:var(--success);transition:stroke-dashoffset var(--duration-slow) cubic-bezier(.2,.7,.3,1)}
		.skill-demo{display:flex;flex-direction:column;gap:8px}
		.skill-result{background:var(--surface-2);border:1px solid var(--hairline-strong);border-radius:7px;padding:10px 14px;font-family:var(--font-mono);font-size:11px;color:var(--text-2);line-height:1.6;max-height:100px;overflow-y:auto;transition:border-color var(--duration-base)}
		.skill-result.fresh{border-color:rgba(255,255,255,.2)}
		.skill-result .json-key{color:#60a5fa}
		.skill-result .json-str{color:var(--success)}
		.skill-result .json-num{color:var(--warn)}
		.skill-result .json-dim{color:var(--text-3)}
		.skill-result.loading{color:var(--text-3)}
		.skill-result.err{border-color:rgba(248,113,113,.4)}
		.skill-loading .json-key{color:#60a5fa}
		.skill-err{color:var(--danger)}
		.skill-cursor{color:var(--text-3);animation:skillBlink 1s steps(2,end) infinite}
		.skill-dots::after{content:'';animation:skillDots 1.4s steps(4,end) infinite}
		@keyframes skillDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
		@keyframes skillBlink{50%{opacity:0}}
		.bento-pill-btn[aria-busy="true"]{opacity:.6;cursor:progress}
		.memory-demo{display:flex;flex-direction:column;gap:8px}
		.memory-input-row{display:flex;gap:6px}
		.memory-input{flex:1;background:var(--surface-2);border:1px solid var(--hairline-strong);border-radius:6px;padding:7px 10px;font-family:var(--font-mono);font-size:11.5px;color:var(--text);outline:none;transition:border-color var(--duration-fast)}
		.memory-input:focus{border-color:var(--text-3)}
		.memory-input:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring-color,var(--accent));outline-offset:var(--focus-ring-offset,2px)}
		.memory-input::placeholder{color:var(--text-4)}
		.memory-log{display:flex;flex-direction:column;gap:4px;max-height:72px;overflow-y:auto}
		.memory-entry{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);line-height:1.5;padding:3px 0;animation:mem-in .3s ease}
		.memory-entry .mem-op{color:var(--text-4);margin-right:4px}
		.memory-entry .mem-val{color:var(--text-2)}
		@keyframes mem-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
		.ar-demo{display:flex;align-items:center;gap:12px}
		.ar-phone{width:64px;height:100px;border:2px solid var(--hairline-strong);border-radius:10px;background:var(--surface-2);position:relative;overflow:hidden;flex-shrink:0;transition:border-color var(--duration-base)}
		.ar-phone.active{border-color:var(--text-3)}
		.ar-phone-notch{width:24px;height:4px;background:var(--hairline-strong);border-radius:2px;margin:4px auto 0}
		.ar-phone-screen{position:absolute;inset:10px 3px 6px;background:#111;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}
		.ar-phone-avatar{width:32px;height:32px;border-radius:50%;background:var(--surface-1);border:1px solid var(--hairline-strong);display:flex;align-items:center;justify-content:center;font-size:14px;opacity:0;transition:opacity var(--duration-slow),transform var(--duration-slow)}
		.ar-phone.active .ar-phone-avatar{opacity:1;transform:scale(1.1)}
		.ar-phone-crosshair{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity var(--duration-base)}
		.ar-phone.active .ar-phone-crosshair{opacity:.5}
		.ar-phone-crosshair::before,.ar-phone-crosshair::after{content:'';position:absolute;background:var(--text-3)}
		.ar-phone-crosshair::before{width:16px;height:1px}
		.ar-phone-crosshair::after{width:1px;height:16px}
		.ar-info{display:flex;flex-direction:column;gap:4px}
		.ar-status{font-family:var(--font-mono);font-size:10px;color:var(--text-3);letter-spacing:.08em}
		.ar-status.ready{color:var(--success)}
		.mktplace-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
		.mktplace-strip::-webkit-scrollbar{display:none}
		.mktplace-item{flex-shrink:0;width:52px;height:52px;border-radius:10px;overflow:hidden;border:1px solid var(--hairline-strong);cursor:pointer;background:var(--surface-2);transition:border-color var(--duration-fast),transform var(--duration-fast);position:relative;display:block}
		.mktplace-item:hover{border-color:var(--text-3);transform:translateY(-2px)}
		.mktplace-item img{width:100%;height:100%;object-fit:cover;display:block}
		.mktplace-item-initial{width:100%;height:100%;display:none;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:16px;font-weight:600;color:var(--text-3);text-transform:uppercase;line-height:1}
		.mktplace-item-name{position:absolute;bottom:0;left:0;right:0;padding:2px 4px;font-family:var(--font-mono);font-size:7px;color:var(--text);background:rgba(0,0,0,.7);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
		.mktplace-more{flex-shrink:0;width:52px;height:52px;border-radius:10px;border:1px dashed var(--hairline-strong);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:18px;color:var(--text-4);cursor:pointer;transition:border-color var(--duration-fast),color var(--duration-fast);text-decoration:none}
		.mktplace-more:hover{border-color:var(--text-3);color:var(--text-2)}
		.analytics-demo{display:flex;flex-direction:column;gap:10px;--spark:var(--success);--spark-deep:#10b981}
		.analytics-example-tag{align-self:flex-start;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--hairline);border-radius:5px;padding:2px 7px}
		.analytics-counters{display:flex;gap:16px}
		.analytics-counter{display:flex;flex-direction:column;gap:1px}
		.analytics-val{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
		.analytics-val#an-revenue{color:var(--spark)}
		.analytics-lbl{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
		.analytics-spark{width:100%;height:40px;display:block}
		.analytics-spark path{fill:none;stroke:var(--spark);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--spark) 55%,transparent))}
		.analytics-spark .spark-fill{fill:url(#spark-grad);stroke:none;opacity:1;filter:none}
		.analytics-spark .spark-dot{fill:var(--spark);r:2.5;filter:drop-shadow(0 0 4px var(--spark));animation:spark-pulse 2s ease-in-out infinite}
		@keyframes spark-pulse{0%,100%{opacity:1}50%{opacity:.4}}

		/* ── DRAGON VISION SECTION ───────────────────────────────── */
		.vision-block{padding-bottom:0}
		.vision-block .block-eyebrow{margin-bottom:24px}
		.dragon-wrap{position:relative;height:76vh;min-height:420px;max-height:880px;overflow:hidden;background:#050505;cursor:crosshair;border-top:1px solid var(--hairline)}
		.dragon-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.52);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;transition:opacity var(--duration-slow) var(--ease-standard);white-space:nowrap;z-index:5}
		.dragon-hint.fade{opacity:0}
		@media(max-width:720px){.dragon-wrap{height:55vh;min-height:300px}}
		@media(prefers-reduced-motion:reduce){.dragon-wrap canvas{display:none}}

		/* ── Microinteractions (B11) — focus rings + press states ──────────
		   Covers every interactive element above that had hover-only states.
		   Ring tokens come from /tokens.css + /buttons.css. */
		.door:focus-visible,
		.stack-card:focus-visible,
		.showcase-agent-card:focus-visible,
		.showcase-cta-card:focus-visible,
		.bento-card a:focus-visible,
		.bento-pill-btn:focus-visible,
		.dev-tab:focus-visible,
		.dev-link:focus-visible,
		.pg-key-hint:focus-visible,
		.pg-send:focus-visible,
		.pg-color-trigger:focus-visible,
		.pg-color-swatch:focus-visible,
		.wyg-card:focus-visible,
		.wyg-anim-chip:focus-visible,
		.wyg-anim-stop:focus-visible,
		.hero-chip:focus-visible,
		.foot-col a:focus-visible,
		.foot-ca:focus-visible,
		.mint-card-chain a:focus-visible,
		.mktplace-item:focus-visible,
		.mktplace-more:focus-visible {
			outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #fff);
			outline-offset: var(--focus-ring-offset, 2px);
		}
		/* Press feedback — buttons squash a hair, links/rows tint deeper. */
		.bento-pill-btn:active,
		.dev-tab:active,
		.wyg-anim-chip:active,
		.wyg-anim-stop:active,
		.pg-color-trigger:active,
		.pg-color-swatch:active,
		.mktplace-more:active,
		.hero-chip:active,
		.foot-ca:active {
			transform: scale(0.97);
		}
		.mktplace-item:active { transform: translateY(0) scale(0.97); }
		/* 3D-transformed cards (stack, showcase) and full-bleed cells press via
		   a tint instead of a transform so their perspective layout holds. */
		.door:active,
		.stack-card:active,
		.wyg-card:active { background: var(--surface-2); }
		.showcase-agent-card:active,
		.showcase-cta-card:active { border-color: rgba(255,255,255,0.22); }
		.foot-col a:active,
		.dev-link:active,
		.mint-card-chain a:active { opacity: 0.7; }
		@media (prefers-reduced-motion: reduce) {
			.mktplace-item:active,
			.bento-pill-btn:active, .dev-tab:active, .wyg-anim-chip:active,
			.wyg-anim-stop:active, .pg-color-trigger:active, .pg-color-swatch:active,
			.mktplace-more:active, .hero-chip:active, .foot-ca:active {
				transform: none;
			}
		}

		/* ── HOME AR SECTION ─────────────────────────────────────────── */
		#home-ar { background: var(--bg); }
		.har-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
		@media (max-width: 860px) { .har-inner { grid-template-columns: 1fr; gap: 40px; } }
		.har-viewer-wrap {
			position: relative;
			border-radius: 20px;
			overflow: hidden;
			/* A soft floor gradient so the model reads as sitting in a space, not
			   floating in a void — sells the "real-world scale" promise on desktop. */
			background:
				radial-gradient(120% 80% at 50% 118%, rgba(139,92,246,.16), transparent 60%),
				linear-gradient(180deg, #0a0a14 0%, #0a0a14 55%, #12121e 100%);
			border: 1px solid var(--hairline);
			aspect-ratio: 1 / 1;
			display: flex; align-items: center; justify-content: center;
		}
		/* Faint horizon line where the "floor" meets the "wall". */
		.har-viewer-wrap::after {
			content: ''; position: absolute; left: 8%; right: 8%; bottom: 26%;
			height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
			pointer-events: none;
		}
		.har-viewer-wrap model-viewer { position: relative; z-index: 1; width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
		.har-viewer-nav {
			position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
			display: flex; align-items: center; gap: 8px;
			background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: 6px 10px;
		}
		.har-nav-btn {
			background: none; border: none; color: rgba(255,255,255,.6); cursor: pointer;
			padding: 4px 8px; border-radius: 6px; font-size: 14px; line-height: 1;
			transition: color var(--duration-fast), background var(--duration-fast);
		}
		.har-nav-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
		.har-prompt { font-size: 11px; color: rgba(255,255,255,.5); font-family: var(--font-mono); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
		.har-cat {
			position: absolute; top: 14px; left: 14px; z-index: 2;
			font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
			color: rgba(255,255,255,.7); background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 4px 9px;
			opacity: 0; transition: opacity var(--duration-base) var(--ease-standard);
		}
		.har-cat[data-shown="1"] { opacity: 1; }
		.har-count { font-size: 13px; color: var(--text-3); margin: 10px 0 0; min-height: 18px; opacity: 0; transition: opacity var(--duration-slow) var(--ease-standard); }
		.har-count[data-shown="1"] { opacity: 1; }
		.har-count b { color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 600; }
		.har-count .har-dot-live { display: inline-block; width: 6px; height: 6px; border-radius: 6px; background: #34d399; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 0 rgba(52,211,153,.5); animation: har-pulse 2.4s ease-out infinite; }
		@keyframes har-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); } 70% { box-shadow: 0 0 0 6px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
		@media (prefers-reduced-motion: reduce) { .har-count .har-dot-live { animation: none; } }
		.har-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; }
		.har-empty p { color: var(--text-3); font-size: 14px; margin: 0; max-width: 240px; line-height: 1.5; }
		.har-empty a { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #000; font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: 6px; text-decoration: none; transition: transform var(--duration-fast), box-shadow var(--duration-fast); }
		.har-empty a:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,255,255,.14); }
		#home-ar .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
		.har-viewer-wrap:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
		.har-dots { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
		.har-dot { width: 6px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.25); border: none; padding: 0; cursor: pointer; transition: background var(--duration-base), transform var(--duration-base); }
		.har-dot:hover { background: rgba(255,255,255,.5); }
		.har-dot[data-active="1"] { background: rgba(255,255,255,.9); transform: scale(1.35); }
		.har-autobar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, rgba(139,92,246,.9), rgba(255,255,255,.9)); z-index: 2; }
		.har-autobar[data-run="1"] { width: 100%; transition: width var(--har-auto-ms, var(--duration-slow)) linear; }
		@media (prefers-reduced-motion: reduce) { .har-autobar { display: none; } }
		.har-poster-fade { opacity: 0; transition: opacity var(--duration-slow) var(--ease-standard); }
		.har-poster-fade[data-shown="1"] { opacity: 1; }
		.har-skeleton { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 13px; }
		.har-right { display: flex; flex-direction: column; gap: 28px; }
		.har-mobile-btn {
			display: inline-flex; align-items: center; gap: 10px;
			padding: 16px 24px; border-radius: 14px; background: #fff; color: #000;
			font-size: 16px; font-weight: 600; border: none; cursor: pointer;
			transition: transform var(--duration-fast), box-shadow var(--duration-fast), opacity var(--duration-fast); align-self: flex-start;
		}
		.har-mobile-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(255,255,255,.15); }
		.har-mobile-btn:active { transform: none; }
		.har-mobile-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
		.har-mobile-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
		.har-qr-wrap {
			width: 120px; height: 120px; border-radius: 12px; background: #fff;
			display: flex; align-items: center; justify-content: center;
			padding: 8px; box-sizing: border-box;
		}
		.har-qr-wrap canvas { border-radius: 4px; display: block; }
		.har-qr-label { font-size: 13px; color: var(--text-3); line-height: 1.5; }
		.har-compat { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
		.har-compat-pill {
			padding: 4px 12px; border-radius: 6px;
			background: rgba(255,255,255,.05); border: 1px solid var(--hairline);
			font-size: 12px; color: var(--text-3);
		}
		.har-cta-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14px; text-decoration: none; transition: color var(--duration-fast); }
		.har-cta-link:hover { color: var(--text); }
		/* Show/hide platform-specific UI: default desktop */
		.har-desktop-only { display: flex; flex-direction: column; gap: 12px; }
		.har-mobile-only { display: none; }
		@media (hover: none) and (pointer: coarse) {
			.har-desktop-only { display: none; }
			.har-mobile-only { display: flex; flex-direction: column; gap: 16px; }
		}

		/* iOS auto-zooms any focused field whose font-size is < 16px. Bump every
		   editable/focusable text field to 16px on phones — desktop sizing above
		   is untouched. Covers chat, playground, forge, mint, memory, hex inputs. */
		@media (max-width: 720px) {
			.pg-input, .pg-url-path, .pg-color-hex-input,
			.pg-editor textarea, .pg-editor pre,
			#home-forge textarea.hf-prompt, #home-forge textarea.hf-embed-code,
			.memory-input, .mint-card-name { font-size: 16px; }
			/* Primary CTAs need a comfortable 44px touch target on phones. The
			   shared .btn system runs ~37px tall by default — lift only the
			   homepage's lead actions, leaving the desktop button height intact. */
			.hero-cta-row .btn, .cta-card .cta-row .btn,
			.body-drop .cta-row .btn { min-height: 44px; }
		}

		/* ── Oracle conviction mini-cards (home section) ─────────────── */
		.hoc-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); transition: background var(--duration-fast); text-decoration: none; color: inherit; }
		.hoc-item:last-child { border-bottom: none; }
		.hoc-item:hover { background: rgba(255,255,255,0.03); }
		.hoc-score { font-family: var(--font-mono,monospace); font-size: 22px; font-weight: 800; line-height: 1; width: 42px; text-align: center; flex-shrink: 0; }
		.hoc-score.t-prime, .hoc-score.t-strong { color: var(--green, #22c55e); }
		.hoc-score.t-lean { color: var(--amber, #f59e0b); }
		.hoc-score.t-watch { color: var(--text-3, #6a6a6a); }
		.hoc-score.t-avoid { color: var(--red, #ef4444); }
		.hoc-info { flex: 1; min-width: 0; }
		.hoc-sym { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
		.hoc-name { font-size: 11px; color: var(--text-3, #6a6a6a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
		.hoc-pillars { display: flex; gap: 4px; margin-top: 5px; }
		.hoc-pillar { height: 3px; border-radius: 2px; flex: 1; background: rgba(255,255,255,.06); position: relative; overflow: hidden; }
		.hoc-pillar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
		.hoc-tier { font-family: var(--font-mono,monospace); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 3px 7px; border-radius: 5px; white-space: nowrap; flex-shrink: 0; }
		.hoc-tier.t-prime, .hoc-tier.t-strong { background: rgba(34,197,94,.14); color: var(--green, #22c55e); }
		.hoc-tier.t-lean { background: rgba(245,158,11,.13); color: var(--amber, #f59e0b); }
		.hoc-tier.t-watch { background: rgba(255,255,255,.05); color: var(--text-3, #6a6a6a); }
		.hoc-tier.t-avoid { background: rgba(239,68,68,.14); color: var(--red, #ef4444); }
		.hoc-loading { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
		.hoc-sk { height: 48px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%); background-size: 200% 100%; animation: hoc-shimmer 1.3s linear infinite; }
		@keyframes hoc-shimmer { to { background-position: -200% 0; } }
		.hoc-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green, #22c55e); margin-right: 7px; vertical-align: middle; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: hoc-pulse 2s infinite; }
		@keyframes hoc-pulse { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 70%{box-shadow:0 0 0 6px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }

		/* ── MOTION SAFETY ──────────────────────────────────────────
		   Honor the OS "reduce motion" setting. This page hardcodes ~30
		   keyframe animations and many transitions that tokens.css cannot
		   reach; neutralize all decorative motion globally so the layout
		   stays static for vestibular-sensitive visitors. Essential state
		   feedback still renders — only the animation/transition is dropped. */
		@media (prefers-reduced-motion: reduce) {
			html { scroll-behavior: auto; }
			*, *::before, *::after {
				animation-duration: 0.001ms !important;
				animation-iteration-count: 1 !important;
				animation-delay: 0ms !important;
				transition-duration: var(--duration-instant) !important;
				transition-delay: 0ms !important;
				scroll-behavior: auto !important;
			}
		}