:root{--color-bg: #0a0a0a;--color-text: #ffffff;--color-primary: #646cff;--color-secondary: #535bf2;--color-accent: #ff2e63;--color-surface: #1a1a1a;--color-surface-hover: #2a2a2a;--font-main: "Inter", system-ui, -apple-system, sans-serif;--font-display: "Outfit", sans-serif;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 2rem;--spacing-lg: 4rem;--spacing-xl: 8rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--radius-full: 9999px;--transition-fast: .2s ease;--transition-normal: .3s ease;--container-width: 1200px}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-main);background-color:var(--color-bg);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.2;margin-bottom:var(--spacing-sm)}a{color:inherit;text-decoration:none;transition:color var(--transition-fast)}button{cursor:pointer;border:none;background:none;font-family:inherit}img{max-width:100%;display:block}.container{max-width:var(--container-width);margin:0 auto;padding:0 var(--spacing-md)}.section{padding:var(--spacing-xl) 0}.btn{display:inline-block;padding:.8rem 2rem;background-color:var(--color-primary);color:#fff;border-radius:var(--radius-full);font-weight:600;transition:transform var(--transition-fast),background-color var(--transition-fast)}.btn:hover{background-color:var(--color-secondary);transform:translateY(-2px)}.btn-outline{background-color:transparent;border:2px solid var(--color-text)}.btn-outline:hover{background-color:var(--color-text);color:var(--color-bg)}.text-center{text-align:center}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}