@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/geist/400.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/geist/500.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/geist/700.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/geist/900.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono/400.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jetbrains-mono/500.woff2') format('woff2'); } :root { --bg: #0a0a0a; --surface: #111111; --fg: #fafafa; --muted: #888888; --rule: #262626; --accent: #7c3aed; --accent-fg: #ffffff; --aurora-1: rgba(124, 58, 237, 0.22); --aurora-2: rgba(99, 102, 241, 0.16); --aurora-3: rgba(217, 70, 239, 0.10); --radius: 12px; --radius-lg: 16px; --font-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace; --content-width: 720px; --grid-width: 1240px; } @media (prefers-color-scheme: light) { :root { --bg: #fafafa; --surface: #ffffff; --fg: #0a0a0a; --muted: #666666; --rule: #e5e5e5; --accent: color-mix(in oklch, #7c3aed 80%, black); --aurora-1: rgba(124, 58, 237, 0.14); --aurora-2: rgba(99, 102, 241, 0.10); --aurora-3: rgba(217, 70, 239, 0.08); } } * { box-sizing: border-box; } html { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.m-149 { margin: 0; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; position: relative; overflow-x: hidden; } .aurora-bg { position: fixed; inset: -20%; pointer-events: none; z-index: 0; background: radial-gradient(at 20% 20%, var(--aurora-1) 0, transparent 45%), radial-gradient(at 80% 30%, var(--aurora-2) 0, transparent 45%), radial-gradient(at 50% 80%, var(--aurora-3) 0, transparent 50%); animation: aurora-float 22s ease-in-out infinite alternate; } @keyframes aurora-float { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(2%, -1%) rotate(0.5deg); } 100% { transform: translate(-2%, 1%) rotate(-0.5deg); } } a { color: var(--fg); text-decoration: none; } a:hover { color: var(--accent); } ::selection { background: var(--accent); color: var(--accent-fg); } img { max-width: 100%; display: block; } .s-7a7, .t-02a, .s-491 { position: relative; z-index: 1; } .w-dc2 { max-width: var(--grid-width); margin: 0 auto; padding: 1rem 1.5rem; } .s-7a7 { background: rgba(10, 10, 10, 0.7); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); padding: 0.5rem 0; position: sticky; top: 0; z-index: 10; } @media (prefers-color-scheme: light) { .s-7a7 { background: rgba(250, 250, 250, 0.75); } } .s-7a7 .t-5ad { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; } .brand-pill { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fg); padding: 0.4rem 0.6rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); } .brand-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } .brand-dot--sm { width: 6px; height: 6px; } .brand-text { font: 700 14px/1 var(--font-display); letter-spacing: -0.012em; } .brand-text--sm { font-size: 13px; font-weight: 500; } .s-7a7 .t-c2d ul, .s-7a7 .c-764 { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 1.4rem; } .s-7a7 .t-c2d a { font: 500 14px/1 var(--font-display); color: var(--muted); letter-spacing: -0.005em; } .s-7a7 .t-c2d a:hover { color: var(--fg); } .cta-pill { display: inline-block; padding: 0.45rem 0.95rem; background: var(--fg); color: var(--bg) !important; border-radius: 999px; font-weight: 600 !important; border: 1px solid var(--fg); transition: opacity 0.15s ease; } .cta-pill:hover { opacity: 0.85; color: var(--bg) !important; } .t-02a { padding: 0 0 4rem; } .hero-glow { padding: 5rem 0 4rem; text-align: center; position: relative; } .hero-glow--static { padding: 3rem 0 2rem; } .index-hero { padding: 6rem 0 4rem; } .hero-inner { max-width: 880px; text-align: center; } .pill-badge { display: inline-block; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); color: var(--muted); font: 500 12px/1 var(--font-mono); letter-spacing: 0; margin: 0 auto 1.4rem; text-transform: lowercase; } .pill-badge--sm { font-size: 11px; padding: 0.25rem 0.7rem; margin-bottom: 0.8rem; } .hero-title { font: 900 clamp(40px, 7vw, 84px)/1 var(--font-display); letter-spacing: -0.04em; margin: 0 0 1.4rem; text-wrap: balance; background: linear-gradient(180deg, var(--fg) 30%, color-mix(in srgb, var(--fg) 60%, transparent) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-dek { font: 400 19px/1.55 var(--font-body); color: var(--muted); margin: 0 auto 1.5rem; max-width: 640px; text-wrap: pretty; } .hero-byline { font: 500 13px/1 var(--font-mono); color: var(--muted); margin: 0; } .hero-byline time { font-variant-numeric: tabular-nums; } .byline-dot { margin: 0 0.5rem; opacity: 0.5; } .article-wrap { padding-top: 1rem; max-width: 820px; } .article-photo { margin: 0 0 2.5rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--rule); } .article-photo img { width: 100%; display: block; } .prose-vercel { font: 400 17px/1.7 var(--font-body); color: var(--fg); max-width: var(--content-width); margin: 0 auto; } .prose-vercel p { margin: 0 0 1.3em; text-wrap: pretty; } .prose-vercel h2 { font: 700 30px/1.2 var(--font-display); letter-spacing: -0.02em; margin: 2.2em 0 0.6em; text-wrap: balance; } .prose-vercel h3 { font: 600 22px/1.3 var(--font-display); letter-spacing: -0.012em; margin: 1.8em 0 0.5em; text-wrap: balance; } .prose-vercel blockquote { margin: 1.8em 0; padding: 1.2rem 1.5rem; background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; font: 500 18px/1.55 var(--font-body); color: var(--fg); text-wrap: pretty; } .prose-vercel a { color: var(--fg); border-bottom: 1px solid var(--accent); transition: color 0.15s ease; } .prose-vercel a:hover { color: var(--accent); } .prose-vercel code { font-family: var(--font-mono); background: var(--surface); padding: 2px 7px; border-radius: 6px; border: 1px solid var(--rule); font-size: 0.9em; color: var(--accent); } .prose-vercel pre { font-family: var(--font-mono); font-size: 14px; line-height: 1.55; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.2rem; overflow-x: auto; margin: 1.6em 0; } .prose-vercel pre code { background: transparent; border: 0; padding: 0; color: var(--fg); } .prose-vercel ul, .prose-vercel ol { padding-left: 1.4em; margin: 0 0 1.3em; } .prose-vercel li { margin: 0.3em 0; } .prose-vercel li::marker { color: var(--muted); } .prose-vercel img { border-radius: var(--radius); border: 1px solid var(--rule); margin: 1.6em 0; width: 100%; } .prose-vercel hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rule), transparent); margin: 2em 0; } .index-wrap { padding: 0 1.5rem 4rem; max-width: var(--grid-width); } .grid-shell { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; } .ghost-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .ghost-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 8%, transparent); } .ghost-card-link { display: block; color: var(--fg); } .ghost-card-link:hover { color: var(--fg); } .ghost-card-photo { margin: 0; } .ghost-card-photo img { width: 100%; display: block; } .ghost-card-body { padding: 1.2rem 1.4rem 1.4rem; } .ghost-card-body .pill-badge { margin: 0 0 0.7rem; } .ghost-card-title { font: 700 22px/1.2 var(--font-display); letter-spacing: -0.015em; margin: 0 0 0.55rem; text-wrap: balance; } .ghost-card-dek { font: 400 14.5px/1.55 var(--font-body); color: var(--muted); margin: 0 0 0.9rem; text-wrap: pretty; } .ghost-card-byline { font: 500 12.5px/1 var(--font-mono); color: var(--muted); margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .ghost-card-byline time { font-variant-numeric: tabular-nums; } .ghost-card-arrow { color: var(--accent); font-weight: 600; transition: transform 0.18s ease; } .ghost-card:hover .ghost-card-arrow { transform: translateX(3px); } .t-d3e { margin-top: 1rem; padding: 1.4rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); } .aside-eyebrow { font: 500 11px/1 var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 0.7rem; } .t-d3e .t-be7 { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; font-size: 14px; font-weight: 500; } .s-491 { border-top: 1px solid var(--rule); margin-top: 0; padding: 2rem 0; } .s-491 .t-5ad { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; } .footer-brand { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; color: var(--fg); } .s-491 .t-be7, .s-491 .c-764 { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1.4rem; font: 500 13px/1 var(--font-display); } .s-491 .t-be7 a { color: var(--muted); } .s-491 .t-be7 a:hover { color: var(--fg); } .colophon { font: 500 13px/1.4 var(--font-mono); color: var(--muted); margin: 0; flex-basis: 100%; } @media (max-width: 720px) { .hero-title { font-size: 44px; letter-spacing: -0.03em; } .hero-glow { padding: 3.5rem 0 2.5rem; } .index-hero { padding: 4rem 0 2.5rem; } .s-7a7 .t-5ad { gap: 0.75rem; } .s-7a7 .t-c2d ul { gap: 0.8rem; } .card-grid { grid-template-columns: 1fr; } }