:root{--bg-color: #0d0d0d;--text-color: #ffffff;--accent-color: #00ff88;--nav-bg: rgba(255, 255, 255, .05);--card-bg: #1a1a1a;--font-family: "Inter", system-ui, -apple-system, sans-serif}body{margin:0;font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased}#root{display:flex;flex-direction:column;min-height:100vh}header{padding:1rem 2rem;background:var(--nav-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:0}nav a{color:#aaa;text-decoration:none;margin-left:1.5rem;transition:color .2s}nav a:hover,nav a.active{color:var(--accent-color)}main{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem}.card{background:var(--card-bg);border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s;border:1px solid rgba(255,255,255,.05)}.card:hover{transform:translateY(-4px);box-shadow:0 10px 30px #00000080;border-color:var(--accent-color)}.card-content{padding:1.5rem}.card h2{margin:0 0 .5rem;font-size:1.25rem}.card p{color:#888;margin:0 0 1.5rem;line-height:1.5}.btn{display:inline-block;padding:.5rem 1rem;background:var(--accent-color);color:#000;text-decoration:none;font-weight:600;border-radius:6px;transition:opacity .2s}.btn:hover{opacity:.9}