:root{--accent: #A855F7;--fg-primary: #FFFFFF;--fg-secondary: #A1A1AA;--fg-muted: #71717A;--fg-inverse: #0A0A0A;--surface-primary: #0A0A0A;--surface-secondary: #1A1A1A;--surface-inverse: #FFFFFF;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,sans-serif;background:var(--surface-primary);color:var(--fg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}.page-frame{width:100%;max-width:1440px;margin:0 auto;display:flex;flex-direction:column;align-items:center;background:var(--surface-primary)}.header{width:100%;min-height:64px;background:var(--surface-primary);padding:0 48px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:50;flex-wrap:wrap;gap:8px}.header-logo{color:var(--fg-primary);font-family:Inter,sans-serif;font-size:18px;font-weight:700;transition:transform .2s ease;flex-shrink:0;white-space:nowrap;display:flex;align-items:center;gap:6px}.header-logo:hover{transform:scale(1.05)}.header-nav{display:flex;gap:clamp(12px,2vw,32px);align-items:center;flex-wrap:wrap}.header-nav a{color:var(--fg-secondary);font-family:Inter,sans-serif;font-size:14px;font-weight:500;transition:color .2s,transform .2s ease;white-space:nowrap;display:flex;align-items:center;gap:4px}.header-nav a:hover{color:var(--fg-primary);transform:translateY(-2px)}.header-mobile{width:100%;height:56px;background:var(--surface-primary);padding:0 20px;display:none;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(168,85,247,.08)}.header-mobile .header-logo{font-size:16px}.mobile-sidebar-wrapper{display:none}.hero-section{width:100%;display:flex;flex-direction:column;gap:32px;padding:80px 48px;align-items:center}.hero-row{width:100%;display:flex;justify-content:space-between;align-items:center}.hero-left{display:flex;flex-direction:column;gap:16px}.hero-name{color:var(--fg-primary);font-family:Inter,sans-serif;font-size:36px;font-weight:700}.hero-title{color:var(--accent);font-family:Geist Mono,monospace;font-size:18px;font-weight:500}.hero-info{display:flex;flex-direction:column;gap:8px}.hero-info-item{display:flex;gap:8px;align-items:center;color:var(--fg-secondary);font-family:Inter,sans-serif;font-size:14px;font-weight:400;transition:transform .2s ease,color .2s;cursor:default}.hero-info-item:hover{transform:scale(1.05);color:var(--fg-primary)}.hero-info-item svg{color:var(--fg-muted);width:16px;height:16px;flex-shrink:0}.about-card{width:100%;background:linear-gradient(90deg,#a855f71a,#ec48991a);border-radius:var(--radius-lg);border:1px solid rgba(168,85,247,.2);padding:20px}.about-inner{width:100%;display:flex;flex-direction:column;padding:8px 16px;position:relative}.about-bar{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:9999px;background:linear-gradient(180deg,#a855f7,#ec4899)}.about-text{color:var(--fg-secondary);font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:1.6}.section-title{color:var(--fg-primary);font-family:Inter,sans-serif;font-size:32px;font-weight:700}.experience-section{width:100%;display:flex;flex-direction:column;gap:32px;padding:48px}.exp-cards{width:100%;display:flex;flex-direction:column;gap:16px}.exp-card{width:100%;background:var(--surface-secondary);border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:28px;border:1px solid transparent;transition:transform .2s ease,box-shadow .3s ease,border-color .3s ease}.exp-card:hover{transform:translateY(-5px);box-shadow:0 4px 20px #0000004d;border-color:#a855f740}.exp-head{width:100%;display:flex;justify-content:space-between;align-items:center}.exp-head-left{display:flex;flex-direction:column;gap:4px}.exp-role{color:var(--fg-primary);font-family:Inter,sans-serif;font-size:18px;font-weight:600}.exp-location{color:var(--fg-secondary);font-family:Inter,sans-serif;font-size:14px;font-weight:400}.period-badge{background:#a855f726;border-radius:9999px;padding:6px 14px}.period-badge span{color:var(--accent);font-family:Geist Mono,monospace;font-size:12px;font-weight:400}.exp-list{width:100%;display:flex;flex-direction:column;gap:10px}.exp-list-item{color:var(--fg-secondary);font-family:Inter,sans-serif;font-size:13px;font-weight:400;line-height:1.5}.skills-section{width:100%;display:flex;flex-direction:column;gap:32px;padding:48px}.skills-grid{width:100%;display:flex;flex-direction:column;gap:24px}.skill-card{width:100%;background:var(--surface-secondary);border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:24px;border:1px solid transparent;transition:transform .2s ease,box-shadow .3s ease,border-color .3s ease}.skill-card:hover{transform:translateY(-5px);box-shadow:0 4px 20px #0000004d;border-color:#a855f740}.skill-card-title{color:var(--accent);font-family:Geist Mono,monospace;font-size:13px;font-weight:600}.skill-tags{display:flex;gap:8px;flex-wrap:wrap}.skill-tag{background:#a855f726;border-radius:9999px;padding:6px 12px;transition:transform .2s ease;position:relative}.skill-tag:hover{transform:scale(1.05) translateY(-2px)}.skill-tag span{color:var(--accent);font-family:Geist Mono,monospace;font-size:12px;font-weight:400}.skill-tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(calc(-50% + var(--tip-x, 0px))) translateY(4px);background:#1e1e2e;border:1px solid rgba(168,85,247,.3);border-radius:10px;padding:10px 14px;width:max-content;max-width:260px;color:#d4d4d8;font-family:Inter,sans-serif;font-size:12px;line-height:1.5;white-space:normal;pointer-events:none;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:100;box-shadow:0 4px 20px #0006}.skill-tooltip:after{content:"";position:absolute;top:100%;left:calc(50% + var(--arrow-x, 0px));transform:translate(-50%);border:6px solid transparent;border-top-color:#a855f74d}.skill-tag:hover .skill-tooltip{opacity:1;transform:translate(calc(-50% + var(--tip-x, 0px))) translateY(0)}.projects-section{width:100%;display:flex;flex-direction:column;gap:32px;padding:48px}.projects-grid{width:100%;display:flex;flex-direction:column;gap:16px}.projects-row{width:100%;display:flex;flex-wrap:wrap;gap:16px}.project-card{flex:1 1 400px;min-width:0;background:var(--surface-secondary);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;border:1px solid transparent;transition:transform .2s ease,box-shadow .3s ease,border-color .3s ease}.project-card:hover{transform:translateY(-5px);box-shadow:0 4px 20px #0000004d;border-color:#a855f740}.project-card-img-wrap{position:relative;height:332px;overflow:hidden}.project-card-img{width:100%;height:100%;background-size:cover;background-position:center;background-color:#2a2a2a;transition:transform .3s ease}.project-card-img--empty{display:flex;align-items:center;justify-content:center}.project-card:hover .project-card-img{transform:scale(1.05)}.project-card-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000;display:flex;align-items:center;justify-content:center;transition:background .3s ease}.project-card:hover .project-card-overlay{background:#0009}.github-overlay-btn{display:inline-flex;align-items:center;gap:8px;background:#ffffff1a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.3);color:#fff;font-family:Inter,sans-serif;font-size:14px;font-weight:500;padding:10px 22px;border-radius:9999px;text-decoration:none;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}.project-card:hover .github-overlay-btn{opacity:1;transform:translateY(0)}.github-overlay-btn:hover{background:#fff3}.project-card-content{display:flex;flex-direction:column;gap:8px;padding:20px;width:100%}.project-card-title{color:var(--fg-primary);font-family:Inter,sans-serif;font-size:16px;font-weight:600}.project-card-desc{color:var(--fg-secondary);font-family:Inter,sans-serif;font-size:13px;font-weight:400;line-height:1.5}.view-all-wrap{width:100%;padding-top:16px;display:flex;justify-content:center}.view-all-btn{display:inline-flex;align-items:center;gap:8px;background:#a855f71a;border-radius:9999px;padding:10px 24px;border:none;cursor:pointer;text-decoration:none;transition:transform .2s ease}.view-all-btn:hover{transform:scale(1.05)}.view-all-btn:active{transform:scale(.95)}.view-all-btn span{color:var(--accent);font-family:Inter,sans-serif;font-size:14px;font-weight:500}.view-all-btn svg{color:var(--accent);width:16px;height:16px}.certificates-section{width:100%;display:flex;flex-direction:column;gap:32px;padding:48px}.cert-grid{width:100%;display:flex;flex-direction:column;gap:16px}.cert-row{width:100%;display:flex;gap:16px}.cert-card{flex:1;background:var(--surface-secondary);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;border:1px solid transparent;transition:transform .2s ease,box-shadow .3s ease,border-color .3s ease;text-decoration:none;cursor:pointer}.cert-card:hover{transform:translateY(-5px);box-shadow:0 4px 15px #0003;border-color:#a855f740}.cert-card-img{width:100%;height:180px;background-size:cover;background-position:center;background-color:#2a2a2a;transition:transform .3s ease}.cert-card:hover .cert-card-img{transform:scale(1.1)}.cert-card-content{display:flex;flex-direction:column;gap:4px;padding:16px;width:100%}.cert-card-title{color:var(--fg-primary);font-family:Inter,sans-serif;font-size:15px;font-weight:600}.cert-card-desc{color:var(--fg-secondary);font-family:Inter,sans-serif;font-size:12px;font-weight:400}.education-section{width:100%;display:flex;flex-direction:column;gap:32px;padding:48px}.edu-cards{width:100%;display:flex;gap:16px}.edu-card{flex:1;background:var(--surface-secondary);border-radius:16px;display:flex;flex-direction:column;gap:12px;padding:28px;border:1px solid transparent;transition:transform .2s ease,box-shadow .3s ease,border-color .3s ease}.edu-card:hover{transform:translateY(-5px);box-shadow:0 4px 20px #0000004d;border-color:#a855f740}.edu-head{display:flex;flex-direction:column;gap:4px}.edu-degree{color:var(--fg-primary);font-family:Inter,sans-serif;font-size:16px;font-weight:600}.edu-institution{color:var(--fg-secondary);font-family:Inter,sans-serif;font-size:14px;font-weight:400}.edu-location{color:var(--fg-muted);font-family:Inter,sans-serif;font-size:13px;font-weight:400}.footer{width:100%;background:var(--surface-primary);border-top:1px solid rgba(168,85,247,.1);display:flex;gap:16px;padding:24px 48px;justify-content:space-between;align-items:center}.footer-text{color:var(--fg-muted);font-family:Inter,sans-serif;font-size:12px;font-weight:400;transition:transform .2s ease}.footer-text:hover{transform:scale(1.01)}.footer-text .laptop-spin{display:inline-block;transition:transform .5s ease}.footer-text:hover .laptop-spin{transform:rotate(360deg)}.projects-page-content{width:100%;display:flex;flex-direction:column;gap:32px;padding:48px;align-items:center}.projects-page-header{width:100%;display:flex;flex-direction:column;gap:8px;align-items:center}.projects-page-subtitle{color:var(--fg-secondary);font-family:Inter,sans-serif;font-size:14px;font-weight:400}.certs-page-content{width:100%;display:flex;flex-direction:column;gap:32px;padding:48px}.certs-page-subtitle{color:var(--fg-secondary);font-family:Inter,sans-serif;font-size:16px;font-weight:400}@media(max-width:768px){.header{display:none}.header-mobile{display:flex;position:sticky;top:0;z-index:50}.mobile-sidebar-wrapper{display:block}.hero-section{gap:24px;padding:48px 20px}.hero-name{font-size:28px;text-align:center}.hero-title{font-size:13px;text-align:center}.hero-row{justify-content:center}.hero-left{align-items:center;gap:12px}.hero-info{gap:6px;align-items:center}.hero-info-item{justify-content:center}.about-card{padding:16px}.about-inner{padding:6px 12px}.section-title{font-size:24px}.experience-section,.skills-section,.projects-section,.certificates-section,.education-section{padding:32px 20px;gap:24px}.skills-grid{gap:16px}.exp-card,.skill-card{gap:12px;padding:20px}.exp-head{flex-direction:column;align-items:flex-start;gap:8px}.projects-row{flex-direction:column;gap:10px}.cert-row{flex-direction:column}.edu-cards{flex-direction:column;gap:12px}.edu-card{gap:10px;padding:20px}.footer{flex-direction:column;gap:8px;padding:20px;align-items:center}.footer-text{font-size:11px}.view-all-wrap{padding-top:12px}.view-all-btn{gap:6px;padding:8px 20px}.project-card-img-wrap{height:180px}}