html{scroll-behavior:smooth}body{font-family:Poppins,sans-serif;line-height:1.6;margin:0;padding:2rem;background:#f4f4f4;color:#333;transition:background .3s,color .3s}body.dark-mode{background:#121212;color:#f4f4f4}body.dark-mode .App{background:#1e1e1e;box-shadow:0 0 10px #ffffff1a}body.dark-mode h1,body.dark-mode h2,body.dark-mode h3{color:#f4f4f4}body.dark-mode header p{color:#8a4baf}body.dark-mode .links a{color:#f4f4f4}body.dark-mode li{background:#333}body.dark-mode .featured-project,body.dark-mode .building-card{background:#252525;border-color:#333}.App{max-width:800px;margin:0 auto;background:#fff;padding:5rem 2rem 2rem;border-radius:8px;box-shadow:0 0 10px #0000001a;transition:background .3s,box-shadow .3s}header,section,footer{margin-bottom:2rem}section h2{font-size:2rem;margin-bottom:1.5rem;color:#8a4baf}h1{text-align:center;margin-bottom:.5rem;color:#8a4baf}header p{text-align:center;font-size:1.2rem;color:#666;min-height:1.8rem}.typewriter{display:inline-flex;align-items:center;justify-content:center;width:100%}.cursor{display:inline-block;margin-left:2px;color:#8a4baf;animation:blink .8s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.user-photo{width:150px;height:150px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 1rem}#skills h3{margin-top:1.5rem;margin-bottom:.5rem;color:#8a4baf}ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}li{background:#eee;padding:.5rem 1rem;border-radius:4px;text-align:center}.featured-project{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;background:#f9f9f9;border:1px solid #e0e0e0;border-radius:12px;overflow:hidden;margin-bottom:2rem;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}.featured-project:hover{transform:translateY(-4px);box-shadow:0 8px 24px #8a4baf33}.featured-project .featured-image-wrap{position:relative}.featured-project .featured-image-wrap .featured-image{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s ease}.featured-project .featured-image-wrap .featured-image.loaded{opacity:1}.featured-project .featured-image-wrap .featured-badge{position:absolute;top:.75rem;left:.75rem;background:#8a4baf;color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .65rem;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}.featured-project .featured-info{padding:1.5rem;display:flex;flex-direction:column;justify-content:center;gap:.75rem}.featured-project .featured-info h3{font-size:1.4rem;color:#8a4baf;margin:0}.featured-project .featured-info p{font-size:.9rem;line-height:1.6;margin:0}.featured-project .featured-metrics{display:flex;flex-wrap:wrap;gap:.5rem}.featured-project .metric-chip{background:rgba(138,75,175,.12);color:#8a4baf;border:1px solid rgba(138,75,175,.25);padding:.25rem .65rem;border-radius:999px;font-size:.78rem;font-weight:600}.featured-project .project-technologies{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0;display:flex!important;grid-template-columns:none!important}.featured-project .project-technologies .technology-tag{background:#eee;color:#444;padding:.25rem .6rem;border-radius:4px;font-size:.8rem;white-space:nowrap}.featured-project .project-links a{background:#8a4baf;color:#fff;padding:.5rem 1.1rem;border-radius:6px;text-decoration:none;font-size:.88rem;transition:background .2s}.featured-project .project-links a:hover,.project-links a:hover{background:#6e3c8b}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;padding:20px 0}.github-stats{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.github-chart{width:100%;border-radius:8px}.building-card{background:#f9f9f9;border:1px solid #e0e0e0;border-radius:12px;padding:1.5rem}.building-card h3{margin:.5rem 0;color:#8a4baf}.building-card p{margin:0 0 1rem;color:#666}.building-card .building-tech{display:flex;flex-wrap:wrap;gap:.5rem}.building-card .building-tech .technology-tag{background:#eee;color:#444;padding:.25rem .6rem;border-radius:4px;font-size:.82rem}.building-status{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:#4caf50;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.status-dot{width:8px;height:8px;background:#4caf50;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}footer{text-align:center;color:#666}.links a{margin:0 .5rem;color:#333;text-decoration:none}.links a:hover{text-decoration:underline}.fade-in-section{opacity:0;transform:translateY(20px);transition:opacity .5s ease-out,transform .5s ease-out}.fade-in-section.fade-in{opacity:1;transform:translateY(0)}@media (max-width: 768px){body{padding:1rem}.App{padding:4.5rem 1rem 1rem;margin:0;text-align:center}header{text-align:center}h1{font-size:1.8rem}section h2{font-size:1.5rem;text-align:center}#about,#skills,#skills h3{text-align:center}#skills ul{grid-template-columns:repeat(2,1fr);gap:.75rem;margin:0 auto;max-width:100%}#skills li{font-size:.9rem;padding:.5rem}.featured-project{grid-template-columns:1fr}.featured-project .featured-image-wrap{height:200px}.projects-grid{grid-template-columns:1fr;gap:20px}footer{text-align:center}footer .links{display:flex;flex-direction:column;gap:.75rem}footer .links a{display:block;margin:0}}.project{background-color:var(--card-background);border-radius:8px;box-shadow:var(--shadow);padding:20px;margin-bottom:30px;text-align:center;cursor:pointer;transition:transform .3s ease-in-out,box-shadow .3s ease-in-out}.project:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}.project .project-image{width:100%;height:auto;border-radius:4px;margin-bottom:15px;opacity:0;transition:opacity .5s ease-in-out}.project .project-image.loaded{opacity:1}.project h3{color:var(--text-color-primary);margin-bottom:10px}.project p{color:var(--text-color-secondary);line-height:1.6;margin-bottom:15px}.project .project-technologies{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:15px}.project .project-technologies .technology-tag{background-color:#f4f4f4;color:#333;padding:5px 10px;border-radius:5px;font-size:.85em;white-space:nowrap}.project .project-links{display:flex;justify-content:center;gap:15px}.project .project-links a{background-color:#8a4baf;color:#fff;padding:10px 20px;border-radius:5px;text-decoration:none;transition:background-color .3s ease}.project .project-links a:hover{background-color:#6e3c8b}body.dark-mode .project .project-technologies .technology-tag{background-color:#121212;color:#f4f4f4}.gh-loading{text-align:center;color:#888}.gh-wrapper{display:flex;gap:1.5rem;flex-wrap:wrap}.gh-card{flex:1;min-width:220px;background:#1e1e1e;border:1px solid #333;border-radius:8px;padding:1.25rem 1.5rem}.gh-card h3{margin:0 0 1rem;color:#8a4baf;font-size:1rem;text-transform:uppercase;letter-spacing:.05em}.gh-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.gh-stat{display:flex;flex-direction:column;align-items:center;gap:.2rem}.gh-stat-value{font-size:1.6rem;font-weight:700;color:#c084fc}.gh-stat-label{font-size:.75rem;color:#888;text-transform:uppercase;letter-spacing:.04em}.gh-langs{display:flex;flex-direction:column;gap:.65rem}.gh-lang-row{display:grid;grid-template-columns:110px 1fr 36px;align-items:center;gap:.5rem}.gh-lang-name{font-size:.85rem;white-space:nowrap}.gh-lang-bar-bg{background:#333;border-radius:4px;height:8px;overflow:hidden}.gh-lang-bar-fill{height:100%;background:#8a4baf;border-radius:4px;transition:width .4s ease}.gh-lang-pct{font-size:.75rem;color:#888;text-align:right}@media (max-width: 768px){.gh-wrapper{flex-direction:column}.gh-lang-row{grid-template-columns:90px 1fr 32px}}.navbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 2rem;transition:background .3s,box-shadow .3s}.navbar.scrolled{background:rgba(30,30,30,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px #ffffff14}.navbar-inner{max-width:800px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.navbar-brand{font-weight:700;font-size:1.1rem;color:#8a4baf;text-decoration:none;letter-spacing:.05em}.navbar-links{display:flex;gap:1.5rem}.navbar-links a{color:#aaa;text-decoration:none;font-size:.9rem;transition:color .2s}.navbar-links a:hover,.navbar-links a.active{color:#8a4baf}.navbar-theme{background:none;border:none;cursor:pointer;font-size:1.1rem;padding:0;line-height:1}@media (max-width: 768px){.navbar{padding:.75rem 1rem}.navbar-links{gap:.75rem}.navbar-links a{font-size:.8rem}}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.75);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .2s ease}.modal-content{background:#1e1e1e;border:1px solid #333;border-radius:12px;max-width:620px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp .25s ease}.modal-close{position:absolute;top:.75rem;right:.75rem;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:1.4rem;line-height:1;width:2rem;height:2rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1;transition:background .2s}.modal-close:hover{background:rgba(255,255,255,.2)}.modal-image{width:100%;border-radius:12px 12px 0 0;display:block}.modal-body{padding:1.5rem}.modal-body h2{color:#8a4baf;margin-bottom:.75rem}.modal-body p{color:#ccc;line-height:1.7;margin-bottom:1.25rem}.modal-metrics{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.metric-chip{background:rgba(138,75,175,.15);color:#c084fc;border:1px solid rgba(138,75,175,.3);padding:.3rem .75rem;border-radius:999px;font-size:.8rem;font-weight:600}.modal-technologies{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}.modal-technologies .technology-tag{background:#2a2a2a;color:#ccc;padding:.3rem .75rem;border-radius:5px;font-size:.82rem}.modal-links{display:flex;gap:.75rem}.modal-links a{background:#8a4baf;color:#fff;padding:.6rem 1.25rem;border-radius:6px;text-decoration:none;font-size:.9rem;transition:background .2s}.modal-links a:hover{background:#6e3c8b}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 768px){.modal-content{max-height:95vh}}