:root{--bg-color: #0f172a;--text-color: #e2e8f0;--accent-color: #38bdf8;--secondary-bg: #1e293b;--card-bg: #1e293b;--border-color: #334155;--font-main: "Inter", "Noto Color Emoji", system-ui, -apple-system, sans-serif;--max-width: 1000px}[data-theme=light]{--bg-color: #ffffff;--text-color: #1e293b;--accent-color: #0284c7;--secondary-bg: #f1f5f9;--card-bg: #ffffff;--border-color: #e2e8f0}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-color);line-height:1.6;transition:background-color .3s,color .3s}a{color:var(--accent-color);text-decoration:none;transition:opacity .2s}a:hover{opacity:.8}.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}h1,h2,h3{line-height:1.2;margin-bottom:1rem}h1{font-size:3rem;font-weight:800;letter-spacing:-.05em}h2{font-size:2rem;margin-top:3rem;border-bottom:1px solid var(--border-color);padding-bottom:.5rem}h3{font-size:1.25rem;margin-bottom:.5rem}p{margin-bottom:1rem;color:color-mix(in srgb,var(--text-color),transparent 20%)}.btn{display:inline-block;padding:.75rem 1.5rem;background-color:var(--accent-color);color:var(--bg-color);border-radius:6px;font-weight:600;border:none;cursor:pointer;transition:transform .2s}.btn:hover{transform:translateY(-2px)}.card{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem;margin-bottom:1rem;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-2px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.grid{display:grid;gap:1.5rem}@media(min-width:768px){.grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}.header{padding:20px 0;border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:1000;background-color:var(--bg-color);transition:background-color .3s}.header-content{display:flex;justify-content:space-between;align-items:center}.header-nav{display:flex;gap:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:1.5rem}.header-nav::-webkit-scrollbar{display:none}.nav-link{font-size:.9rem;color:var(--text-color);text-decoration:none;white-space:nowrap;transition:color .3s,font-weight .3s}.social-links{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}@media(max-width:768px){.header{padding:15px 0}.header-content{flex-direction:column;align-items:flex-start;gap:1rem}.header-nav{width:100%;padding-bottom:5px}.logo{margin-bottom:.5rem}.hero-title{font-size:2.5rem;word-break:break-word}}