:root{--color-bg-base: #ffffff;--color-bg-surface: #fafafa;--color-bg-surface-hover: #f4f4f5;--color-text-primary: #09090b;--color-text-secondary: #71717a;--color-border: #e4e4e7;--color-primary: #000000;--color-primary-foreground: #ffffff;--color-accent: #2563eb;--color-accent-glow: rgba(37, 99, 235, .15);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--space-12: 48px;--space-16: 64px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 24px;--radius-2xl: 32px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1)}@media (prefers-color-scheme: dark){:root{--color-bg-base: #000000;--color-bg-surface: #09090b;--color-bg-surface-hover: #18181b;--color-text-primary: #ffffff;--color-text-secondary: #a1a1aa;--color-border: #27272a;--color-primary: #ffffff;--color-primary-foreground: #000000}}body{margin:0;font-family:var(--font-sans);background-color:var(--color-bg-base);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}.container{max-width:1280px;margin:0 auto;padding:0 24px}.glass{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-border)}.glass-panel{background:#ffffff80;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-border)}@media (prefers-color-scheme: dark){.glass,.glass-panel{background:#09090b99;border-color:#ffffff14}}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-4{gap:16px}.gap-8{gap:32px}.grid{display:grid}.bento-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:24px}@media (min-width: 768px){.bento-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.bento-grid{grid-template-columns:repeat(3,1fr)}.col-span-2{grid-column:span 2}}.text-gradient{background:linear-gradient(135deg,var(--color-text-primary),var(--color-text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-accent-gradient{background:linear-gradient(135deg,#3b82f6,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-slide-up{animation:slideUp .8s cubic-bezier(.16,1,.3,1) forwards}.animate-fade-in{animation:fadeIn 1s ease-out forwards}.prose{color:var(--color-text-secondary);line-height:1.75;font-size:1.05rem;max-width:65ch}.prose h1,.prose h2,.prose h3,.prose h4{color:var(--color-text-primary);font-weight:700;line-height:1.3;margin-top:2.5em;margin-bottom:.8em;letter-spacing:-.02em}.prose h1{font-size:2.5rem;margin-top:0;font-weight:800;letter-spacing:-.03em}.prose h2{font-size:1.75rem;border-bottom:1px solid var(--color-border);padding-bottom:.3em;margin-bottom:1em}.prose h3{font-size:1.35rem}.prose h4{font-size:1.1rem}.prose p{margin-bottom:1.5em}.prose strong{color:var(--color-text-primary);font-weight:600}.prose ul,.prose ol{margin-bottom:1.5em;padding-left:1.5em}.prose li{margin-bottom:.5em}.prose hr{border:0;border-top:1px solid var(--color-border);margin:3em 0}.prose code:not(pre code){background:var(--color-bg-surface);color:var(--color-text-primary);border:1px solid var(--color-border);padding:.2em .4em;border-radius:6px;font-size:.85em;font-family:var(--font-mono)}.prose pre{background:#0f172a;color:#f8fafc;padding:1.25em 1.5em;border-radius:8px;overflow-x:auto;margin:1.5em 0 2em;font-family:var(--font-mono);font-size:.9em;line-height:1.6;border:1px solid var(--color-border);position:relative}.prose blockquote{font-style:italic;border-left:4px solid var(--color-accent);margin:1.5em 0;color:var(--color-text-primary);background:var(--color-bg-surface);padding:1em;border-radius:0 8px 8px 0}
