:root{--primary: #6366f1;--primary-dark: #4f46e5;--bg: #0a0a0f;--bg-elevated: #14141f;--bg-card: #1a1a2e;--text: #e4e4e7;--text-muted: #a1a1aa;--border: #27272a;--accent: #8b5cf6;--success: #10b981;--warning: #f59e0b;--error: #ef4444}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}.header{background:var(--bg-elevated);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem}.logo{font-size:1.5rem;font-weight:700;color:var(--primary);text-decoration:none}.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer}.nav-toggle span{width:24px;height:2px;background:var(--text);transition:.3s}.nav-links{display:flex;gap:2rem;list-style:none}.nav-links a{color:var(--text-muted);text-decoration:none;transition:color .2s}.nav-links a:hover,.nav-links a.active{color:var(--primary)}.hero{padding:6rem 0;text-align:center;background:linear-gradient(135deg,var(--bg) 0%,var(--bg-elevated) 100%)}.hero h1{font-size:3.5rem;margin-bottom:1rem;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:1.25rem;color:var(--text-muted);max-width:700px;margin:0 auto 2rem}.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.875rem 2rem;border-radius:8px;text-decoration:none;font-weight:600;transition:all .2s;display:inline-block}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px)}.btn-secondary{background:transparent;color:var(--primary);border:2px solid var(--primary)}.btn-secondary:hover{background:var(--primary);color:#fff}.section{padding:4rem 0}.section h2{font-size:2.5rem;margin-bottom:2rem;text-align:center}.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}.topic-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;transition:all .3s;text-decoration:none;color:var(--text);display:block}.topic-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 8px 24px #6366f126}.topic-card-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:1rem}.topic-category{font-size:.75rem;padding:.25rem .75rem;background:var(--primary);color:#fff;border-radius:12px;font-weight:600}.topic-difficulty{font-size:.75rem;padding:.25rem .75rem;background:var(--bg-elevated);color:var(--text-muted);border-radius:12px;border:1px solid var(--border)}.topic-card h3{font-size:1.25rem;margin-bottom:.5rem;color:var(--text)}.topic-card p{color:var(--text-muted);font-size:.95rem}.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.category-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:2rem;text-align:center;transition:all .3s}.category-card:hover{border-color:var(--accent);transform:translateY(-4px)}.category-card h3{font-size:1.25rem;margin-bottom:.5rem;color:var(--primary)}.category-card p{color:var(--text-muted);font-size:.9rem}.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;max-width:1000px;margin:0 auto}.why-item{text-align:center}.why-item h3{font-size:1.25rem;margin-bottom:.5rem;color:var(--primary)}.why-item p{color:var(--text-muted)}.footer{background:var(--bg-elevated);border-top:1px solid var(--border);padding:3rem 0 1.5rem;margin-top:4rem}.footer-content{display:grid;grid-template-columns:2fr 1fr;gap:3rem;margin-bottom:2rem}.footer-brand .logo{font-size:1.5rem;margin-bottom:.5rem}.footer-brand p{color:var(--text-muted)}.footer-links{display:flex;gap:3rem}.footer-column h4{margin-bottom:1rem;color:var(--text)}.footer-column ul{list-style:none}.footer-column a{color:var(--text-muted);text-decoration:none;transition:color .2s}.footer-column a:hover{color:var(--primary)}.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid var(--border);color:var(--text-muted);font-size:.9rem}.content-container{max-width:800px;margin:3rem auto}.content-section{margin-bottom:3rem}.content-section h2{font-size:1.75rem;margin-bottom:1rem;text-align:left}.content-section ul{margin-left:1.5rem;color:var(--text-muted)}.content-section li{margin-bottom:.5rem}.contact-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.contact-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:2rem;text-align:center;text-decoration:none;color:var(--text);transition:all .3s}.contact-card:hover{border-color:var(--primary);transform:translateY(-4px)}.contact-icon{font-size:2rem;margin-bottom:1rem;color:var(--primary)}.contact-card h3{margin-bottom:.5rem}.contact-card p{color:var(--text-muted);font-size:.9rem}.page-header{text-align:center;margin-bottom:3rem}.page-header h1{font-size:3rem;margin-bottom:.5rem}.page-header p{color:var(--text-muted);font-size:1.1rem}.topics-controls{margin-bottom:2rem}.search-input{width:100%;padding:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:1rem;margin-bottom:1rem}.search-input:focus{outline:none;border-color:var(--primary)}.filter-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.filter-btn{padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);cursor:pointer;transition:all .2s}.filter-btn:hover,.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.breadcrumb{margin-bottom:2rem;color:var(--text-muted);font-size:.9rem}.breadcrumb a{color:var(--primary);text-decoration:none}.topic-hero{margin-bottom:3rem}.topic-meta{display:flex;gap:1rem;margin:1rem 0;flex-wrap:wrap}.topic-hero h1{font-size:2.5rem;margin-bottom:1rem}.topic-hero .summary{font-size:1.1rem;color:var(--text-muted)}.topic-section{margin-bottom:3rem}.topic-section h2{font-size:1.75rem;margin-bottom:1rem;text-align:left}.topic-section h3{font-size:1.25rem;margin:1.5rem 0 .75rem}.callout{background:var(--bg-card);border-left:4px solid var(--primary);padding:1rem 1.5rem;margin:1.5rem 0;border-radius:4px}.callout.warning{border-left-color:var(--warning)}.callout.error{border-left-color:var(--error)}.diagram{margin:2rem 0;text-align:center}.diagram img{max-width:100%;border-radius:8px;border:1px solid var(--border)}.diagram-caption{margin-top:.5rem;color:var(--text-muted);font-size:.9rem}pre{background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:1.5rem;overflow-x:auto;margin:1.5rem 0}code{font-family:Courier New,monospace;font-size:.9rem}.topic-navigation{display:flex;justify-content:space-between;margin-top:4rem;padding-top:2rem;border-top:1px solid var(--border)}.nav-link{text-decoration:none;color:var(--text);padding:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;transition:all .2s;flex:1;max-width:45%}.nav-link:hover{border-color:var(--primary)}.nav-link-label{font-size:.8rem;color:var(--text-muted);margin-bottom:.25rem}.nav-link-title{font-weight:600}.related-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin-top:1rem}.related-topic{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:1rem;text-decoration:none;color:var(--text);transition:all .2s}.related-topic:hover{border-color:var(--primary)}@media (max-width: 768px){.nav-toggle{display:flex}.nav-links{position:absolute;top:100%;left:0;right:0;background:var(--bg-elevated);flex-direction:column;padding:1rem;gap:0;display:none;border-bottom:1px solid var(--border)}.nav-links.active{display:flex}.nav-links li{padding:.75rem 0}.hero h1{font-size:2.5rem}.hero-subtitle{font-size:1.1rem}.section h2{font-size:2rem}.footer-content{grid-template-columns:1fr}.topic-navigation{flex-direction:column;gap:1rem}.nav-link{max-width:100%}}
