:root{
	--bg:#0b0f14;
	--panel:#0f1520;
	--muted:#a8b3cf;
	--text:#e6edf3;
	--brand:#00c2ff;
	--brand-2:#6a5cff;
	--accent:#00c2ff; /* accent alias for inline links */
	--ok:#37d67a;
	--border:#1c2533;
	--shadow:0 10px 30px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html, body {
	min-height: 100%;
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
	color: var(--text);
	line-height: 1.55;
	letter-spacing: .1px;
	/* Unified page-wide background to avoid banding */
	background: #0a0f18;
	background-image: radial-gradient(1200px 600px at 70% 0%, rgba(255,255,255,0.04), transparent 60%), linear-gradient(#0a0f18, #0a0f18);
	background-attachment: fixed, fixed;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.container{max-width:1120px;margin:0 auto;padding:24px}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:8px 0 12px;border-bottom:1px solid var(--border)}
.logo{display:flex;align-items:center;gap:12px;font-weight:700}
.logo-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 0 24px rgba(0,194,255,.7)}
.links{display:flex;gap:0}
.links .pill{margin-left:8px}
.links .pill.active, .links .pill[aria-current="page"]{
	background: rgba(255,255,255,0.06);
	border-color: var(--brand);
	color: var(--text);
	text-decoration: none;
}

@media (max-width: 800px) {
	.nav {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 12px;
	}
	.nav .logo {
		width: 100%;
	}
	.nav .links {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: 100%;
	}
	.nav .links .pill {
		margin-left: 0;
	}
}

.hero{
	/* Use an explicit two-column grid with a constrained right column for the snapshot card.
		 align-items:start is the critical change to keep both columns aligned at the top. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
	gap: 56px;
	align-items: start; /* ensure both columns start at same vertical position */
	padding-block: 96px; /* control vertical spacing from the section only */
	position: relative; /* for ambient orb */
	overflow: visible;
}
@media (max-width: 1024px) {
	.hero {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-block: 64px;
	}
	/* On mobile, ensure the right (snapshot) stacks after the left text */
	.hero-right { order: 2; }
	.hero-left  { order: 1; }
}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px;background:rgba(255,255,255,.02)}
.hero-left, .hero-right, .hero h1 { margin-top: 0; }
.hero-right, .runner-snapshot { position: static; top: auto; transform: none; }

h1{font-size:clamp(32px,6vw,54px);line-height:1.1;margin:14px 0 10px;letter-spacing:.2px}
.tagline{font-size:clamp(16px,2.2vw,20px);color:#c9d6ea;margin:10px 0 26px;max-width:48ch}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));text-decoration:none;color:var(--text);font-weight:600;box-shadow:var(--shadow)}
.button.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none}
.button.ghost{background:transparent}

/* Hero card */
.hero-card{position:relative;border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow);overflow:hidden;max-width:100%;background:rgba(255,255,255,0.02)}
.hero-card .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-card .tile{border:1px solid var(--border);border-radius:14px;padding:14px;background:rgba(10,14,22,.6)}

/* Limit snapshot width so it doesn't push layout on small screens */
.hero-card .code{max-width:520px}

/* Defensive: Ensure code blocks don't push layout or overflow horizontally */
.runner-snapshot pre, .runner-snapshot code, .runner-snapshot .code { overflow-x: auto; white-space: pre; }

/* Kicker + code */
.kicker{color:var(--muted);font-weight:600;font-size:13px;letter-spacing:.6px;text-transform:uppercase}
.code{background:#091018;border:1px solid var(--border);border-radius:14px;padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-size:13.5px;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:pre}

/* Generic code block support */
pre, code, .code-block {overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:pre;}

/* Cards & grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.grid{grid-template-columns:1fr;gap:16px}}

/* Section spacing to keep vertical rhythm */
main > section{padding-block:56px}
main > section.hr{padding-block:0;margin-block:0}
.card{border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,0.02);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:4px 0 8px;font-size:18px}
.card p{color:#c8d3ea;margin:0}

/* Rules + footer */
.external-link:hover { text-decoration: underline; }
a:hover { text-decoration: underline; }
.hr{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);margin:34px 0}
.footer{display:flex;gap:14px;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;padding:22px 0}
.footer a{color:var(--muted);text-decoration:none}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:6px 10px;color:#a9b5d0;font-size:12px}

/* Prevent step number wrapping */
.step{white-space:nowrap;margin-right:6px;color:var(--brand);font-weight:700}

/* tiny utilities (replace former style="...") */
.mt-6{margin-top:6px}
.m-0{margin:0}
.mb-6{margin-bottom:6px}
.text-muted{color:var(--muted)}
.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════════════════
   ✨ PURE CSS MAGIC — No JavaScript Required
   ═══════════════════════════════════════════════════════════════════════════ */

/* Smooth scroll for anchor navigation */
html { scroll-behavior: smooth; }

/* Highlight target section when navigating via fragment */
:target {
	animation: target-highlight 2.5s ease-out;
}
@keyframes target-highlight {
	0% { background: rgba(0,194,255,0.18); box-shadow: inset 0 0 0 2px var(--brand); }
	100% { background: transparent; box-shadow: none; }
}

