:root{font-family:Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif;line-height:1.6;font-weight:400;color-scheme:light;color:#333;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes pulse{0%{box-shadow:0 0 #667eeab3}70%{box-shadow:0 0 0 15px #667eea00}to{box-shadow:0 0 #667eea00}}@keyframes glow{0%,to{text-shadow:0 0 10px rgba(102,126,234,.5)}50%{text-shadow:0 0 20px rgba(102,126,234,.8)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}body{margin:0;min-width:320px;min-height:100vh;padding:0;background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}#app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeInUp 1s ease-out}.main-container{width:100%;max-width:1000px}.hero-section{text-align:center;margin-bottom:3rem;padding:3rem 2rem;background:#fffffff2;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.5);box-shadow:0 8px 32px #0000001a;animation:slideUp .8s ease-out;position:relative;overflow:hidden}.hero-section:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(102,126,234,.1) 0%,transparent 70%);animation:float 6s ease-in-out infinite;pointer-events:none}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.avatar-container{position:relative;width:150px;height:150px;margin:0 auto 1.5rem;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 10px 30px #667eea4d;border:4px solid #ffffff;animation:float 4s ease-in-out infinite;transition:all .3s ease}.avatar-container:hover{animation:pulse 2s infinite;box-shadow:0 15px 40px #667eea80;transform:scale(1.05)}.avatar-image{width:100%;height:100%;object-fit:cover;transition:filter .3s ease}.avatar-container:hover .avatar-image{filter:brightness(1.1)}.avatar-input{display:none}.avatar-upload-label{position:absolute;bottom:0;left:0;right:0;background:#0009;color:#fff;padding:.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8em;transition:all .3s ease;opacity:0}.avatar-container:hover .avatar-upload-label{opacity:1;background:#000c}.upload-icon{cursor:pointer;font-weight:600}.hero-name{font-size:3em;margin:.5rem 0;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;animation:slideInDown .8s ease-out .2s both}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.hero-role{font-size:1.5em;margin:.5rem 0;color:#667eea;font-weight:600;animation:slideInDown .8s ease-out .3s both}.hero-bio{font-size:1.1em;margin:1rem 0 2rem;color:#555;animation:fadeInUp .8s ease-out .4s both}.personal-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:2rem;padding-top:2rem;border-top:2px solid rgba(102,126,234,.2)}.info-item{display:flex;flex-direction:column;align-items:center;padding:1rem;background:linear-gradient(135deg,#667eea0d,#764ba20d);border-radius:12px;border:1px solid rgba(102,126,234,.2);transition:all .3s cubic-bezier(.34,1.56,.64,1);animation:fadeInUp .6s ease-out both}.info-item:nth-child(1){animation-delay:.5s}.info-item:nth-child(2){animation-delay:.6s}.info-item:nth-child(3){animation-delay:.7s}.info-item:nth-child(4){animation-delay:.8s}.info-item:hover{background:linear-gradient(135deg,#667eea26,#764ba226);border:1px solid rgba(102,126,234,.4);transform:translateY(-8px);box-shadow:0 10px 25px #667eea26}.info-label{font-size:.9em;color:#667eea;margin-bottom:.5rem;font-weight:600}.info-value{font-size:1em;color:#333;font-weight:600}.info-value a{color:#667eea;text-decoration:none;transition:color .3s ease}.info-value a:hover{color:#764ba2}.section-container{max-width:1000px;margin:0 auto;padding:0 1rem}.section-title{font-size:2.2em;text-align:center;margin-bottom:2.5rem;color:#333;font-weight:600;animation:slideInDown .8s ease-out}.skills-section{margin-bottom:3rem;padding:3rem 0;animation:fadeInUp .8s ease-out}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}.skill-category{background:#fffffff2;border-radius:16px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(102,126,234,.2);transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 15px #00000014;animation:fadeInUp .6s ease-out both}.skill-category:nth-child(1){animation-delay:.1s}.skill-category:nth-child(2){animation-delay:.2s}.skill-category:nth-child(3){animation-delay:.3s}.skill-category:nth-child(4){animation-delay:.4s}.skill-category:nth-child(5){animation-delay:.5s}.skill-category:hover{background:#fff;transform:translateY(-12px) scale(1.02);border:2px solid rgba(102,126,234,.5);box-shadow:0 15px 40px #667eea4d}.skill-category h3{margin:0 0 1.2rem;font-size:1.3em;color:#667eea;font-weight:600;transition:all .3s ease}.skill-category:hover h3{animation:glow 1.5s ease-in-out infinite}.skill-items{display:flex;flex-wrap:wrap;gap:.7rem}.skill-badge{display:inline-block;background:linear-gradient(135deg,#667eea1a,#764ba21a);color:#667eea;padding:.6rem 1.1rem;border-radius:25px;font-size:.9em;border:1px solid rgba(102,126,234,.4);transition:all .3s cubic-bezier(.34,1.56,.64,1);font-weight:500}.skill-badge:hover{background:linear-gradient(135deg,#667eea40,#764ba240);border:1px solid rgba(102,126,234,.8);color:#764ba2;transform:translateY(-3px) scale(1.1);box-shadow:0 5px 15px #667eea33}.experience-education-section{margin-bottom:3rem;padding:3rem 0;animation:fadeInUp .8s ease-out}.exp-edu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.experience-card,.education-card{background:#fffffff2;border-radius:16px;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(102,126,234,.3);text-align:center;box-shadow:0 4px 15px #00000014;transition:all .3s cubic-bezier(.34,1.56,.64,1);animation:fadeInUp .6s ease-out both}.experience-card{animation-delay:.2s}.education-card{animation-delay:.3s}.experience-card:hover,.education-card:hover{background:#fff;border:2px solid rgba(102,126,234,.6);transform:translateY(-12px);box-shadow:0 15px 40px #667eea4d}.card-icon{font-size:2.5rem;margin-bottom:1rem;animation:float 3s ease-in-out infinite}.education-card:hover .card-icon{animation:float 1s ease-in-out infinite}.card-title{font-size:1.3em;margin-bottom:1rem;color:#667eea;font-weight:600}.card-content{font-size:1em;color:#333;margin:.8rem 0;line-height:1.6}.card-content.degree{font-weight:600;color:#764ba2}.credentials-section{margin-bottom:3rem;padding:3rem 0;animation:fadeInUp .8s ease-out}.credentials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.credential-card{background:#fffffff2;border-radius:16px;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,193,7,.4);text-align:center;box-shadow:0 4px 15px #00000014;transition:all .3s cubic-bezier(.34,1.56,.64,1);animation:fadeInUp .6s ease-out .4s both}.credential-card:hover{background:#fff;border:2px solid rgba(255,193,7,.7);transform:translateY(-12px);box-shadow:0 15px 40px #ffc1074d}.credential-icon{font-size:3rem;margin-bottom:1rem;animation:float 3s ease-in-out infinite;transition:all .3s ease}.credential-card:hover .credential-icon{animation:float 1.5s ease-in-out infinite;transform:scale(1.1)}.credential-header{font-size:1.4em;margin-bottom:1rem;color:#333;font-weight:600;transition:color .3s ease}.credential-card:hover .credential-header{color:#667eea}.credential-detail{font-size:1em;margin:.8rem 0;color:#555;transition:color .3s ease}.credential-card:hover .credential-detail{color:#764ba2}.footer{text-align:center;padding:2rem;color:#666;font-size:1.1em;border-top:2px solid rgba(102,126,234,.2);animation:fadeInUp .8s ease-out .5s both;transition:all .3s ease}@media(max-width:768px){.hero-name{font-size:2em}.hero-role{font-size:1.2em}.section-title{font-size:1.8em}.skills-grid{grid-template-columns:1fr}.personal-info-grid{grid-template-columns:1fr 1fr}.credential-card{padding:1.5rem}.avatar-container{width:120px;height:120px}}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #3178c6aa)}.card{padding:2em}.read-the-docs{color:#888}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}