*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0a192f;--bg-secondary:#112240;--text-primary:#ccd6f6;--text-secondary:#8892b0;--accent:#64ffda;--accent-dim:#64ffda12;--accent-glow:#64ffda4d;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"SF Mono", "Fira Code", "Fira Mono", monospace;--max-width:1200px;--sidebar-w:40%;--content-w:60%;--transition:.25s cubic-bezier(.645, .045, .355, 1)}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;line-height:1.6}a{color:var(--accent);transition:color var(--transition);text-decoration:none}#app{max-width:var(--max-width);gap:0;min-height:100vh;margin:0 auto;padding:0 2rem;display:flex}#sidebar{width:var(--sidebar-w);flex-direction:column;justify-content:center;height:100vh;padding:6rem 2rem 6rem 0;display:flex;position:sticky;top:0}.sidebar-inner{flex-direction:column;gap:1.25rem;display:flex}.name{color:var(--text-primary);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:700}.name a{color:inherit}.name a:hover{color:var(--accent)}.tagline{color:var(--text-primary);font-size:clamp(.85rem,1.2vw,.95rem);font-weight:500}.subtagline{color:var(--text-secondary);margin-top:-.5rem;font-size:clamp(.75rem,1vw,.85rem)}.nav{flex-direction:column;gap:.75rem;margin-top:1rem;display:flex}.nav-link{font-size:.8rem;font-family:var(--font-mono);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;transition:all var(--transition);cursor:pointer;align-items:center;gap:.75rem;display:flex}.nav-link:before{content:"";background:var(--text-secondary);width:40px;height:1px;transition:all var(--transition);flex-shrink:0;display:inline-block}.nav-link:hover{color:var(--accent)}.nav-link:hover:before{background:var(--accent);width:70px}.nav-link.active{color:var(--accent)}.nav-link.active:before{background:var(--accent);width:70px}.social{gap:1rem;margin-top:auto;padding-top:2rem;display:flex}.social-link{color:var(--text-secondary);transition:all var(--transition);align-items:center;display:flex}.social-link svg{width:20px;height:20px}.social-link:hover{color:var(--accent);transform:translateY(-2px)}#content{width:var(--content-w);padding:6rem 0 6rem 2rem}.section{margin-bottom:6rem}.section:last-of-type{margin-bottom:4rem}#hero{margin-bottom:6rem}.greeting{font-family:var(--font-mono);color:var(--accent);margin-bottom:.75rem;font-size:.9rem}.hero-name{color:var(--text-primary);margin-bottom:.5rem;font-size:clamp(2.2rem,4vw,3.5rem);font-weight:700;line-height:1.1}.hero-subtitle{color:var(--text-secondary);margin-bottom:1.5rem;font-size:clamp(1.8rem,3vw,3rem);font-weight:600;line-height:1.1}.hero-desc{color:var(--text-secondary);max-width:520px;margin-bottom:1rem;font-size:.95rem}.section-title{color:var(--text-primary);white-space:nowrap;align-items:center;gap:.75rem;margin-bottom:2.5rem;font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:600;display:flex}.section-title:after{content:"";background:var(--bg-secondary);width:100%;height:1px;display:block}.projects-list{flex-direction:column;gap:2.5rem;display:flex}.project-item{transition:all var(--transition);border-radius:8px;margin:0 -1.25rem;padding:1.25rem;position:relative}.project-item:hover{background:var(--accent-dim)}.project-item.featured{background:var(--bg-secondary);border:1px solid #0000}.project-item.featured:hover{border-color:var(--accent-dim);background:var(--bg-secondary)}.project-header{flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-bottom:.5rem;display:flex}.project-title{color:var(--text-primary);transition:color var(--transition);font-size:1.1rem;font-weight:600}.project-title a{color:inherit}.project-title a:hover{color:var(--accent)}.project-badge{font-family:var(--font-mono);color:var(--accent);background:var(--accent-dim);border-radius:4px;padding:.1rem .4rem;font-size:.75rem}.project-dot{color:var(--text-secondary);font-weight:300}.project-stack{font-family:var(--font-mono);color:var(--text-secondary);font-size:.8rem}.project-desc{color:var(--text-secondary);font-size:.9rem;line-height:1.5}.skills-grid{grid-template-columns:1fr 1fr;gap:2rem;display:grid}.skill-category h4{font-size:.85rem;font-family:var(--font-mono);color:var(--accent);margin-bottom:.75rem}.skill-items{flex-wrap:wrap;gap:.5rem;display:flex}.skill-tag{color:var(--text-secondary);background:var(--bg-secondary);transition:all var(--transition);border-radius:4px;padding:.25rem .75rem;font-size:.85rem}.skill-tag:hover{color:var(--accent);background:var(--accent-dim)}.experience-list{flex-direction:column;gap:2.5rem;display:flex}.exp-item{transition:all var(--transition);border-radius:8px;margin:0 -1.25rem;padding:1.25rem;position:relative}.exp-item:hover{background:var(--accent-dim)}.exp-item h4{color:var(--text-primary);margin-bottom:.15rem;font-size:1.05rem;font-weight:600}.exp-role{font-family:var(--font-mono);color:var(--accent);margin-bottom:.5rem;font-size:.8rem}.exp-desc{color:var(--text-secondary);font-size:.9rem;line-height:1.5}.contact-content{max-width:480px}.contact-text{color:var(--text-secondary);margin-bottom:2rem;font-size:.95rem;line-height:1.6}.contact-btn{font-family:var(--font-mono);color:var(--accent);border:1px solid var(--accent);transition:all var(--transition);border-radius:4px;padding:.75rem 1.5rem;font-size:.85rem;display:inline-block}.contact-btn:hover{background:var(--accent-dim);box-shadow:0 0 12px var(--accent-glow)}.footer{padding:2rem 0}.footer p{font-family:var(--font-mono);color:var(--text-secondary);font-size:.75rem}@media (width<=768px){#app{flex-direction:column;padding:0 1.5rem}#sidebar{justify-content:flex-start;width:100%;height:auto;padding:2rem 0 0;position:static}.sidebar-inner{gap:1rem}.social{margin-top:1rem;padding-top:.5rem}.nav{flex-flow:wrap;gap:.5rem 1.5rem}.nav-link{text-transform:none;letter-spacing:normal;font-size:.75rem}.nav-link:before{display:none}#content{width:100%;padding:2rem 0}.hero-name{font-size:2.5rem}.hero-subtitle{font-size:2rem}.hero-desc{max-width:100%}.skills-grid{grid-template-columns:1fr}.project-item,.exp-item{margin:0}.project-item:hover,.exp-item:hover{background:0 0}}