/* Subtle glow on headings being targeted */
h2:target, h3:target {
	position: relative;
}
h2:target::before, h3:target::before {
	content: '';
	position: absolute;
	left: -24px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 0 20px var(--brand), 0 0 40px var(--brand);
	animation: pulse-dot 2s ease-out forwards;
}
@keyframes pulse-dot {
	0% { opacity: 1; transform: translateY(-50%) scale(1); }
	100% { opacity: 0; transform: translateY(-50%) scale(0.5); }
}

/* Card hover lift effect */
.card {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.35);
	border-color: rgba(0,194,255,0.25);
}

/* Featured banner hover */
a[href*="agent-experience"] article:hover {
	transform: translateY(-2px);
	border-color: rgba(0,194,255,0.4);
	box-shadow: 0 8px 24px rgba(0,194,255,0.1), 0 4px 12px rgba(0,0,0,.2);
}

/* Clickable cards get cursor pointer */
a.card { cursor: pointer; }

/* Button hover states */
.button {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
}
.button.primary:hover {
	background: linear-gradient(135deg, #00d4ff, #7b6aff);
	box-shadow: 0 12px 32px rgba(0,194,255,.35), 0 4px 12px rgba(106,92,255,.25);
}

/* Nav pill hover */
.pill {
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.links .pill:hover {
	background: rgba(255,255,255,0.06);
	border-color: rgba(0,194,255,0.4);
	color: var(--text);
}

/* Logo dot pulse on hover */
.logo:hover .logo-dot {
	animation: logo-pulse 0.6s ease;
}
@keyframes logo-pulse {
	0% { transform: scale(1); box-shadow: 0 0 24px rgba(0,194,255,.7); }
	50% { transform: scale(1.4); box-shadow: 0 0 40px rgba(0,194,255,1), 0 0 60px rgba(106,92,255,.6); }
	100% { transform: scale(1); box-shadow: 0 0 24px rgba(0,194,255,.7); }
}

/* Badge subtle shimmer */
.badge {
	position: relative;
	overflow: hidden;
}
.badge::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
	animation: badge-shimmer 4s ease-in-out infinite;
}
@keyframes badge-shimmer {
	0%, 100% { left: -100%; }
	50% { left: 100%; }
}

/* Code block subtle gradient border on hover */
.code, pre {
	position: relative;
	transition: border-color 0.3s ease;
}
.code:hover, pre:hover {
	border-color: rgba(0,194,255,0.3);
}

/* Blockquote accent line animation */
blockquote {
	position: relative;
	overflow: hidden;
}
blockquote::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: linear-gradient(180deg, var(--brand), var(--brand-2), var(--brand));
	background-size: 100% 200%;
	animation: gradient-flow 3s ease infinite;
}
@keyframes gradient-flow {
	0%, 100% { background-position: 0% 0%; }
	50% { background-position: 0% 100%; }
}

/* Hero gradient orb (pure CSS ambient light) */
.hero::before {
	content: '';
	position: absolute;
	top: -200px;
	right: -100px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(0,194,255,0.08) 0%, rgba(106,92,255,0.04) 40%, transparent 70%);
	pointer-events: none;
	animation: orb-drift 20s ease-in-out infinite;
	z-index: -1;
}
@keyframes orb-drift {
	0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
	25% { transform: translate(-30px, 20px) scale(1.05); opacity: 0.8; }
	50% { transform: translate(20px, -30px) scale(0.95); opacity: 0.5; }
	75% { transform: translate(-20px, -10px) scale(1.02); opacity: 0.7; }
}

/* Concept page section styling */
.concept-page h2, .concept-page h3 {
	scroll-margin-top: 80px; /* offset for any fixed headers */
}

/* Table row hover */
.concept-page table tbody tr {
	transition: background 0.2s ease;
}
.concept-page table tbody tr:hover {
	background: rgba(0,194,255,0.05);
}

/* Related concepts box glow on hover */
.concept-page > div[style*="background"]:last-of-type {
	transition: box-shadow 0.3s ease;
}
.concept-page > div[style*="background"]:last-of-type:hover {
	box-shadow: 0 0 30px rgba(0,194,255,0.1);
}

/* Footer year auto-update fallback styling */
#year { font-variant-numeric: tabular-nums; }

/* Selection color */
::selection {
	background: rgba(0,194,255,0.3);
	color: #fff;
}

/* Focus states for accessibility */
a:focus-visible, button:focus-visible, .button:focus-visible, .pill:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* Gradient text for hero headings */
.hero h1 {
	background: linear-gradient(135deg, var(--text) 0%, var(--brand) 50%, var(--brand-2) 100%);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: gradient-text 8s ease infinite;
}
@keyframes gradient-text {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* Essay-specific enhancements */
.essay h2 {
	scroll-margin-top: 80px;
	position: relative;
}

/* Horizontal rule shimmer */
.hr {
	position: relative;
	overflow: hidden;
}
.hr::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(0,194,255,0.5), transparent);
	animation: hr-shimmer 6s ease-in-out infinite;
}
@keyframes hr-shimmer {
	0% { left: -50%; }
	100% { left: 150%; }
}

/* Status indicator pulse for live elements */
.badge .status-dot, .ok-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ok);
	animation: status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(55,214,122,0.4); }
	50% { box-shadow: 0 0 0 6px rgba(55,214,122,0); }
}

/* Print styles */
@media print {
	.nav, .footer, .button, .cta { display: none !important; }
	body { background: #fff; color: #000; }
	.card, .code, pre { border: 1px solid #ccc; background: #f9f9f9; }
	/* Disable animations for print */
	*, *::before, *::after { animation: none !important; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* end of file */