:root{--bg-color: #0f172a;--text-color: #f8fafc;--text-muted: #94a3b8;--card-bg: rgba(30, 41, 59, .7);--card-hover: rgba(51, 65, 85, .9);--border-color: rgba(255, 255, 255, .1);--accent-1: #3b82f6;--accent-2: #8b5cf6;--accent-3: #10b981}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,sans-serif;background-color:var(--bg-color);color:var(--text-color);line-height:1.6;background-image:radial-gradient(at 0% 0%,rgba(59,130,246,.15) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(139,92,246,.15) 0px,transparent 50%);background-attachment:fixed;min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:4rem 2rem}header{text-align:center;margin-bottom:4rem}h1{font-size:3.5rem;font-weight:700;margin-bottom:1rem;background:linear-gradient(to right,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}p.subtitle{font-size:1.25rem;color:var(--text-muted);max-width:600px;margin:0 auto}.category-section{margin-bottom:4rem}.category-title{font-size:2rem;font-weight:600;margin-bottom:2rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color);display:inline-block}.system-design .category-title{border-bottom-color:var(--accent-1);color:#93c5fd}.low-level-design .category-title{border-bottom-color:var(--accent-2);color:#c4b5fd}.behavioral .category-title{border-bottom-color:var(--accent-3);color:#6ee7b7}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:1rem;padding:1.5rem;text-decoration:none;color:var(--text-color);transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center;min-height:120px}.card:hover{transform:translateY(-5px);background:var(--card-hover);border-color:#fff3;box-shadow:0 10px 25px -5px #00000080}.system-design .card:hover{box-shadow:0 10px 25px -5px #3b82f633}.low-level-design .card:hover{box-shadow:0 10px 25px -5px #8b5cf633}.behavioral .card:hover{box-shadow:0 10px 25px -5px #10b98133}.card-title{font-size:1.1rem;font-weight:500}footer{text-align:center;margin-top:5rem;padding-top:2rem;border-top:1px solid var(--border-color);color:var(--text-muted);font-size:.9rem}@media (max-width: 768px){h1{font-size:2.5rem}.container{padding:2rem 1rem}}