:root{--max-w: 1100px;--pad-x: 16px;--bg: #0b0b0f;--bg-elev: #121218;--text: #e5e7eb;--muted: #9ca3af;--border: #1f2430;--hover: #1a1f2b}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}a{color:inherit;text-decoration:none}header{border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-elev);z-index:10}header>nav a{padding:6px 10px;border-radius:6px;color:var(--text)}header>nav a:hover{background:var(--hover)}main{width:100%;max-width:var(--max-w);margin:0 auto;padding:16px var(--pad-x)}footer{background:var(--bg-elev);color:var(--muted);border-top:1px solid var(--border)}#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}