/* Design tokens (mirrors the Next.js version) + prose + small utilities. Tailwind utility classes come from the Play CDN configured in the . */ :root { --background: 0 0% 100%; --foreground: 240 10% 8%; --card: 0 0% 100%; --card-foreground: 240 10% 8%; --primary: 240 6% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 5% 96%; --secondary-foreground: 240 6% 10%; --muted: 240 5% 96%; --muted-foreground: 240 4% 46%; --accent: 240 5% 94%; --accent-foreground: 240 6% 10%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 98%; --border: 240 6% 90%; --ring: 240 6% 10%; --radius: 0.75rem; } .dark { --background: 240 10% 4%; --foreground: 0 0% 96%; --card: 240 8% 6%; --card-foreground: 0 0% 96%; --primary: 0 0% 98%; --primary-foreground: 240 6% 10%; --secondary: 240 5% 12%; --secondary-foreground: 0 0% 96%; --muted: 240 5% 12%; --muted-foreground: 240 5% 60%; --accent: 240 5% 15%; --accent-foreground: 0 0% 96%; --destructive: 0 63% 45%; --destructive-foreground: 0 0% 98%; --border: 240 5% 16%; --ring: 0 0% 83%; } * { border-color: hsl(var(--border)); } html { scroll-behavior: smooth; } body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: hsl(var(--primary) / 0.2); } .container { width: 100%; margin-inline: auto; padding-inline: 1.5rem; max-width: 1200px; } .text-balance { text-wrap: balance; } .gradient-text { background-image: linear-gradient( to bottom right, hsl(var(--foreground)), hsl(var(--foreground)), hsl(var(--foreground) / 0.5) ); -webkit-background-clip: text; background-clip: text; color: transparent; } .grid-pattern { background-image: linear-gradient(to right, hsl(var(--border) / 0.6) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--border) / 0.6) 1px, transparent 1px); background-size: 56px 56px; } .glow { box-shadow: 0 0 0 1px hsl(var(--border)), 0 8px 40px -12px hsl(var(--primary) / 0.25); } /* Reveal-on-scroll animation (progressive enhancement via app.js) */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(0.21, 0.47, 0.32, 0.98), transform 0.6s cubic-bezier(0.21, 0.47, 0.32, 0.98); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Long-form content */ .prose-content { line-height: 1.75; color: hsl(var(--muted-foreground)); } .prose-content h1 { font-size: 1.875rem; font-weight: 700; color: hsl(var(--foreground)); margin: 2rem 0 1rem; } .prose-content h1:first-child { margin-top: 0; } .prose-content h2 { font-size: 1.5rem; font-weight: 600; color: hsl(var(--foreground)); margin: 2rem 0 0.75rem; } .prose-content h3 { font-size: 1.25rem; font-weight: 600; color: hsl(var(--foreground)); margin: 1.5rem 0 0.5rem; } .prose-content p { margin: 1rem 0; } .prose-content ul { list-style: disc; padding-left: 1.5rem; margin: 1rem 0; } .prose-content li { margin: 0.25rem 0; } .prose-content strong { color: hsl(var(--foreground)); font-weight: 600; } .prose-content code { background: hsl(var(--muted)); color: hsl(var(--foreground)); padding: 0.1rem 0.35rem; border-radius: 0.3rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.875em; } .prose-content blockquote { border-left: 2px solid hsl(var(--border)); padding-left: 1rem; font-style: italic; margin: 1rem 0; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(4px); } .lightbox.open { display: flex; } .lightbox img, .lightbox video { max-height: 85vh; max-width: 72rem; width: 100%; object-fit: contain; border-radius: 0.5rem; }