/* ───────────────────────────────────────────────────────────────────────────── ai-tools.css — the visual identity for the AI-developer-tools guides. The rest of the blog runs on a light, document-like template. That template is right for "how do I activate my subscription" and wrong for these pages: the reader here is a developer, the subject is agents running on a machine, and a page that looks like a printed brochure gets closed before the first heading. So: near-black base, aurora pools bleeding through a grain layer, glass cards. Shared by all three guides on purpose — one file to restyle the whole cluster. ───────────────────────────────────────────────────────────────────────────── */ :root { --void: #05060A; --ink: #F2F4F8; --dim: #99A1B3; --faint: #626B80; --line: rgba(255,255,255,.09); --glass: rgba(255,255,255,.035); --glass-2: rgba(255,255,255,.055); --violet: #8B5CF6; --cyan: #22D3EE; --magenta: #FF2EA6; --amber: #FBBF24; --lime: #A3E635; --grad: linear-gradient(100deg, #22D3EE 0%, #8B5CF6 46%, #FF2EA6 100%); --r: 18px; --max: 780px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Heebo', sans-serif; background: var(--void); color: var(--ink); line-height: 1.78; font-size: 17.5px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ── The depth layer ─────────────────────────────────────────────────────── Three asymmetric aurora pools, fixed so they drift under the content as you scroll, plus a grain sheet on top. Without the grain the gradients read as cheap CSS; with it they read as printed ink. Both are pointer-events:none and sit at z-index 0 — every content block below establishes its own stacking. */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 44% at 78% 8%, rgba(139,92,246,.28) 0%, transparent 68%), radial-gradient(46% 38% at 12% 30%, rgba(34,211,238,.18) 0%, transparent 70%), radial-gradient(52% 40% at 62% 78%, rgba(255,46,166,.15) 0%, transparent 72%); } body::after { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); } body > nav, .hero, .wrap, footer { position: relative; z-index: 2; } /* ── Nav ───────────────────────────────────────────────────────────────── Scoped to the direct child of body on purpose. The table of contents is also a